Javascript Fun: Build a Music Player App! | Chris Dixon | Skillshare

Javascript Fun: Build a Music Player App!

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (56m)
    • 1. Introduction

      1:26
    • 2. Finding songs to use in our app

      1:35
    • 3. Creating the HTML structure

      6:56
    • 4. Adding controls and icons

      6:08
    • 5. Styling with CSS

      7:00
    • 6. Listing our songs using Javascript

      8:42
    • 7. Playing songs when clicked

      5:27
    • 8. Display currently playing song

      3:32
    • 9. Play and pause controls

      2:50
    • 10. The volume slider

      3:48
    • 11. Updating the progress bar

      7:01
    • 12. Thank you!

      0:58
    • 13. Follow me on Skillshare!

      0:23
18 students are watching this class

About This Class

Welcome to the Javascript fun series!

For web design or development, there is 3 must know technologies, HTML, CSS, and Javascript.

The main aim of the Javascript fun series is to take your knowledge of these 3 (only a little is required!), and put them into practice by building a series of educational, yet fun projects show you exactly how they work perfectly together. Working on projects and solving problems is a great way to learn.

The project we will build in this course will be a Javascript Music Player.

All the required tools are free to download, I will be using the following:

Visual Studio Code Text Editor: https://code.visualstudio.com

Chrome Web Browser: https://www.google.co.uk/chrome/browser

We begin by creating the user interface with HTML. The we apply styling using CSS.

Then we add Javascript, this is where the real magic happens!

You will learn things such as:

  • Creating HTML interfaces
  • Styling with CSS
  • Incorporating Javascript and linking external files
  • Variables
  • Const and let
  • ES6 Arrow Functions
  • Event handlers
  • Manipulating the DOM
  • Performing calculations and storing in variables
  • Javascript arrays
  • Looping through arrays
  • Using Javascript to create HTML elements (createElement, createTextNode & appendChild)
  • HTML5 Audio Player default and custom settings
  • How to create custom elements to control the audio element
  • Setting the audio source dynamically
  • Checking the readyState of the audio player
  • Getting the value of slider inputs
  • Calculating the value of the HTML progress element
  • Basic debugging
  • Including Fontawesome icons
  • And much more!

So if you are looking to move on and put your skills into practice using with real projects, take this course now!

Transcripts

