Control Audio Playback With Your AI-Powered Assistant | by Joseph Nma | Sep, 2022

0
13

Learn how to press “pause” with the Houndify API

image by author

Welcome back to the third part of this series! First, we set up our initial application. Next, in the last article, we got the client to play music.

And after today, we’ll be able to ask the assistant to “pause the music” or “play the last song.”

Below is a demo of what we’ll build:

If you didn’t read the last article in the series, I’d recommend following that first.

But if you prefer to skip ahead, you can find the starter code here.

To make this feature, we’ll need another domain.

1*1vkK0iYDsrj9cLaI7Vplyw

Enable and click Save Changes in the top right. This domain will enable the commands for playback control.

First, create a new file in the src/handlers folder. Name it MusicPlayerCommand.ts. This file will contain a function that receives the data for the command.

Add the following code to the top of the file:

SUCCESS_RESULT and FAILED_RESULT define locations for new results that contain suitable follow-up responses.

VOLUME_DELTA is the percentage of volume we’ll raise or lower by when needed.

Now in the handlePlayerCommand function, we use an object from Howler.js to control the music. But first, we need to check the CommandType from the result’s data.

Feel free to copy-paste this one.

And don’t forget to add our new file to the handlers array in index.ts.

const COMMANDS = ["MusicCommand", "MusicPlayerCommand"];

If you read the last article, you should know that there is no named export music in playSound.ts. It should be a reference to the Howl object created when playing audio.

Also, we should only update it when the audio played is a song, not any feedback sounds.

Open up the file and replace its contents with the following code:

But also, when we play a song with play sound, we’ll need to set the type to “music.”

We also need to store the URL for the current song in case the user wants to play it again. For that, we can use localStorage.

Open up MusicCommand.ts and replace the line where we play the song with this:

playSound(audioURL,  format: "webm" , "music");
localStorage.setItem("lastSong", audioURL);

And that’s everything! We used Howler.js to control the music and localStorage to store the last played song. Like before, you can find the source code for this article here if you wish.

Next time in this series, we’ll perform music recognition so that we can ask, “What’s that song?”. Enjoy!

Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here