Video: 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.

Learn about the different types of JavaScript events available to use in your applications, including traditional events like mouse, form, and window events, plus events that allow you to manage the DOM and HTML5 events that deal with media. Author Ray Villalobos shows how to propagate and register events during the capturing and bubbling phases, cancel an event or default behavior, and respond to clicks, mouse-overs, right-clicks, following the mouse, and loading images. Plus, Ray demos an audio jukebox project and a drag-and-drop game that shows JavaScript desktop and touch events in action.

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 playa song after a song has already been playing.So if we play this song right here,(SOUND)and try to play another song, you cansee 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 atwhether or not that song is the sameas 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 clickedon, is the same as the song that's playing, is by analyzing those two.

There are completely different places in the dump, sowe going to have to find a way of accuratelylooking for them.So, let's go back into our JavaScript and most of thestuff that we gotta do is going to happen right around here.And what we need to do is test to see if the song names,so right now, the song name has the name of the song that's currently playing.So, if that equals and I have to use a triple equal here.Two, look for the song that's playing.Remember, the song playing tries to look forany item on the DOM with an ID of player, which is our audio file.

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 onwith 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, sowe 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 ona 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 createthe audio element, it's already there.All we have to do is start playing the new song.So we can do that by saying songplaying.src, and set that to the song name.So, what does that mean?For setting the source attribute of theaudio element that is already on screen, alreadyplaying a song, and we're going to switch itto the URL provided by the datasource attribute.

And whateversong we just clicked on, so remember that ison 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'tmean 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 ona 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'sgetting 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 notreally 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 documentfor 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'veclicked on previously that has an ID of playing.

So if we look for it by using query selector andthen look for any song or any element that has an ID.Of playing then we could just set its ID to nothing, so what thatwill do is that will at least reset the song that use to beplaying, 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 asplaying 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 backhere 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 playingthis really now that I think about it shouldn'tbe 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 totest to see whether or not.

The audio players source and the current song name are thesame 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 anythingwith 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 anID of playing, and if there is, then we'll do all thisright 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 elementthat 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 workand how they can help your application be a lot better.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.