1. Introduction: welcome to this Java script flown Siri's My Name is Chris, and I'm here to show you how to use hate email. CSS and JavaScript put them all together to build a phone on exciting projects. The project, which will build in this cause, is a music player. This music player is a great way to see how will come work for the only job was also hates more five audio elements to We begin by creating the user interface, using HTML to display the defaults audio player on a list of other songs. Well, then remove all the default controls provided by National or your elements begin to create our own Kristen version. After this, we'll move on to the audience the styling, using CSS to make it look a lot nicer. Then we can get to work bringing out project allies using JavaScript. This Apple have a list of songs which would click on to play when playing would consider currently playing song title at the very top. Along with this Custom Progress bar, which dates as a song place, we also quite the functionality for the controls to to allow us to pause, play Andi, even control of volume using this slider input. So thanks for the interest and let's get started 2. Finding songs to use in our app: before we can go ahead and build our application first. We need some all your files to work with to play inside of all player. So you may already have some MP three files already saved onto your computer, which you can go ahead and use if you don't. Don't worry, you can soon find some online, which we can use in our project. I want to use a website called Ben Sound, which develop about ben sound dot com. You will visit the site we can see at the top is a royalty free music section and were presented with a list of lots of difference music finals we can use. So I've used six different files in this project. Of course, feel free to go ahead and download as many. All this for you, as you prefer to download I need to do, is to select a song what you like. And then if we selected download button, just click this. Were they given to different options? We have a pro license, which has across to it, or we can go ahead and use the free Creative Commons license or we need to do to qualify for this is to provide a attribution link in our project just to say the music is from Bensel dot com, and then we're free to go ahead and use this as we wish. So select the song I click on download. So once you don't know did these MP three files I've just had in mind onto the desktop for now on in the next video, we'll go ahead and at the swell projects. 3. Creating the HTML structure: Okay, let's get started. We're creating our project by now. You should already have some audio files, which has the MP free extension saved on the desktop or summer convenience. To begin. I want to create a new folder on the desktop as the Project folder. Let's and they see music Hi from Player. If we open this hope, we can now out our songs inside the Songs folder. So inside the music player, let's create new folder cold songs with double click to open this up. We can then drug inside no MP three files. So can access. He's inside the project and close yourself. I want to use in visual studio code as the text editor for this project. So open up that or a text editor of your choice. And if we drag in the music player comes Welcome file. So make sure there's a clicked off the songs folder and then let's create the index dot html file alongside other songs folder. If using visual studio code to create the hate Schimmel structure, all we need to do is type Hatim Ill called five, and it heats up on. The basic structure is put in place followers using the Emmett Till here, the title I'm going to change to music player. And then if you open up, you will chrome. Then open up the index locational page. We're no good to go with adding some content. So the first thing I'm going to do is to create a national five audio element. This is done with the all of your time. So with the audio tanks just like that, we can give this some attributes such as and I d. So give us an idea of player so we can talk about these with the jobless script inside the player who needs on the source elements. This is the self closing time, so it doesn't have the opening and closing time. All we need to do instead is add some attributes, so that's are the source attribute again so we can use this with Charles script later on and then passing the source, which is a file path for any song which you want to play. So we have a song folder. That's what the song's file pumps, and then we can add any song of all choice. So let's say then sounds dance. The MP free. That's our mission. Remember, if you're files and name something else, if you using the old music glossy needs changes accordingly. So if we give this a safe and then go over Refresh Index page, we see that we don't see any audio player. This is because to get this to work, we need to earn a controls. Attributes. So controls equals controls. No reload. We see that defaults old your play on the screen. If we click way our music instantly place. We also have the timer. Have a Progress bar aunt. Also the volume. So this is how things look by default will create our own player in future videos. But now let's go back to the index page just after the source. We're going to aunt some text audio not supported. This is some form architects, which will display in the browser if for some reason audio element is not supported, the interest blows. All your elements were going to create a song list. I want to do this in a Level four heading with the title of my songs, then an old at least which is going to least although songs which we aren't to an array. Both. And now what is going to are these in using Plain hates tomorrow. So at all first list item and then we need to go through our list of songs. I need me to be typed out the same as the names inside Ball folder. So the 1st 1 was Ben Sounds Hyphen Club on You don't and be free, and then I'm sure it's copy this when Paste in number five times it was six list items, so the 2nd 1 is dance. The 3rd 1 is from key elements before phone is Happiness, it and Happy Rock. And then finally the launch. Give us save, refresh the browser and now have a song laced appeared on blow. Of course, you can click on any of these yet, but well on dysfunctionality later on. In this course, the final thing I want to do since we using Ben Sound music is the awesome contribution at the very bottom. So do this inside the P tying, so let's say music that it colon a normal as a link to the pain sound website. That's all the text is hate GTP escalon slash slash to believe to be true. Riedel and sound don't come just on this inside of the monk attacks and also out of hatred attributes with the same address. Something to. So, of course, if you're not using Venn sound if using the old music, you don't need to do this. I'm just doing this to give a contribution to the music offer to allow us to use his music free of charge in this cost. Give that save. And now you should see the text at the bottom on the Link Link, Mr Bent Sound. So this is our basic index dot html page. Of course, it will change from this course, and in the next video we'll begin to make it more custom by at another own controls and icons. 4. Adding controls and icons: we mentioned in the last video that we're going to start off with the default all your controls, which is the timer on also the play. But when we see others copier, which allows you to play also in this video, we're going to remove these defaults. All your player, by removing the controls, attribute this is a weapon, created our own custom controls and really see what happens in the background. We're going to the control nature using JavaScript, which will give us a little bit more practice off working with job script and hates him out . So remove the controls attributes, and then it will refresh. Will now see this is removed. We left with just e songs list. Also, we're going to remove the source attributes from the source elements again. This is going to be because when we get to the child script section, we're going to allow the user to click on one of these links at the bottom, and then we'll rearmed this source attribute with the link, which is being clicked again. This is going to be controlled with transcript. So with these now removed, it's time to create our own custom controls these controls are going to be created with some custom icons to to do this and going to go up to fonts. Awesome. So if we just do a Google search for on Awesome Five, which at the time recording is the latest version, so vote funds awesome dot com on all we need to do is go to get started. If you scroll down, I'm going to use the Cdn link, which is free to use. So copy this. If we go over to O index or hate. You know, let's place to seem to hate sexual Give us a now get to work on. Creating our custom controls I'm going to do is just blow the old your player. Let's create a give, which is a container. I will give us a I D off controls. Then, inside of here, we could start add some funds or some icons using me I elements. To get these to work, we need to give them some forms, awesome classes. So the 1st 1 is going to be f A R f A. R is for the regular buck groans. If you wanted a solid background, we could use F A s so if a, uh and then for the play icon we use f A hyphen play life in circle. Let's give that say, even check. This is a working okay, refresh. And there's a lot icon now sitting at the top, as we mentioned before, changes to F A s and reload now at the solid icon. But I must leave mine as f a r to make a little bit bigger. We can also add some extra classes, so f a Dash five x say That's refresh. And now the icon is five times as big wants to the same for the pause icon too. So that's just copy these elements. Do you see him This time? We just change play too, because and reload. We've now got oh, play, Impose Boom! Now let's create a slider for the volume. So let's aunts and Peter Thanks first, just with attacks on volume called on just afterwards. And then an input with the type or range God save re lows. And now we have a hate schimmel slide elements. Okay, so let's go ahead and give you small attributes. The I D all volume slider we use is in Java script in just a bit. I never consent the minimum Bonnie or zero. The maximum value of want This is because using the audio player the volume is set between zero mom. So whatever, just restricting the minimum amount in values was that he step to be zero points 01 and this doctor's controls how much the volume will go up and down. We teach that so things up. So now I just want to add two more icons going on a volume down icon on a valuable bike on , which is going to say it's even side off the slider. So let's under volume down. Icahn, Just before fuckin copy these icons is this one in. This one's going to be solid, so hungry. SARS F A s on, and it's called volume down. It's going to be default. Science will remove F A five X, they're moving Copy and paste is just after the imports, and this one is going to be volume book. Is that safe and reloads? Because these are in line elements. We see these on either side of the volume slider. Good. So now we have some custom. All your controls of course, they don't work yet because I haven't got to the child's fruit section. I will get to that in just a bit. But now we leave this video there and we'll move on to the next video. We'll make this look a lot nicer using CSS. 5. Styling with CSS: Welcome back. We're now have our we use interface in place. We have a song list and of custom controls in this video. We're going to go ahead and add some CSS styling, and it's the project. So let's begin by creating a CSS file inside the music player. Let's create file called styles Don't CSS. Before we had any styles, let's link this in the head section. So that is just after the title. So a lot of link The relationship is a style sheet on. It's in the same directory, something just at the final name. Off styles don't CSS. It's a bit more spacer, so over to the style sheet we're going to begin right at the very start with the body section, the body section is going to have the backgrounds on the background is going to be a radial Grady int. So inside a radio grade Ian's we're going to add it to colors. So whereas a linear Grady in plans from one color to another in a straight line, a radial Grady int will blend from the center awards the very edge. Therefore, we need to add two different color valuables to blend between so first ones aren't a hex Molly off 96 96 Peaceful, separate by coconut, Another hex family or for five for five e. If we say that and then reload the contract, we can now see what have a radio backgrounds. It is repeated below this line as well, but just ignore that for now. Who fix assume So this is a political in the centre on it blends out to oligarchical. Continue with the body going to add a phone sized property. Just make a text a little bit bigger. So 1.2 m's will restrict the width of the body to be 50%. I never consented rate with margin off 20 pixels on the top and bottom on all toe on the left and right, which keeps it in the center off the page. Okay, lets on some party in inside of the body section two off 20 pixels. Align the tax in the sensor of the body, which is now pushing all the content right into the middle. Okay, so now let's set the minimum height of the body to be 50. The h this will make sure the content is a minimum of 50% off the pupil height. The viewpoint is the visible area of the screen, such as the browser. This will make sure that it takes about least half of the height. Okay, now let's move on to styling at the song list area. To start this, we're going to earn a div inside the index or hate, you know. So surrounding all of the order list that's creative section and then also on the list inside of this Dave section. So the peso in and then we can arms a idea to this day of section off song list. So this idea will allow us to target the section with CSS on also jobless we have later on in the course. So that's what they didn't know. So some next and then we can give this a different background color that we have for the rest of the body by sitting back around property to be light sion, a border radius off 10 pixels. He was a nice rounded corners on if we also move the text or with the left inside. So what's next to the numbers? We've been? Text Lyman's Oh, left refresh. Okay, so that's looking better. Bullets looking a bit bunched up. So let's separate these by targeting the list items. Ah, not in some party in off 15 pixels. Okay, good. Now we for hover over each list item. We all sort this cursor to change to be a pointer. So using knows you can click on one of the songs to them play it's open out some suitable processes to the list item. So L I hope, let's change the cursor. Two d A. Points are fresh and now that changes from the hospital. One of the songs. We also want to do the same when we hover over the play impossible onto so we can change the pseudo selector to be ally hover on. Also spg hover on this SPG sounds for scalable vector graphic. And this is the image type which is used or Fonterra's Michaels. So let's try this refresh. And now we get this hon point over the play and pause bond too. Now, on to some style in for the control section in the index or hate smell. We give this section a idea of controls so we can target this in the CSS. That's on the hush controls. I'm looking begin by art in a border. One pixel, Let's say like gray on a soldered line. Right? Those to say, then reload. Let's give aboard radio So much is this song. The Section two aboard. Radios on gain the same value of 10 pixels a pack. Wrong color, all lights, Iong. Just a much. Also some putting to give a bit Most basin Let's try and 1.5 EMS refresh. That's looking a lot better now on. If we change the color of these icons to be a little bit lighter, I should look nice to. So it's time to the SPG for the phones. Awesome icons. I've been easily set Pickler to be anything want. I want to use light slate. Great good settle styling for this up now complete. And in the next video, we'll move on to add in some job script 6. Listing our songs using Javascript: Welcome back in this video, we're going to replace our hard coded list of songs with day jobs group version. So we're going to earn our songs into a job script array and then loop through all the songs and construct a new agent elements. So let's begin by creating I was script file. So down at the very bottom off the index page, it's got a link for fish tanks inside the open. Inside, we can ask the script sauce, so having created the filing just yet, but we'll do that after this. So let's link the source to be script doctor. Yes, the same coconuts and new file with the same name. And then we can go ahead and create a constant. So this is an S six constant, because the value isn't gonna be changing. So this is similar to use in a bar. But if we're not resigning, the value we can use a year six constant. So this is going to be called songs, and this is going to be an array or all those songs which we have never can create an array off our songs. So the 1st 1 it's copy his name I'm on the list. Well, Casey said, separated by a comma that's pace in again. But this time we'll changes to our 2nd 1 which is Dunn's. So I'm be free Another comma on its own, Quotations from pace in and change This one too old for her name basis in on this almost happiness E for fighting to inside the quotations was happy rock and a comma Quotations and paste in the 61 which is the lounge Don't keep us safe So no one have our song Save the insiders Judge with the rain I'm going to go over to the index page removed its order list . It will be only bucking later. We're using job script. Okay, so let's just have a empty song list. If here, walk over to the script, I'm concentrate a function which is going to create our song list. I'm gonna give this a another constant name off create So, list, I want to set this to be equal to a E. S. Six are all function, which is the parentheses and then the Fatah role, which is an equal sign, integrated and symbol. Well, then pass in all function cold inside the current braces. So this is the same as a normal function which looks like this. So function create song list. So this is the same as that. If words pass any arguments inside of here, it should be exactly the same. But in the Essex would just pass them inside like that. We don't need any arguments or parameters. Well, the song list. So just keep out of this. So if you've not created any hate mail elements using childhood before we use create elements Onda pen child to construct these. So first, all that's great. Our older list, which just like before, is going to be a rapper. It's always in a constant call list on this is going to be equal to documents thought, create element. And then we pass in the name of the elements, which we want to create. Okay, it's a order list. So now we've recreated I will also list what can now lube through the songs of right using a follow up. So inside the rockets instead of are going to use the let keyword, which allows them on YouTube a re signed, just like available. So I would say I is equal to zero. I is less on the songs, Len songs being able to rail here. And then I was close inside the for loop. So we know looking through all the songs inside this array on what do you want to do? You eat song Wolf. Each song wants create a new least item. So just like doing a book were created. I will all dismissed. We're going to do something similar. But this time we're going to create the list item rather than the list. Said this to be documents thought creates elements just like we're seeing here. But this time we're going to pass in a ally least item. So this is creating a new list item for each value in the songs of Right? So no, have these list items would want to pass in the text inside of it. And the text is going to be the name of the song, which is exactly the same. Was work hard inside the index page when we have these hard coded. So when they were going to say item, which is a list item, I never gone to a pens a child. I'm going to pass in some text. So it was a document thought. Create text node and then we cross in songs. Hi. So what we're doing here is we're creating a new list item. Each time we lived through a song then for each item would have pending a child. The child is just simply the text off each This item which will through love songs, I So now we have each list item wants at this to our old list above. I could do this by Thai with a list which is a little in order list here and then 10. Child on the child we want to upend is each individual item that would just create it for each song. So it gives us safe. Then outside this loop, we need to return its newly constructed list. So it's a return list. This includes the list items we added using a pen child. So they saw a newly constructed list which returner, and then we move outside dysfunction. So now this function is creating all the list with the list items inside each one of our songs. Well, no need to Grub is empty. So honest, which would have just here and place it inside. So first that use documents thought gets element by i d Getting on by i d and I d want to grab is the psalmist. So now we grabbed it We want to upend child the Children want aren't to The song list is a value which returns by create song dysfunction to pass in the function off Great some list and then give that save So hopefully fingers crossed If everything works OK there we can now go over to the browser and refresh and we still see our list of songs even though inside the index page we don't have any order this now inside those honest If we go into the developer tools by right clicking on inspect and it opens 40 down to the deal with the ideas so missed we'll now see we have inserted a older list Onda list item with each individual song name This is all being created without create song dysfunction inside I was grateful. So with this now all in place we can't click on the individual item to play yet Well, this is something which will look out in the next video 7. Playing songs when clicked: Welcome back in the last video, we created our song list as an order list on Display This on the screen. Now we want to be able to click on any of the songs on at this to the audio player so can and go ahead and play it using these controls. So the first thing I want to do is to create a event handler to listen for any clicks to any of these songs. So let's go ahead and do this. No, at the bottom of the script, let's create a event listener for our song list. So some list thought on Click and this is going to be a ES six final function, then inside the premise, even going to pass in a variable name off E. This is going to be for the data, which is passed as the event. If one see what information is passed this part of the event we could do a consul. Look the Council on the Value of E that if we go to the Broza Open, the developer tools click on the council town and then it's click all the songs. We can see all the information, which is passed us part of this event. If we click on the drop down our role, the information were particularly interested in is the target. So we scroll down on look the target. We see the target is each individual list item. So this is the information once because we want to grab the list item on Also select the in a text, which is the name of the song. Well, I'm going to use the name of this song popular the source of the audio player each time a song is clicked on. So let's go back over to our event listener ons Comment about this so installed this value inside a constant. So I'm gonna call this clicked item and said this to be e thought target. So each time in this item is clicked on will install this in a constant called click item. If we go back over to the index dot html page earlier on, we heard a source attributes inside here, which was the source of the audio file that would want to play So we can't hard called this in like we don't earlier because one charms group to take over and apply a different sauce each time a song this little. So instead we're going to grab the source of a mince pie. It's i d. So just below here, let's it or constant or source and said this to documents darts. Guess element by I d. The idea. Want to grab this idea of Saul's? Then we need set thesaurus attribute So sauce, hot sauce and this is going to be equal to a string off our song name. So all of our songs stored in the songs folder So let's start with that were songs folder and then forward slash And then we need to answer the name off our song that want to play onto the end of this. We don't have a constant called clicked item, which is the list item when clicked All let's start with clicked item Then we want to select this clicked items in a text which is the name of the song just to check. This is working Okay, we can do a consul. Look, I welcome council like this clicked item dot in a text Just a second getting the right result Buck, if we give that save and then reload, go to the console They take on an item when I will see that the attacks is being displayed as the name of each song. So this is working Fine. So this will be the name of the song I did to the song stream. So this is going to be a complete filed half which you can add as a source attribute for the source element. You see you. So now this looks like it's all working. We need to do a couple of things. But he's called Player. Don't load. This will begin to load the selected audio into the player. Actually play it. We need to call player don't play This will play the song immediately after its clicked on . So give that save head over to the browser and then refresh okay on its own. Thank you. That seems a fine looking okay. Go to refresh to stop that so good snow Our songs are all playing If word is to remove player, don't play from here and just load the order when it's clicked on it wouldn't instant play . We need to use the play button which we're going to wire up later on. So for now Let's leave that as on commented. So we'll play straight away and next we'll take a look at displaying the name off the current song just above the controls. 8. Display currently playing song: Okay, so now all songs alone. It's a music player on plane. We're now going to move on to displaying the currently playing song. So at the very top off the applicant's house, a text saying current playing. And then after this, we're going to have the name of the song, which is currently playing. This is also going to change each time a different song is clicked on. So let's get to work over in the index occupational and start on the hate criminal who used to work going to do this between the audio on the controls. So let's start by idea in our spawn tax. So we have two options. You can either type in the text off really playing just like that. But we also want to remove these each time a song isn't playing. So instead of this I'm going to Are they I d. On at the same using JavaScript. So that's at an I D called currently clean. So just like that, they have to raise a second set off spam talks with an I D equal to Kuensel. Funchal. Rough seas with the M thanks. So in the end, tags and then paces back inside. Now we can go over to our scripts Doctor s file. I'll begin to work with these two new elements. So we're going to do this in side of this click Listener. This is a section with listens for any song clicks. So it makes sense to populate the name of the song each time this function is triggered. Just leave these consul logs for now, just like that. So after we've clicked on an item will set the song sauce We can slept the documents and they get element by i d So let's start by selecting the so which has the idea of corn some so over in the script Canal descent on what you want to do We'll want to display the text off the currently plain song So the text is going to be equal to We already have the song names selected with clicked item daughter in a text So we can understand that Do that save now If we refresh and click on a song We now see the name of the song of Europe top So all we need to do now is on the text off currently playing the added a separate spawn time. You see her with the idea of currently playing So so we can also do the same way that this would target the documents and then get Salomon's by I. D Pacing is currently playing some I. D. I'm looking do exactly the same by sending in a text equal to a string off. Currently, Plane Give that save. Now let's try this in the browser refresh Click on a Song Now How Corden playing and then the name of the song. So we're making good progress with our music play application. Now, in the next video, we're going to move on to I didn't all play enforce controls. 9. Play and pause controls: we're now going to take a look at wire up these play and pause bones currently want to click on any of the songs on our music list you automatically playing, but we do want to get these plain pause buttons. Why look so have more control over starting and stopping the music? So let's go over to the index occupational page to begin. If you look for these controls, Dave, we can earn a click listener to the play and pause icons. So inside the eye elements right At the very end, we can add a on click. Listener wants to trick a function calls. Play all your and it's execute this with the parentheses. We'll do the same week. Paul's too well aren't a on click listener this time. We'll set this to be pause. All of you, Thank you. That safe back over in the script. Balkan. Ours. I will play important functions. So let's do this right at the bomb off the script. First we can on Let's play audio, just like before. We're going to use Essex Sorrow functions, so play audio. So inside here we could simply do player don't play, and this will play the audio when the blood is clicked. But one thing want to do before this is going to cut this out. It wants only play. If the audio is fully loaded, we can use this with a property provided to us called very state. The Ready State property returns the current state off the audio. Therefore, if it's true, our only your was loaded on. Were you ready to call play? So this makes sense down this into a if statements. So we'll say if player door ready states. So if the already was ready, then we can call player. Don't play. The blue is we can ask our post function so I have a constant Oh, it was all you remember these names of the ones which ended. I only clicked listeners inside the icons, so the arrow function honestly hugeness. Typical player. No pause and give that save. Now let's go to the browser Reload. That's select a song you could pause The song stops on play also works too good. Settle, play and pause, Bones, all my working So I'll see you in the next video 10. The volume slider: in the last few years, we gotta go play and pause buttons working The final part of our controls, which will need to look is this volume slider. If we go over to our index dot html, were added it the slider with import type of range. We also gave a I D or volume slider so I can use this idea to not target it in the JavaScript To get this volume working, Let's go back over to a script on right down on the very bottom of the script, we set up a constant, which is going to hold our slider. Let's call it a slider equals documents. Thoughts get element by I. D. On i. D was volume slider. Now for this slide, we could also add a event listener. So what's a slider dot on input, which you're going to trigger a function. So inside his function body each time there's any import to the slider. We want to grab this slider on. Set the play volume. First, let's do a consul log and just check for the value off the events we passed to. It actually contains, So give that safe head over to the projects and reload if you go to you console. And now if we move, the cider could see each time is any import. It figured a new event that's open of any of these events and check what the target is. So check the veins, Doc Target inside here the property were interested. He's the value. So if we scroll down to the value, it's quite a lot of data here. So need school quite far, though, so here we are, so the value is 0.5. So remember earlier moment created the hate smell. Inside the slider, we added a minimum of maximum of one. We can then go ahead and set the player volume to be equal to the value of the slider. So let's just close the console and back over to a script Really come. So look the next one set of a constant or volume and said this to be e top targets. No value, which is the value was seen before, which is emitted each time the slider has changed. So now let's do a number. Council log Council log is for you on See what we get. We're fresh back over to the console. So now if you move, the slider we see each time is any form of inputs. The value is printed to the console. So when this is fun, it's the left will have a value of zero on fullest right will have a value off one. So now looking uses to set the whole new of overall your player. How we can set this with player don't fall you is equal to this new volume volume, so give that save. That's test is in the browser. So let's play some. Okay, lets try moving the volume that's allows it goes. If you move it right down, there's no no audio toe greats. That's all the controls now finished for this video. Under the next video, we'll finish things off without in a progress bar. 11. Updating the progress bar: Welcome back in this final video, we're going to create a progress bar, which is going to update as our music is playing for this one. It's are they hate more elements in the index dot HMO, So let's look for the currently playing song on just blue. It's going to add a HTML Progress bar inside Here goes out and I d all progress. So work with it in John Schmidt. Then we'll set the initial value to be zero on. Also said the maximum value to be 100 because we'll be updating this as a percentage. So when the value to be up to 100 So let's give that save and then refresh. So before we go any further, I'm just going to our some styles and quickly for this progress. But so down at the very bottom that started the Rubies from a progress elements. We'll make it a little bit wider by setting a wit to be 80% on. Also, it's not some margin off 10 pixels to give it a little space in. Okay, that looks a little nice, you know, back over to the index page, but now going to go up to the all your player and as a attribute off on time updates on time Update is an event which rooms when the position of the audio has changed. I e when its tell you. So each time the position has changed Want to run a function? I'm going to pray function called update progress And then once it's created, we can now go over to our script. I began to work with dysfunction Down at the very bottom will create a function. So Combs we'll take progress. I said this to a unknown function. So the first England's do We set up a constant call progress MMA and said this to be documents does get element by i d. So we want to know of this progress bar that we've created with this idea Ideal progress. Thank you, I say. Then looking at the value. So the prove a spot. I don't on you. I almost said this equal to a calculation So player the current time. So this is a time which the play is currently at divided by player calculation which is the length of the song to turn it into a percentage when he too rough this inside of brackets and then multiply by valuable 100. So let's give us save on to see what happens. Refresh the browser. We see that everything appears to work and find we have a update on the Progress Bar on. Once we hit pause, it stops. But if we open up the console, we'll see we have a right era which say's failed to set the value property on the progress elements. The provided double value is non minute, so it sounds as though we're getting some form number, which is not valid. So let's go back over on on some console logs to do a little bit of debunker. Let's add a consul long so the values will working with our progress spot, don't you? So that's all for this. Let's do a second consul log this time off player. Don't cooler time. Well, let's see we're getting there and then 1/3 consul. Look for all third volume, which is player inauguration. That's onthe easier and so I can see better. Which value is being displayed in the console? Let's just on a string off progress far. Paul, you current time for the final one is going to be the duration. So now if I'll put all three of these values, we can now see what we're getting back and check this any problems. So back over and refresh. Now click on a song on its paws. So on each update will get in free, different consul logs so I can see towards the bottom. We'll get in numbers. So we're getting a progress bar only, which is 1.6 the current time, which is free 0.0 on the duration, which is 100 and 76 seconds. So it doesn't seem to be any problems here. All numbers seem to live on it, but it was scroll right up to the top and take a look at the first free values we'll see with the number for the Progress bar volume, which is zero, which makes sense because the Progress bar hasn't started yet. The same for the current time, which is also zero because it hasn't started yet, but for the duration would get not a number on this makes sense because we don't know the duration until order was loaded. So this is why I'm getting this error assumes you click on a song because you can't take the progress bar with the not a number value. So let's go back over on the way to get around. This is by 1980 your statement. Remove the consul logs and Democrats aren't eight your statements. So we're going to say, If play you don't cook in time is greater than zero, then we can go ahead and look day to the progress. But so face this in. Give that saying No real old browser. Oh, probably developer tools Click on the console on keeping a song. We now see that the song plays without any errors that's pulls up. So I just wanted to give you a little insight into the debugging process that I went through. We're looking for the cause of this era. I hope they will give you something to think about in the future. We're trying to debug any errors, so this is the end of the project. Thank you, and I'll see you again 12. Thank you!: congratulations reaching the end of this course. Hold his calls to give you a better idea how html, CSS and JavaScript and fit together to create a useful for project. We go bike friendly user interface with hate email to display the default audio player on a list of our songs. Were they removed all the default controls provided by the hasty male or your elements? I'm began to create our own custom version after this. Move on to other in the style in it, using CSS to make our look and feel a lot nicer. Then we go to work, bringing our project life with John scripts by hooking up all the controls and various other tasks, such as a dating Progress bars on constructing our song list. Used job script. You're taking this course. I hope you've learned some new skills and enjoy to build this project. 13. Follow me on Skillshare!: huge congratulations from me for reaching the end off this class. I hope you really enjoy it and gain some knowledge from it. If you've enjoyed his class, make sure you check out the rest of my classes here on skill share on. Also follow me for any updates on also to be informed of any new classes as they become available So funky once again. Good. Look on. Hopefully I'll see you again in the future class.