"What's That Song" Alexa Skill with Spotify

Introduction

When walking to class or driving, I like to listen to my Spotify playlists. I often find myself guessing song titles as a mental game almost immediately after a song starts playing.

The idea of being able to play a game tailored to me was the driving force to build “What's That Song.”

While there are Alexa Skills that have users guess songs, these skills are not customizable. With “What's That Song,” users can play the game using their followed Spotify playlists as their song pack. This allows users to play with public playlists or their own personalized, custom playlists.

Along with being customizable, “What's That Song” is available in the following locales:

• US English: en-US
• UK English: en-GB
• German: de-DE

Additionally, “What's That Song” is also playable with 1 to 4 players with the use of Echo Buttons. It is also prepared with the Alexa Presentation Language (APL), enabling the skill to have nice visuals for screened devices, such as the Echo Show or Echo Spot.

NOTE: While the skill is prepared with APL, the live version of my skill does not have it enabled. Currently, the live version of the skill uses the Display Interface, while the APL version is awaiting certification.

How does my project work?

My project has 3 parts. As we go through each part, I will describe the part's processes and will give you a walk-through on how to construct each part. Alternatively, you can enable my published skill for use with your Alexa enabled device to play "What's that Song?"

Let's begin!

Part 1: Spotify Setup

In order to be able to read the user's playlists, we need to be able to access their account. We will achieve this through skill Account Linking and allow the user to log into Spotify using Spotify's OAUTH login. This will give our skill an API token, allowing us to query the user's Spotify playlists.

1. Log into the Spotify Developer Console.

2. Click the "CREATE A CLIENT ID" button.

3. Fill out the form that pops up and click the "NEXT" button.

NOTE: Because this app will be an Alexa Skill, select "Voice - Other" under the "What are you building" section.

4. On the next page, click "NO", as were are not building a commercial integration.

5. On the final page, check all three (3) boxes and click the "SUBMIT" button.

6. After the form is submitted, you will be directed into the App page. You will need to copy the Client ID and Client Secret. Keep these values in a safe place, as we will be needing them later.

7. Click the green EDIT SETTINGS button.

8. After the popup appears, find the redirect URI section.

9. Add the following URIs:

• https://layla.amazon.com/api/skill/link/MLRELFDJMUDDH
• https://pitangui.amazon.com/api/skill/link/MLRELFDJMUDDH
• https://alexa.amazon.co.jp/api/skill/link/MLRELFDJMUDDH

10. Click the green SAVE button in the bottom left of the popup.

Awesome! We configured Spotify! Next, we need to configure our S3 bucket before we can start building our skill!

Part 2: S3 and Lambda Configuration

Before we create the skill, we need to create a S3 bucket and create credentials in IAM to allow access to these services from the lambda function.

Part 2.1 - S3 Bucket Configuration

1. Sign into the S3 Console.

2. Click the blue Create Bucket button

3. In the popup, enter a name for your bucket, then click the white Create button in the bottom left of the popup.

4. When the popup closes, click on the name of the bucket.

5. In the navigation bar at the top, click on Permissions, then click the edit button to edit the public access settings for this bucket.

6. Uncheck all 4 fields, then save and follow the prompts in the popup.

7. Next, click Access Control List in the sub-navigation.

8. Click Everyone under Public Access, check the following in the popup, and click the blue Save button.

• List objects
• Read bucket permissions

The Access Control List in the sub-navigation should now look like the following.

9. Now, click CORS configuration in the sub-navigation and paste the following code in the editor:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <MaxAgeSeconds>3000</MaxAgeSeconds>
   <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

10. Click the blue Save button to save your changes.

Your bucket is now configured, but we still have to set up a user to write to the bucket.

Part 2.2 - IAM User Configuration for S3

1. Navigate to the IAM Console.

2. Click on the Users tab in the left navigation.

3. Near the top of the page, click on the blue Add User button.

4. Follow the slideshow below to create the user:

5. On the last step, your user credentials will be displayed. Make note of the Access key ID and the Secret access key. I highly suggest downloading the .csv file, as it contains these keys and you will not be able to see the secret key again.

6. Click the Close button in the bottom right of the page.

You now have your S3 user set up, which means that we can add objects to our bucket with the credentials. The objects we will add will be 30 second song previews that have been converted to play through the audio SSML tag.

Part 2.3 - IAM User Configuration for Lambda

NOTE: This is only needed if you do not want to use the ASK CLI to create your skill.

1. Click on the Roles tab in the left navigation.

2. Near the top of the page, click on the blue Create Role button.

3. Follow the slideshow below to create the role:

4. After you click create, you will be brought back to you roles you should see a green confirmation message.

Now our lambda function can use this role to save user data in DynamoDB and write logs to CloudWatch.

Part 3: Alexa Skill

For the Alexa Skill, there are two paths you can take to create the skill, either through the developer console, or using the ASK CLI. I will go through both paths, so you can choose which one you would rather follow.

Part 3.1 - Skill Creation with ASK CLI

1. Follow the ASK CLI Quick Start through Step 3 and come back here.

2. Create a new folder anywhere on your computer and open it in VS Code.

3. In VS Code open a new terminal by going to Terminal->New Terminal.

4. In the new terminal, clone my repository with the following:

git clone https://github.com/AustinMathuw/WhatsThatSong.git

5. Once cloned, navigate to the following file:

lambda/config/settings.js

This file stores our settings and key information for the skill.

