Starting a new song
Video: Starting a new songSo our media jukebox is working pretty well, but we still have a couple of problems. Especially they happen when you try to play a song after a song has already been playing. So if we play this song right here, (SOUND) and try to play another song, you can see that this one looks like it's still playing. And now this one appears to be paused. (SOUND) Things aren't just working the way that we want them to. Let's go ahead and refresh this. And I'm going to show you how to fix that. So, the problem is, we need to find the song that's playing and take a look at whether or not that song is the same as the song that we're going to click on next.
- Next steps
Viewers: in countries Watching now:
- Understanding event registration and propagation
- Analyzing event properties
- Creating and removing DOM elements with events
- Removing an event
- Canceling and preventing default events
- Playing media events
- Handling media pauses
- Dragging and dropping
- Adding touch events
Starting a new song
So our media jukebox is working pretty well, but we still have a couple of problems. Especially they happen when you try to play a song after a song has already been playing. So if we play this song right here, (SOUND) and try to play another song, you can see that this one looks like it's still playing. And now this one appears to be paused. (SOUND) Things aren't just working the way that we want them to. Let's go ahead and refresh this. And I'm going to show you how to fix that. So, the problem is, we need to find the song that's playing and take a look at whether or not that song is the same as the song that we're going to click on next.
So if you remember, when we click on a song, so let's click on this one. (MUSIC) So the audio player appears, and that song has an ID that is playing. The audio that's playing also has a source attribute. And if you look at the list items they also have a source attribute. So, the way we can tell whether or not the song were clicked on, is the same as the song that's playing, is by analyzing those two.
So we can say, song playing.get attribute. And we'll look for the source attribute. So we're comparing the two source attributes. The one in the element that we've clicked on with the one that's in the song that's currently playing. So if that's happening then we need to do something, otherwise we need to do something else. And what we need to do if these two things are matching is pause the song. We alaready have the code for that right here, so we can just go ahead and paste that in here.
And we'll go ahead and push it in so that it looks nice. And now we need to do something if we click on a song that different than the one that is currently playing. So what do we want to do there? Well we don't really have to create the audio element, it's already there. All we have to do is start playing the new song. So we can do that by saying song playing.src, and set that to the song name. So, what does that mean? For setting the source attribute of the audio element that is already on screen, already playing a song, and we're going to switch it to the URL provided by the datasource attribute.
And whatever song we just clicked on, so remember that is on this variable song name that we get right here. We say get the data source attribute of the element we just clicked on. So we're changing the location of the audio player to be at this position. Now just because we change the source doesn't mean that the song is going to play. So we need to say. Song playing and then execute the play command. Okay so let's see how that works let's go ahead and save this and switch over here. I'm going to refresh and I'm going to click on a song and then click on another song.
(MUSIC) So that's actually working well, but it's not updating our UI. Let's take a look at that again. I'll play this song and at some point I'll stop it. I'll play this song because it's the shortest song. (MUSIC). So you're probably either loving this song or it's getting really annoying that we're playing it so much.
But, it's the shortest one, so that's the one I'm clicking on. Okay, so, it's working pretty well, but our UY is not really updating, so we need to take care of that next. Song playing dot play and this is pretty simple. All we gotta do is, look for in the document for the song that has the ID of playing right now. So that would be, remember when we create the element, we set the ID of the song to playing. So there is some song out there that we've clicked on previously that has an ID of playing.
So if we look for it by using query selector and then look for any song or any element that has an ID. Of playing then we could just set its ID to nothing, so what that will do is that will at least reset the song that use to be playing, so lets see refresh will play this one and I will play this one. (MUSIC) At least that reset both of them even though its not showing this one as playing right now so the second song I click on Doesn't show up as playing.
So let's go back and we need to add one mroe line here. So all we gotta do is now set the target of whatever I currently clicked on. Set the ID to playing. So, I'm going to save that, and I'll come back here and just test out my player again so. (MUSIC) I think it's working pretty good. There is still a problem and it's really hard to tell.
(MUSIC) The problem happens when I have a paused song and I try to play something else. (MUSIC) So, that should be updating my interface, but it isn't. So I need to add a little bit more code that's going to clean that up. I know this a lot of if statement, but the problem is that if the song is playing this really now that I think about it shouldn't be song playing this really should be audio player. So I am going to change that to audio player, right so if the audio player exists then its going to test to see whether or not.
The audio players source and the current song name are the same but it's, it's going to execute this otherwise it's going to do this. So this is going to happen when the songs don't match. And when they don't match, right now, it's assuming that the song is currently playing. But if we have the song paused, there's no song that's going to be playing. In other words, there's not going to be anything with an ID of playing. There will be an item in the list with an ID of paused. So that's the problem, it's never getting here.
So we need to do another if statement, and what we'll do is. We'll do an if statement here. All we need to do is update the list items. So we'll check to see if there is something with an ID of playing, and if there is, then we'll do all this right here. Otherwise it means there's something with an ID of paused. And we shall do pretty much the same thing except that we'll change this to paused.
And we'll set the ID of the current so remember this is ID of the element that was currently playing before and this is ID of what is going next. So this is still OK. Actually, I can take this out of here and just put it outside here. So that it does it either way, because it doesn't really matter. So let's see if that works. Refresh, and I'll play a couple things and try to pause them. (MUSIC) So now our jukebox is working perfectly. So when working with advance.
You really sometimes have to do a lot of tiny adjustments here and there. It's really not that hard once you learn how events work and how they can help your application be a lot better.