- [Instructor] Let's work on making these individual songs
play using the audio API.
The audio API is pretty simple.
When you want to play a song with HTML,
all you need to do is, just like with an image,
you can include an audio element and also a location
of where the song is that you want to play.
Alternatively, you can also include controls,
which gives you this nice interface.
But we already have an interface
in our application and we need to create
this audio element dynamically through code.
So the way that we're going to do
that is in this handle play method.
We're going to make sure that there is an object
here called audioElement, so this is going
to be the placeholder for where we will play audio.
And the first time we click on one of our songs,
I want to go ahead and initialize that audio element.
So I'm going to start off by saying if this audioElement
is null, so if this is the first time, then I want you
to create an audioElement by using the new audio keyword,
and then passing along from our payload
the music URL that I want to use.
Let's make this bigger so we can see it better.
So this will set up the audio to be played,
and then I can execute a play method for this audio.
Now if this is not the first time that I'm playing audio,
I could just load a different URL, but in our interface,
I want to make sure that if an audio song is already played
and I click on Play, it's actually going to
pause the song instead of play a different song.
So I need to set up some if/then statements
to take care of all of the different options.
So first off, I'll say if the payload is the same
as the current song, so if this is the song
that I'm already playing,
then I'll do another if statement here.
I can say, check to see if the audioElement is paused.
So the audio API has a lot of different properties
that you can check for, and one of them is paused.
So we'll check to see if the song is currently paused,
and if it is, then we'll say go ahead and play the song,
because we would be clicking on a song
that is currently playing.
Right and you would want to pause that.
Otherwise, then we will pause the song.
So if this is the current song and we click on it,
and it's playing, then pause it, otherwise play it.
Cool, so if this is not the current song,
then I want to make sure that I play a different song,
which means that I have to change the URL
of the song that I want to play.
But I don't have to create a new audioElement, I could just
use the existing audioElement that I already have.
So let's do that.
So I'm going to change the source attribute,
just like I would change the source of an image.
I can just say change the source of the song
to whatever comes in from the payload,
which is when we click on the song,
just change the music URL to the new music URL.
And once again, then go ahead and play the song.
All right, super cool.
So then, just like before, we're going to set
the current song to whatever comes in from the payload.
And in addition to properties like paused in the audio API,
there are ways of creating methods looking for things
that happen as the songs are playing,
and one of those methods that we're interested in
is what happens when the song ends playing,
when it finishes playing.
So there's a method called ended, and just like we do
with other events, like click events in Java Script,
we're going to do a straight Java Script call
that says audioElement and then add an eventListener
and look for the ended event.
When that ended event happens, then I want you to execute
this function and we will just reset the song to null,
and we will also reset the audio element to null.
That clears out the song.
Let's go ahead and save this.
And let's see if any of these songs are playing.
So there's one of these song that is just 20 seconds long.
(music plays)
And if I click on it again, then it pauses.
If I click on another song,
then it'll start playing that song.
(music plays)
All right so that is working.
That's pretty cool.
So I've got this other little button right here
that allows me to delete one of these songs.
So let's go ahead and program that.
It's actually quite easy, and what we'll do
for that is create another method call here.
So handleDelete and this'll be a method
called handleDelete here.
So we'll need to, in addition to handle the play method,
we'll also need to code this handleDelete method.
It's going to execute just like the other one, requiring some
sort of payload that we're going to pass along to it.
And in this case, I'm going to use a library
that I imported earlier called lodash because it
has a fantastic method, so we'll do import_ from "lodash".
And this is going to give us a method called without.
So we will create a temporary variable called updatedArray
and we'll just say this is going to be equal
to without this songs payload.
So what this is doing is saying I want to create an array
where we are going to receive the current song,
the list of songs that we have, and return an array
that does not have the payload in it.
So it's going to create that temporary array from us,
and then all we have to do is modify songs
so that it uses that updated array.
And that's how we delete a song,
but clearly we need to make sure that this method
is emitted from inside our song list.
So in our song list, I have this icon up here called trash,
so let me go ahead and copy this emit,
'cause it's going to be pretty similar.
So right here in this trash icon,
I'm going to emit handleDelete and pass along
this current song that I am clicking on as the payload,
and now we can go ahead and delete any of these songs.
So don't worry, you can refresh the page
and you'll get all the songs back.
But it's pretty easy to manage your data
with regular Java Script and UJS,
and some additional libraries.
Now we'll be getting into importing the data
using different API methods in the next chapter.