6. On line 23, change the value of APL_ENABLED to true if you intend on on using APL. If you set this to true, you will need to enable the Interface via the developer console. See step 8 in Part 3.2.

NOTE: While the skill is prepared with APL, the live version of my skill does not have it enabled. Currently, the live version of the skill uses the Display Interface, while the APL version is awaiting certification.

6. On line 25, add your S3_KEYID and S3_SECRET you made note of in Part 2. Then, change S3_BUCKET to the bucket you created earlier.

7. Save the settings.js file, go back to your terminal and type:

cd WhatsThatSong/
ask deploy

8. The command, ask deploy, will create the skill in you developer console and it will also configure and create your lambda function.

9. To set up Account Linking, go to start from step 31 in Part 3.2.

Part 3.2 - Skill Creation with ASK Developer Console

1. Sign into the Alexa Skills Kit Developer Console.

2. Click the blue Create Skill button.

3. On the next page, enter a name for your skill, keep English as the default language, make sure the Custom model is selected, and click the blue Create Skill button.

4. Make sure the Start from Scratch template is selected and click the blue Choose button.

The following page displayed is the Build page for your Alexa Skill. Here we will configure the following:

• Invocation Name
• Intents
• Slots
• Interfaces
• Lambda Endpoint
• Account Linking

5. Instead of individually configuring all of our intents and slots, we will use the JSON editor. Click on JSON Editor in the left navigation panel.

6. Copy and paste the JSON here and paste it into the JSON Editor.

7. Click the blue Save Model button above the JSON Editor to save the model. Once saved, you should see a green notification in the bottom right of your browser letting you know the model was saved successfully.

8. Under the JSON Editor option in the left navigation bar, you will see a option called Interfaces. Click on it and enable the following options:

• Display Interface
• Both Alexa Gadget options (Gadget Controller, Game Engine)
• (Optional) Alexa Presentation Language (APL)

NOTE: While the skill is prepared with APL, the live version of my skill does not have it enabled. Currently, the live version of the skill uses the Display Interface, while the APL version is awaiting certification.

9. Click the blue Build Model button above the JSON Editor to build the model. You should see a blue notification in the same place as the saved notification letting you know that the build has started. Once built, you should see another green notification informing you know the model was built successfully.

9. Add a new tab in your browser and navigate to the Lambda Developer Console.

10. Click the orange Create Function button.

11. On the next page, give your skill a name and choose the existing role you created in step 2.3.

12. Click the orange Create function button in the bottom right of the page.

13. On the next page, find the Alexa Skills Kit trigger and click on it. It will say configuration needed.

14. Click on the Alexa Skills Kit trigger and scroll down. Then, go back to you Alexa Developer Console and go to the Endpoint option in the left navigation bar.

15. Copy the Skill ID, paste it in your Lambda function and click the Add button.

16. Scroll up and Save your Lambda function.

17. Copy your Lambda function's ARN and paste it in the endpoint section of the Alexa Developer Console.

18. Save the Alexa Skill endpoint by clicking the Save Endpoints button in the top left of the page.

19. Create a new folder anywhere on your computer and open it in VS Code.

20. In VS Code open a new terminal by going to Terminal->New Terminal.

21. In the new terminal, clone my repository with the following:

git clone https://github.com/AustinMathuw/WhatsThatSong.git

22. Once cloned, navigate to the following file:

lambda/custom/config/settings.js

This file stores our settings and key information for the skill.

23. On line 23, change the value of APL_ENABLED to true if you intend on on using APL. If you set this to true, you will need to enable the Interface via the developer console. See step 8 in Part 3.2.

NOTE: While the skill is prepared with APL, the live version of my skill does not have it enabled. Currently, the live version of the skill uses the Display Interface, while the APL version is awaiting certification.

24. On line 25, add your S3_KEYID and S3_SECRET you made note of in Part 2. Then, change S3_BUCKET to the bucket you created earlier.

25. Save the settings.js file, go back to your terminal and type:

cd WhatsThatSong/lambda/custom/
npm install

NOTE: You need to install Node.JS for npm to work.

26. In a file explorer, navigate to your project directory and go to lambda/custom. Highlight everything and send it all to a .zip folder.

NOTE: If you want to edit the code in Lambda, you will need to delete the aws-sdk folder under the node_modules folder.

27. In Lambda, click on the name of your function.

28. Scroll to the Function Code section.

29. Click Upload and find your .zip folder.

30. Click save in the upper right of the page.

31. Go back into the Alexa Developer Console and select the ACCOUNT LINKING option in the left navigation.

32. Fill the page like the following slideshow:

NOTE: The Client ID and Secret are those you made note of when setting up Spotify.

33. Click the Save button at the top right of the page, then click CUSTOM in the left navigation bar.

34. Click back on the JSON Editor option, then Save and Build the skill once more.

After you see the notifications, with no errors, you are all done and ready to test the skill!

Part 4: Testing

Wow! I'm glad you are still around! It's time for testing!

1. In your browser, navigate to the Alexa Skills Store.

2. In the top right of the page, click the Your Skills button.

3. Click the DEV SKILLS option in the top navigation bar.

4. In the top right of the page, click the Settings button.

5. Click the Link Account link.

6. Follow the Spotify Login prompts that follow:

7. After the successful account linking flow, go back to the your skill in the Alexa Developer Console.

8. Then go to the Test tab in the top navigation bar. Make sure testing is enabled and try launching your skill with "Alexa, open song trivia"

Additional Information

My project is not endorsed, or sponsored, by Spotify AB.

You can get the code from my GitHub.