Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 11 additions & 32 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,47 +1,26 @@
[![Custom badge](https://img.shields.io/endpoint?url=https://badges-shields-io-88j4y07yzimq.runkit.sh)](https://deploy.dabble.dev/deploy/v2/yojf15ci7h)
![](https://raw.githubusercontent.com/rimmi21/alexa-hosted-s3-audio-example-skill/main/assets/image.png)

# Playing mp3 files in an Alexa-Hosted skill
Hey this is Steve at Dabble Lab and in this tutorial, we'll look at playing an mp3 file from an Alexa-Hosted skill's S3 bucket.

## Overview
# Alexa Hosted S3 Audio Skill Example

When you create an [Alexa-Hosted](https://developer.amazon.com/en-US/docs/alexa/hosted-skills/build-a-skill-end-to-end-using-an-alexa-hosted-skill.html) skill, an Amazon S3 bucket is also created for hosting media files. But the files you store in that bucket are not accessible publicly. So, you can't just use the default file URL in your skill, you need a signed URL.

## Steps

To follow-along, you can [click this link to deploy this skill template](https://deploy.dabble.dev/deploy/v2/yojf15ci7h) to your Alexa console. Or, you can copy and past the code from the following steps.

### Step 1 - Create and Alexa-Hosted skill
- Login to [developer.amazon.com/alexa/console](https://developer.amazon.com/alexa/console)
- Create a new Alexa-Hosted skill for Node.js using the 'Hello World' template

### Step 2 - Upload an mp3 file to S3
- From the `code` tab open S3
- Upload an mp3 file into the Media folder
> NOTE: Make sure the file is formatted correctly. Not all .mp3 files will play in an Alexa skill. Check out the [Alexa Audio Converter](https://www.jovo.tech/audio-converter) from Jovo.Tech for easily converting audio files to work with your skills.
This is an Alexa skill template that provides a starting point for creating a skill that uses the [Alexa-Hosted S3 Audio Utility](https://developer.amazon.com/en-US/docs/alexa/hosted-skills/build-a-skill-end-to-end-using-an-alexa-hosted-skill.html) to quickly store a properly formatted audio file in the hosted s3 media bucket and play it in the skill.

### Step 3 - Get the S3 Pre-Signed URL to play the file
### Using this skill template

When you create an Alexa-Hosted skill in the Alexa Developer Console using the "Hello World" template, the code will include a file named [util.js](./lambda/util.js). The `util.js` file can be used to get a signed url for .mp3 file saved in the S3 `./Media` folder. So start by requiring `util.js` by adding the following to the top of `index.js`.
1. If you don't have one already, create an [Amazon Developer account](https://developer.amazon.com/).

```javascript
const util = require('./util.js');
```
2. Click the button below to deploy the code for this skill into your Alexa developer account.

Now we can use the `getS3PreSignedUrl` method in `util` to get a signed URL that will let Alexa play the .mp3 file. We'll do that using an SSML tag in the speech output.
[![Custom badge](https://img.shields.io/endpoint?url=https://badges-shields-io-88j4y07yzimq.runkit.sh)](https://deploy.dabble.dev/deploy/v2/yojf15ci7h)

> NOTE: The URI that get generated by the `util.js` needs to be formatted a bit or you'll get an error. Specifically, you need to replace instances of `&` in the URL with `&`. Note the `.replace(/&/g,'&')` in the example below.
3. In the Alexa developer console, set the skill's invocation name.

```javascript
const audioUrl = Util.getS3PreSignedUrl("Media/your-audio-file.mp3").replace(/&/g,'&');
return handlerInput.responseBuilder
.speak(`hello world with audio <audio src="${audioUrl}"/>`)
.getResponse();
```
4. Test the skill with an Alexa device that can play video.

## Testing
> **NOTE:** You can test the skill in devices like: Echo Dot, Echo Show, Fire TV, some Fire tablets, and other devices.

At this point you should be able to deploy the changes to your Alexa-Hosted skill and hear the audio file play when the skill lanuches.
5. Modify the skill code to use your own stream URL.



Binary file added assets/image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.