Our website will be down for scheduled maintenance on Thursday, September 18, at 11 p.m. Pacific Time and should be back up by Midnight. We apologize for any inconvenience.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Starting a new song

From: JavaScript: Events

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.

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.

There are completely different places in the dump, so we going to have to find a way of accurately looking for them. So, let's go back into our JavaScript and most of the stuff 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 for any 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 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.

Show transcript

This video is part of

Image for JavaScript: Events
JavaScript: Events

27 video lessons · 6993 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

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.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed JavaScript: Events.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

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

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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:

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:

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

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.