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

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Javascript Fun: Build a Music Player App!

teacher avatar Chris Dixon, Web Developer & Online Teacher

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

13 Lessons (57m)
    • 1. Welcome To The Class!

      2:29
    • 2. Where To Find Audio For Your App

      1:32
    • 3. HTML Structure & Playing Audio

      7:13
    • 4. Custom Audio Controls

      4:01
    • 5. CSS Styling

      9:16
    • 6. Listing Our Songs With Javascript

      6:13
    • 7. Playing Songs Dynamically

      5:06
    • 8. Set The Current Playing Song

      2:01
    • 9. Play & Pause Controls

      2:45
    • 10. The Volume Slider

      2:21
    • 11. Updating The Progress Bar

      6:14
    • 12. Finishing Touches

      7:02
    • 13. Follow me on Skillshare!

      0:23
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

1,237

Students

13

Projects

About This Class

Welcome to the Javascript fun series!

You can find all of the code and project stages here:

https://github.com/chrisdixon161/fun-javascript-projects.com

For web design or development, there are 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 that 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. Then 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
  • Const and let
  • ES6 Arrow Functions
  • Event handlers
  • For / of loops
  • 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
  • And much more!

So if you are looking to move on and put your skills into practice using real projects, I will see you in the class!

Meet Your Teacher

Teacher Profile Image

Chris Dixon

Web Developer & Online Teacher

Top Teacher

Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and i have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like when I was learning. I also believe the best way to learn is by doing and try to include as many practical examples as possible in my courses.

... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Welcome To The Class!: Hey, welcome to this class. If you are a web development beginner and want to just jump in and build some fun projects, you've came into the right place. The idea behind this series is to show you what you can do with regular HTML, CSS, and JavaScript. I'm not going to be using any frameworks, any boilerplate, any libraries or any templates. Instead, we are going to be building everything completely from scratch step-by-step to show you how these free technologies all work together. During this course, we'll download various songs which we going to include in our application. Then we'll list these out down at the bottom. Once the user clicks on any of these songs, we then have access to all of the controls over at the top here, we're going to click on the play button, we can pause, we can adjust the volume. We see exactly which song is currently playing and also we have this progress bar which is updated about the song duration. This is what we are going to be creating. We'll create this completely from scratch using HTML, CSS, and make it fully interactive using JavaScript. We'll also add some nice animations when we click on a song, make these headphones bounced too. This application will teach you a broad range of skills, including HTML audio, working with CSS styling and animations. Of course there will be lots of JavaScript too. We'll have arrays of songs which will loop through and then display in the browser. We will add event listeners, so this song is activated when the user clicks on it. We'll work with audio controls for playing, pausing, re-loading, volume sliders, working with the song timing and duration, and a lot more JavaScript fundamentals such as template strings, working with functions, conditional statements, constants, and so much more. This class is designed for JavaScript beginners. However, do bear in mind that this is the sixth project in this JavaScript Fun Series, so if you are a JavaScript beginner, I would recommend that you go through the first projects to begin, to give you a good grounding for reaching at this stage. Although if you do have some JavaScript experience you could just jump straight in to this project. Thank you for taking an interest. I hope this class is enjoyable and I'll see you inside the first lesson. 2. Where To Find Audio For Your App: Before we get started with our music player application, we also need to find some songs to be able to play inside of our app. So if you have some MP3 files or some audio files you want to use, you can of course, use these existing ones and place these in a folder called songs. Here I've got six songs ready, which I'm going to use this app. All you need to do is to drag over any existing music files you may have and place them in a songs folder. Alternatively, if you don't have any songs available, there is many sites available to download some files. I'm going to be using the audio files from bensound.com, and bensound.com is a way to download some royalty-free music to use in our app. We can select the music by different genres. We can select all. We also have all the different labels above the top here, we can scroll through the pages. Then once you find some songs which we like, we can click on the download. We see we have some options for downloading. We can use this with a free license if we provide some attributions to the offer. All we need to do is to write a link in our project to the site. If you do like any audio which is on this site, go ahead and download some of these and place them in the songs folder. There is also a Pro license available to purchase too. This is if we don't want to provide any attribution. Go ahead and download some music which you would like to use. Put them in the songs folder, and we'll begin creating this in the next video. 3. HTML Structure & Playing Audio: You should now have a song's folder ready with some music which you want to play inside this application. To get started, this is going to be the project which we are going to be building. It's going to be a music player application, which will allow us to add some audio files to our project, and then play them inside of this app. We're going to loop through all of the songs inside of our project folder, which is displayed at down at the bottom. We can then click on any of these songs. We're going to see a little pulse animation with the header, and our song is now playing. We also have some custom audio controls, we have the "Play" button. We have the "Pause" button, and we can also control the volume down at the bottom. This is going to have a audio progress bar too, so we can see how far through this song we actually are. I'm sure you're eager to get started with this project. Let's create a new folder on the desktop. We're going to call this the music player. Drag over our song folder. Then we can open this up in Visual Studio Code. The first thing as ever we need to do is to create a index page inside of our music player. Let's click on a new file, and this is the index.html. You also have the option to use the same headphones image I've used here. Or you can also download your own too. If you do want to use the exact same one head over to the same GitHub repository that we've used throughout this course, go into the music player application, and then we'll see a headphones.svg. If we click on this, we can then click on the "Code" icon, which then will give us all of the SVG code we need to add to our project. Let's grab all this code, and then create a new file inside the sidebar. I want to call my new headphones.svg. Paste our contents and save this file. We'll come back to this in a just a moment when we get to that stage in our HTML. But for now, we need to create our HTML structure with the Emmet shortcut, which is HTML5. Hit "Enter". Then we can change our document title to be "Music Player." The user interface for this project is relatively straightforward. We're just going to begin by creating our image over the very top, inside of a main container. Then below this will have our audio player. I will list the songs. We'll also use the default audio controls just for now, and then we'll override these in the upcoming video. First of all, inside of the body section, we're going to create a div, which is the wrapper for our full project. This div is going to have the class of player. This is just so we can add some CSS styling in a upcoming video. The image is going to be the image which you just downloaded from GitHub, or you can use your own if you prefer. At the source, mine is the "headphones.svg," only alt text too. Let us check this is work in by opening up our index page inside of the browser. Copy the path. Paste this in and there's our SVG on the screen. The next thing to do is still inside of this main div section, is to actually create our audio player, which is going to play our songs. HTML has a audio elements. Let's add this in. This has the opening and the closing tag. Give us an idea of players so we can use this inside of JavaScript later on. Then we need to provide a audio source which the audio player is going to work with. We use this with the source element. This is a self-closing element, so we don't need to have a closing tag. Also for the purposes of JavaScript, later on, we'll give us an idea of source, so we can set this dynamically from our script. This also needs a source attributes. From here we can pass in any of our songs, which is inside of our songs folder. We can select any one of these. It doesn't really matter for now this just for our testing purposes. We've got our audio player and also a source. Then it just after this, we're going to add some text, which is going to be audio not supported. Now, the audio player has been around for a little while now, but if they use it, it's using a really old browser or a browser which does not support audio. This text will be displayed on the screen in place. After the audio player, we can then get to work with creating our song list with a level two heading of my songs. Our songs list is going to be wrapped inside of a div, with an ID of song list. For now, we're going to display an older list which has gone to output. The names of all the songs inside of our songs folder. Our first list item is going to be the first song which is inside of our song folder. Let's open this. Then we need to type in a song exactly as it appears inside of here. The first one is from "bensounds-clapandyell.mp3" extension. I'm using six different songs here, which all start with Bensound. I'm going to duplicate this five more times. The second one is "Dance." The third one, "Funky Element." Then "Happiness." "Happy Rock." Then last one is "The Lounge." We can either refresh the browser or we can also make use of the live server. I'm going to go up to the "View" command and enter the Command Pallete, and then do a search for the live server. Then open this up with the live server. Now inside the browser, we have our headphones image. We also have our list of songs, but currently, we don't see anything related to our audio player. This is because to make this appear on the screen, we also need to add the controls. This is an attribute and this will make sure our audio player displays in the browser and includes all of the necessary controls we need to control our songs, which is play, a volume slider, and also the time duration of the song. Since we've already set the source to be one of our songs, we can now press "Play" inside the browser. Our song will now start the play. This is the basics of our HTML and also a standard default HTML 5 audio player. However, though we're not going to use this audio player for our project. We're going to move on now to the next video, where we're going to create a custom audio player. 4. Custom Audio Controls: As we've seen in the previous video, we now have controls which are the default audio controls provided with the HTML5 audio player. We're now going to create our own controls to this project which includes the play button, the pause button, and also the volume and progress bar. The way just like we've seen in the last video, to remove this is to remove our controls attribute which is inside of the audio player. If we save this, we see our audio player is now removed from the browser. From our source element just below we can also remove the source attribute, since we're going to add this dynamically using JavaScript. Now we've removed these controls, we now need to go ahead and create our own. To do this, let's go just below our audio player and we create a new div which is going to have the ID of controls. This control section, if we go to the final version is going to have the text at the top with the current playing song. We'll have a play button, and a pause, along with a volume slider down at the bottom. There's control section. If we go to the final version, this is going to have the text of now playing and then the current playing song. We'll have our icons for play and pause. Then our volume slider down at the bottom. Let's start with our p element, which is going to be for our text for the currently playing song. This p elements will be empty for now since we'll set this via JavaScript, but we can set this for now with an ID of current song. Just after this, we can create a div which is a wrapper for all play on our pause buttons. The class for this wrapper is going to be controls wrapper, this is for our CSS. Then inside we're going to add our two span elements and this is going to have a HTML entity. The first HTML entity code we're going to use is going to be for our play button. This has the value of the ampersands, the hash, 9658, followed by the semicolon. The second one is going to be for our pause and to do this, we're going to create two vertical bars just like we see on the final version just here. The code we need for this is that the ampersands, the harsh, 10074, and the semicolon. We see we just have one of these vertical bars at the moment, but we can copy this and paste it just next to it to give us the pause symbol. We then also need a volume section just blow this div, so div p elements will detect the volume. A div with the class of volume and this is going to be a wrapper for our positive, our negative symbols and also the input which is going to have the type of range. First the negative symbol inside of our span elements, which is simply a dash followed by our inputs with the type of range. We can control this from our JavaScript by giving it an ID of volume slider. For our volume, we need to set the range to be between zero and one and we can do this with min equals zero and the max attribute to be equal to one. The final attribute of this step, I'm going to set this to be 0.01, and this means our range slider when we go from left to right, will go up in stages of 0.01. This will give us a pretty smooth slider as we go from left to right and then just after this, we're going to have to span a weird at the plus icon. This is now the visual or the HTML section now taken care of for our custom controls. Since these are simply HTML elements they won't play any music at the moment inside the browser, but we'll fix this very soon it using JavaScript. 5. CSS Styling: Moving on to the styling. Let's go over to the sidebar and create our style sheets, which I'm gong to call the styles.css. We can then link this inside of our index, inside of the head section with the link element. The relationship is a style sheet, and this is new root of our project. We can link this with styles.css. Open this up, and as ever, we're going to begin with our HTML section by setting the root font size. This is just the way I do things by setting this to be 10 pixels. To make the calculations really easy when converting this with a REM. But as ever, you can approach this in any different way which you prefer. Your body section for this is going to have a background which will be a linear gradient. Then we can add inside our two values to blend between. The first one, a hex value of 3b3b3b. The second one is going to be pretty similar. This is going to be 2b2b2b. If you're using the live server, you can just save the file and this will update the browser immediately. If not, just go to the browser and hit refresh. After the background, we can also set the height of this to be 100 percent. This will stretch the background as we get more content. The color currently on text is a little too dark for the background. So I'm going to change this to be a value of white smoke. Also a larger font size of 1.4 REMs. We can also center this with margin. I'm going to go for two REMs, which will be on the top and bottom, and then zero on the left and right. Some padding, which is going to give us some space in the inside of this gray body section, also of two REMs. We can center the text with text-align center. Then after this, we'll go over to the index page. We can see that inside the body we have this div with the class of player. This is going to surround pretty much all of the content inside. Just like we see only the final version, we're going to give this a background color, which is this purple color, and it also has a radial gradient. We have the darker color in the center, and then it spreads out to be a lighter color on the outside. Our target is player class over in our style sheet. Let's set our background and the radial gradient. The two values I'm going to go for is going to be 211e24. The second one, again, a hex value you this is 4f3341. We now see our radial gradient, which comes from the center of the background and blends out to the outside edge. After this, some padding to give this some spacing on the inside of the element of two REMs, and then we can round the corners of this purple section with our border radius. Now the wrapper is taken care of, and we now need to move inside of this player section, and then begin to work with our content. At the very top, we have this image and the image is a little too large for our project. If we go over into our style sheet, we can target this. Then we can restrict the width to be 50 percent of the available space. After our image, we don't need to do anything with this audio section because we're using our own custom controls, which are listed just below. This control section has the ID of controls. We're going to use is to add a border and also some padding to the section, just like we see in the final version. The idea of controls, we target this with the hash. The border, this is going to be one pixel wide, a color of light slate gray. This is also going to be a solid line. To round the corners, we can add our border radius of 10 pixels or we can also do one REM. Also some padding on the inside of the section to give it some spacing from our controls. Currently, now we see less content on the screen since we've made the image a little smaller. We can now see that the gray background color which we had for the body section is now not covering the full height of the page. To fix this, we can change the height to be 100 percent of the current view board height, which is the height of the browser. We can also make sure that this is the minimum too. Go over to our HTML and then inside here, we have this class of controls wrapper. Inside here, this contains our two spans which have our icons for the play and pause controls. We can target all these fun elements which are inside of our control wrapper. Back over to our style sheets. We can then target the controls_wrapper. Then we can select all of the span elements which are immediately follow this div. Inside of here we want to make sure that the mouse cursor is a pointer. This will change our pointer each time we hover over any of these icons. The color, this is going to match the border, so this is going to be light slate gray. We can make these larger with the font size of six REMs. Some padding to give this some spacing. Then we're going to move onto our songs. First of all, inside of this wrapper, we also have this p element with the ID of currentSong. Each time the user clicks on any of these songs, we're then going to grab the song name, and then place this at the very top. We also need to handle what to do if a song title is really long, since we don't want this spilling off the edge of the screen. The way to do this, if we grab our ID, which is currentSong, and we use the hash. All we're going to do to prevent this is to set the overflow property and set this to be hidden. This is basically going to hide the rest of the title, which is too wide to fit inside the container. If our title was right across the page, as soon as it got to the edge of our div, the rest of the text would then be hidden. We can also do the same down in our song list. So we scroll down. The song section has this ID of songList. We'll do the same, we'll set the overflow to be hidden. We can also align all texts over to the left of our section. Each one of our songs is a list item. Back to our HTML, we have our list items which wrap each one of these songs. We can also change the cursor to be a pointer each time the user hovers over any one of these songs, just like we did with our icons. Our list item. The cursor is going to be a pointer. Also 1.5 REMs of padding to give us some spacing between each of our songs. We have our spacing, and we can also see that the cursor changes to a pointer when we hover over each one of these. We can also make sure that the background color changes to be a matching red color to these headphones. Let's do this when we hover over any of these list items, so li. We can select the hover state. All we're going to do is to set the background color to be a red value, which is f3644b. This is now the base of the styling for our application, and it also looks pretty good on the small screen. However, if we make this a lot wider, we may want to introduce a media query to restrict the maximum width of this body section. Let's add this at the very bottom at media, and then we'll select all of our screens with a minimum width of 800 pixels. Select our body section, and then we can set the maximum width to be 60 percent of the view bar width. Also the font size, let's increase this to be 1.8 REMs. The body section is now restricted, but we also need to place this back into the center. Let's do this. If we go back to our original body section and inside the margin, we're setting two REMs in margin on the top and bottom. Put zero on the left and right. We can fix this by setting this to be auto, and this will split up any remaining margin on the left and right equally. This is the styling now done for our app. Then next up, we're going to move on to adding JavaScript to list all of our songs. 6. Listing Our Songs With Javascript: The next step for this project is to add our script. Open up the sidebar been create our new script.ks. Inside the index page, you can then link this just above the closing body tag. The scripts has the source inside of our root. This is simply the script.js. To begin, we're going to grab all of our list items, place these inside of an array, and then create a FOR loop which is going to place these back inside of this section. Grab each one of our list items. I'm going to copy these over to our scripts. At the moment, this is not a valid JavaScript. We're going to move this over to our array. Our array is going to be called songs. Then we're going to move over each one of our list items and place these inside of the quotations. The first one, separated by comma, grab our second one, place these inside the quotes, I'm going to add a comma between each one of these array items, place these inside of the array. We can also remove each one of these list items too. Now that each one of our songs is inside of our JavaScript, we can then go back to our index page and remove this full ordered list. This is because we're going to create a function which is going to select our song list and then place inside a new order list which has been created from JavaScript. To do this, let's create a function called create song list. The first thing we need to do inside of this function is to create a new ordered list. We do this with document.createElements, that's in our ordered list. We also need to install this inside of a constant so we can add each list item. But how do we go about creating six new list items? Well, we could add each one of these individually, but it's much more efficient to create a loop to do this six times. Let's create a FOR loop. We want this loop to run six times or as many times as array items. The way we can make this run six times is by creating a variable. I'm going to call mine i, and initially set this to a value of 0. The second declaration is how many times we want this loop to run. At the moment, we have six separate songs, but we don't want to add a hard coded value. Instead, we can access our songs array and use the land property. We'll keep this running as long as the value of i is less than a songs.length. Then each time this FOR loop runs, we're then going to increment the value of i by one. Just to recap, are going to create six list items. To do this, we're going to use a FOR loop. To make sure this runs six times, we're going to use a variable called i. The very first time this loop runs, i will be equal to 0. It will then keep running as long as i is less than songs.length, which is equal to six. I will then incremented it to be a value of one. The next time this loop runs, i will be equal to one, which is less than the length of our songs array. This will keep running until the very last loop, where i will be equal to six, which is no longer less than songs.length, causing our loop to end. To begin, we'll create our new list item with document.createElements. The element we want to create is a list item and store this inside of a constant called item. This will then lead us with a HTML element just like this. Then we need to create our contents which is inside. For example, on our first loop we want to pass in the very first elements inside of our array. The way we can create this is by using create a text node. How do we go about creating this content? What we can do this with document.createTextNode. The text node we want to create is from our songs array and the value of i. On the very first loop, i is at 0. This will be song 0, which is our very first one. On the second loop, songs is equal to 1, this will be our second one. Since you remember arrays begin at a index of 0, this will give us our song title. We can then append this to our item. Remove this. We can grab our item, call the method called append child. Then we can paste in our text node. After this, we want to grab I will alter list, which is stored inside of this list variable. We can then call append child and add our individual list item. At the end of our function, we can then return our newly constructed ordered list. Then we can add this to the DOM if we go to our index page. Remember, we have this div with the id of song list. We're then going to place our order list back inside of this section. So back to our script and we can grab this where we get element by ID, where we want to pass in our song list. We'll append child method. Then we can pass in the returned list of from our "Create Song list" function. This now adds all of our songs back into our player. Currently, we can't click on any of these songs to play. This is going to be something which we'll fix in the next video. 7. Playing Songs Dynamically: Good, so we now have our songs listed inside of the browser, and the next thing we're going to do is to enable the user to click on any of these song titles and then load this into the player. The way we're going to do this is, again, making use of our song list, and then we're going to trigger a function each time and this is clicked on. Rather than duplicating this section here, we're going to solve this reference inside of a constant called songList. We can then grab our appendChild section which we created in the last video, remove this, and then we can add this directly to our constant. Now we'll have the song list stored inside of a constant. We can also make use of this and listen for any clicks to the section. We can do this with a property called onclick, and this is going to trigger a function. This function is going to take in the event information, and we'll take a look at exactly what information is included with this event by logging this to the console. Now we head over to our console inside the browser. Click on any of these songs, and then we'll see lots of information is displayed inside the console. We see this is a mouse event, since this is been clicked on with the mouse. In particular, the piece of information we're interested in is this target just here. Inside of the target, we need to scroll down and take a look for our innerText. We can see the innerText contains the name of our song. If we also try to click on any different element, such as number 4, we can then go back to the console, open this up, and inside of our targets and again down to our innerText. We see we have access to our song title once again, so what we need to do if we go to our index page and scroll up to our audio player, remember from the source elements, we've moved this source attribute early on. What now we need to do is to grab our inner text and then replace this as our new attribute. The way to do this: first of all, if we grab a reference to our source, and we can do this with a document.getElementById. The ID for this element is also source, and now we can access our source variable, set the source attribute, and the attribute is going to be the file path to our song, so all of our songs are stored inside this songs folder. We need to add songs, forward slash, and then, just like we've seen in the Console, to get the value of our song name, we need to access our event variable, the target, and then also the innerText. Then, there are two more small things which we need to do. These two things is to actually load the audio and then the call to play function. To do this, we need a reference to our player. If we go back to our HTML, our audio element houses ID of player. Let's grab our reference, store this inside of a constant, Here const player. This const is equal to document.getElementById, the ID is player. Then we can use this player variable to, first of all, call load, which is going to preload the audio which we set just above without actually playing it inside the browser. It will also remove or reset any previously loaded songs. After this, we once again access our player variable. But this time, we call play, which is going to begin playing our audio track. Let's try this out. If we go over to the browser, click on any of our songs, you should now see that the songs are immediately playing. Good, so now this is in place. I'm just going to go back to our index.html. If you're also using some audio tracks, just like I am, which needs some attribution, you can sort this inside of the HTML, and what's on mine just below the song list. I want to add this as text, so music, mine is bensound.com. We'll nest it inside, I'm going to add a link with the a element. The link was https, this was bensound.com. We can also grab this link and paste this in as the link text. The link text is a little difficult to see, so we can make a small change to our CSS. Right at the very bottom, grab our a element. We can also set a matching color to be white smoke leaving our link much more visible. With our songs now playing, the next thing we're going to do in the upcoming video is to also grab the song title and also display this just above our icons. 8. Set The Current Playing Song: This is going to be a pretty straightforward video. All we're going to do is to grab this song title and then display this inside the browser. We're going to do this is to select our p element which we created early on in the index page. This p element has the ID of "currentSong" and is currently set to be empty. Let's try this with the ID, and we can set the inner text. We can do this when we select our new song inside of this "onclick" function. I'm going to do this just before we load our audio. First of all, let's grab our elements. We can use anything such as "getElementById" or we can use "querySelector". As we looked at earlier, "querySelector" will allow us to select any one of our elements with a CSS-like selector. So we can select like "div" or in our case, we have an ID, so we select it with the hash, just like we would do in our CSS. The ID for this one is the currentSong. We can then set the inner text of our elements to be equal to a string. If we just wanted to display some regular text, we could add this as a string inside the quotations. But because we want to add this as a dynamic string which is going to take in the current song title, we need to insert some variables so we can add this as a template string. So open up the backticks. We can start with the text of Now Playing, a colon, and then we insert a variable with the $ symbol and the curly braces. From the last video, we already know how to get the song title, and this is stored inside of our "e.target" and then we select the "innerText". We do exactly the same inside here. Select the "e.target.innerText" save this file, and over to the browser. Click on a song, and this is now displayed inside of our audio player. 9. Play & Pause Controls: In this video, we're going to hook up our play and also our pause buttons for our audio player. Back over in our index page, within our controls wrapper, we have our two span elements. The first one is for our play button so we can add a onclick event handler, which is going to trigger a function called playAudio. Below this, we have our pause button, and this is going to have a click handler to. The function of this one is going to trigger, is going to be called pause audio. Save this file and now over to our script, we can set up our two functions. Right at the very bottom, the first one was playAudio. Inside of our play and also our pause functions, we need to access our audio player. Above in this onclick section, we already have a reference to our player. However, because this has been declared inside of this function, we can't access it in any other part of our program. To access this play from all of our sections or to make it global, we're going to cut this line of code, and we can place this at the very top. Now this play variable is not declared inside of a function. This is now in global scope so we can access it in any function. Just before we move on, will save this, and also check that our songs are still playing when we click on each one of these. That's fine. We can now move on to our playAudio function. Inside here we're going to create an if statement, and this if statement is going to check if the audio has finished loading. We can do this by accessing our player on a property called readyState, so readyState will return a true or false value. If ready state returns true, this means our audio has finished loading, and therefore, we can call player.play. After this, our second function is to pause our audio, and all we need to do inside here is call player.pause, give this file a save and now we can test this out over in the browser, give this file a refresh. First of all, click on any of our songs, begin playing. Once this begins, we can test out our pause function by clicking on this icon, our audio now stops, and if we click on play the audio begins once again. So our play and also our pause functions are now fully working. In the next video, we're going to move on to the volume slider to control the volume for our player. 10. The Volume Slider: We're now going to create the functionality to control the volume inside of our audio player. This is being created inside of our index page as a range slider. Therefore, we need to access this element with our ID. At our script and at the very bottom we can create a constant which is going to store a reference to our slider. We can select this with get element by ID. The ID which we've just seen is the volume slider, access our constants. Then we can add the on input event handler which is going to trigger a function each on the value of our range slider has changed. This is also going to take in the event information. Let's do a console log and see what information is stored in this event. Into the developer tools we'd right-click and inspect, click on the console. Then if we adjust our range slider, we see that each time the slider has changed, this will trigger a new event. Let's expand this. Just like we looked at earlier to access our element, we select the target property. If we scroll down, we can find the value of our element. Our slider has the range from 0-1 and currently we have a setting or a value of 0.43. We can now use this value, store this inside of a constant, and then set our play volume. First of all, we'll create our constant to store this value called volume and set this equal to our event which is stored in e. We'll select our target and then the value just like we've seen inside the console. Access our play variable. Now we can set the player.volume to be equal to our volume variable. Let's try this out over inside of the browser. Choose any song. It should start playing. Let's test out our slider by going right back down to zero and the audio has gone, push this right up to the full volume. We can now here our audio at its loudest setting. With our controls all now taken care of, now let's move on to the next video and we'll create our progress bar. 11. Updating The Progress Bar: We're now going to create a progress bar inside of our project, which is going to be updated as the song is played. So this progress bar will be right at the very beginning once the song has begun, and the duration will be updated as the song progresses. The first step is to go to our "Index Page" and we can create a progress element. But still this just after our audio section and we can take advantage of the HTML progress elements. We can update this, we're going to have an id, and this id is going to be equal to progress. The second attribute is going to be the value which we'll initially set to zero. This will set our progress bar to be right at the very beginning, and then we'll update this with JavaScript. Next, we can add a max, which is going to be equal to 100, so our progress bar value can be between zero and 100. The second step is to go up to our audio player, and then we're going to add a new attribute called ontimeupdate. Ontimeupdate is an event which runs when the position of the audio has changed. So i.e this is going to run as the audio is playing. What we need to do inside here is to pass any function which we want to run on each update. I'm going to call this function updateProgress, and then we can create this over in our script. So down at the very bottom, the function name was updateProgress. When we've created our progress bar, we give this an ID of progress. We can store this inside of a constant called the progressBar and set this equal to documents, getElementById and the ID was progress. Also in this progress bar, we set an initial value of zero, and we now need to update this with JavaScript. We can do this by selecting our progressBar constant and then set our value to be equal to a percentage between zero and 100. The way we're going to do this is by creating a calculation. This calculation is going to access both the current time and also the duration which is available on our player constant. To see this, we can comment this out and just do a console.log. First of all, if we console.log the value of player and then at the current time, let's duplicate this. We can also log the duration of the audio track. Current time is the actual amount of time which has elapsed as we're playing the song. The duration just below is the total length of the audio track or to the console. To see this, we can click on any of our songs to begin playback. The first value, which we'll see just here, let's pause this. This is the current duration of our track, and then we'll see our track length is a 176 seconds. This value will always be the same since the length does not change. We now need to use our two values to create a percentage between zero and 100. The way we can do this is by grabbing our currentTime at the scene and then we can divide this by the player.duration. To turn this into a percentage, we then multiply this by the value of 100. We can then remove our console logs and check this over in the browser. Select any song. This one I'll start playing and our progress bar is now being updated. Just to finish off this section, we're also going to add a little CSS style into our progress bar. Also, our style sheet, select our progress elements. I'm going to begin by setting the width to be 100 percent of the available space. The height of our progress bar to be three rems, and then some spacing on the bottom, which is a margin-bottom. So this file will now have some nice styling for our progress bar. On first glance, everything seems to work in completely fine, however, if we go inside of the developer tools, and then inside the console, select one of our songs. If we open this up, and if we expand this, we can see we have a message of "Failed to set the "value" property" on our progress bar. This may seem a little strange at first because our progress bar is fully updated inside the browser. However, though this error is caused as soon as our song has been played. This is right at the very beginning because of our player.duration. Let's go back to our updateProgress and we can do a console.log for the value of player.duration. Let's go back into the console, refresh. As soon as you do this, we see the value of not a number. So as soon as it loads, we don't have any duration data right at the very beginning. This is because we're calling our function before the duration has been set. To overcome this we're only going to call this function once the song has begun to play. Let's remove the console.log and also these two lines of code inside of our function. We can then create an if statement, which is going to check if the player.currentTime is greater than zero and this section will only run once the audio player has begun. Therefore, we can pass in our two lines of code which we just cut and we can try this out over in the browser. Open up the developer tools, select any bow our songs. This area now goes away. We're nearly finished with our project and in the next video, we're going to add some finishing touches to this project. 12. Finishing Touches: Let's now finish off this project by adding some finishing touches. We're going to add some Google fonts. We're going to also add a small animation to our headphones each time a audio track has been selected. We're also going to fix a small issue too when selecting one of our songs. First of all, let's go over to Google Fonts. I'm going to grab a font for this project. The font which I'm going to select for this project is going to be called Permanent Marker. I'm looking at this just like in the earlier projects. All we need to do is to select our style, click on the "Embed", and then bring over our link to our Index page. After this, we also need our CSS rules, so copy this section, at the top of our style sheets, we can then paste this into our HTML, save this, and refresh the music player, and our font is now taking effect. By default, the letter spacing for this font is pretty squashed together. To give this some more spacing, I'm going to add a property called letter spacing, and then give this some spacing of four pixels. Next, I'm going to add a small pulse animation to our headphones, each time the user clicks on any of these songs. To do this over in our script, we're going to add a new class to our headphones image, and then we can set this animation over in our style sheet. To grab our headphone's image, we can add an ID to this element, so ID of headphones. Then we can go to our script, and add a new class name to these elements, each time a user clicks on any of these songs, right Right the end of this function. Let's select the documents, and then we can use getElementById, or also a querySelector, just like we used earlier. The ID was headphones, grab our classList, and then we can add a new property called pulse. This is grabbing our headphone's image. We then add in a new classList of pulse, which we can now use over in our style sheets. Down at the very bottom, the animation name, which is going to be called pulse; I'm going to create this in just a second. Then the duration of this animation is going to be over 0.4 seconds. For this to work, we also need to create our keyframes, that is pulse animation. We use the from section, and this is for the start of our animation. All we're going to do inside here here is to set the transform and the scale property, to be a value of one. To begin, this is going to be exactly the same size as originally was, halfway through, which is going to be 50 percent. We'll then set the transform to be a scale value of 0.9. To end our transition, we're going to set the to value, and this is going to transform our scale back to our original value of one. This is only a subtle change. We're going to go from the original size to 90 percent, and then back to the original size. This will happen over a duration of 0.4 seconds. Give this a save, and we can try this out over in the browser. Let's click our first song, and we see see pulse. But now if we click on any other song, we don't see the animation taking place. This is because back over in our script, we add in a class, but each time we select a new song, we also need to remove this classroom any of the elements. This is going to be very similar, so we can copy this very last line, paste this at the started function. But this time rather than adding our class, we're going to remove. Let's try this; click on any song, our pulse animation works. Let's try second one, and this works for each item which we click on. The very last thing we're going to do is to fix an issue when selecting our songs. This may, or may not be an issue which you've uncovered just yet. But if we click on any of our songs, this will then set the Now Playing text. However though, for certain parts of the section, if we click on just above our list item, we get the contents of all of our songs. This is because back over in our JavaScript, we are adding this click handler to our full song list section. The song list is our rapper, and this contains all of our list items. Everything works perfectly fine if we were to click on these list items. But if we were to click on just outside of the list items like we've just seen, this will select the full contents of our song list. To fix this, we're going to rearrange this function to only listen for any clicks on our list items. The way to do this is by selecting our full documents, and then we can use querySelectorAll plus in our 'li' elements. This is going to grab all of our list items on the page. We can install this inside of a constant called links, and set this equal to our value. This value of links will now be our six songs. We need to loop through all of these six values, and then add our event listener to each one of these list items. To do this, we're going to make use of a for of loop, and this looks just like this. So we say for, and then create a constant called link of links. This is going to loop through all of our six links, and then store the individual value inside of a constant called link. For each link, we are then going to add an event listener, and the event we want to listen out for is 'click', which is then going to trigger a function called setSong, which means now we no longer need to loop through our full song list, so we can remove this. Now we can turn our function into setSong. We can then move this down at next to our function. Give this a save, and now you can try this out in the browser. Click on a song, and it still plays fine. We can switch songs, and finally, if we click just outside of our list items, this function will now no longer run. With this issue now fixed, this is now the end of our music player application. Thank you for watching, and I hope you've enjoyed. 13. Follow me on Skillshare!: A huge congratulations from me for reaching the end of this class. I hope you really enjoyed it and gained some knowledge from it. If you've enjoyed this class, make sure you check out the rest of my classes here on Skillshare and also follow me for any updates. Also to be informed of any new classes as they become available. So thank you once again. Good luck. Hopefully I'll see you again in a future class.