0:01 Hey guys, in this video we're going to 0:03 be building an HTML 5 audio player using 0:07 the audio API. And I haven't seen very 0:10 many good tutorials uh on this. We're 0:13 not going to simply stick audio tags 0:15 into a embedded in a a web page. We're 0:18 going to use JavaScript to be able to 0:20 load album images, songs, 0:24 um play functionality, pause, skip 0:28 track. Okay, we're going to have 0:29 playlist functionality. Uh volume. All 0:32 right, so it's a full functional uh 0:35 audio player. All right, so we can go 0:37 ahead and press 0:39 play. And I'm not sure if you can hear 0:42 that or not, but it's playing. You can 0:43 see the 0:44 duration. And this is also going to show 0:47 you the duration. This progress 0:49 bar. I go ahead and pause it. And we can 0:53 switch through tracks. 0:55 [Music] 0:57 All right, we can go 0:59 back and we can also click on the song 1:02 down 1:06 here. All right, so uh full 1:10 functionality. So what we're going to do 1:13 is go ahead and create a new folder for 1:16 our 1:18 project. And I'm just going to call it 1:21 HTML 1:22 5. Um HTML 5 1:25 audio 1:28 player. And if you look in the 1:30 description of the video, you should 1:32 have a link to the GitHub page so you 1:34 can get the files um for the 1:37 images. Okay, so for the play, the stop, 1:40 and the next and previous images. Uh I 1:43 created those in Photoshop. I'm not 1:45 going to go through that and show you 1:46 how I did that. Um you can just grab 1:48 them from the files or even use your own 1:51 if you want. 1:54 All right. So, let's create our file 1:56 structure. We'll create a folder 1:58 called image. And I'm just going to go 2:01 into the the 2:04 um the final project and get all the 2:08 images. So, basically, we have the 2:10 background, the knob for the volume, 2:12 next, previous, pause, play, stop, and 2:16 the progress bar. We have the empty 2:17 progress bar and the full progress bar. 2:20 And then I have a um a folder called 2:23 covers which has cover one.jpeg. All 2:27 right. So I'm going to grab all of these 2:29 and bring them 2:32 over. And again, you feel free to make 2:34 your own 2:35 images. All right. So next we 2:39 want a um CSS. 2:48 We want a folders to store the media. 2:51 All right. And that I'm also going to 2:52 bring over. Feel free to use your own 2:56 songs, uh, your own MP3s or whatever. 2:59 I'm just going to bring all these 3:02 over. Okay. 3:04 Um, and then we want a 3:07 JavaScript 3:10 folder and then just our index folder. 3:13 Uh, index file, 3:15 sorry, index.html. 3:19 HTML and that's it. 3:22 So to let's also create our CSS 3:28 file. So this will be 3:33 style.css. All right. And also 3:37 JavaScript. Let's create a file called 3:41 main. 3:43 main.js. And we also need jQuery. So, 3:46 we're going to go ahead and download 3:55 jQuery. You can use uh a remote 3:57 repository if you want, but I like to 4:00 include the actual file in my in my 4:03 application. And I'm going to save this 4:05 just as 4:06 jQuery.js. And I want to save it in my 4:09 project 4:11 file, in my JavaScript file. 4:16 All right. So, that should do it for 4:19 files. So, I'm I'm going to use uh 4:24 Notepad++. Feel free to use your own 4:26 editor, whatever you 4:28 like. Get rid of 4:30 these. All right. Now, I just want to 4:33 navigate to that folder, which is 4:39 um it's on my 4:42 desktop. All right. So I have the folder 4:44 structure here. So the first thing we 4:47 want to do is our 4:49 HTML. All right. So let's just go ahead 4:51 and set up a uh HTML 5 document. 5:14 Okay. 5:17 Title. Uh, we'll just say 5:22 HTML HTML 5:26 5 audio 5:34 player. All right. We want to link our 5:51 stylesheet. Um, and I'm going to include 5:54 our JavaScript at at the bottom of the 5:57 body. So, first we want our jQuery 6:13 All right. And then we want our main 6:14 JavaScript 6:19 file. All right. So that's the basic 6:29 structure. All right. 6:34 So what I want to do uh let's see I want 6:38 to start with a container because this 6:40 is going to be in a container and we're 6:43 going to give it a fixed width. All 6:46 right 6:50 so we'll give it an ID of 6:59 container. Okay. Okay. And in that 7:01 container, the first thing we have is 7:03 the image. So we'll go ahead and say div 7:08 id um 7:12 audio 7:16 image and that's going to be the cover. 7:19 So 7:21 image class equals cover. And I'm not 7:25 going 7:26 to I'm not going to insert I'm not going 7:29 to put in an src tag uh attribute 7:32 because we're going to do this 7:33 dynamically through JavaScript. Okay. So 7:36 all we need is the image tag along with 7:38 the 7:39 class. All right. So after the audio 7:42 image we want the audio player. So div 7:49 id audio 7:54 player and inside the audio player first 7:57 we'll have the info. All right. So if we 7:59 look 8:00 at the audio player is from here down to 8:05 I think here. Okay. So this whole 8:09 area. Uh, so audio info div 8:15 ID 8:17 info. Actually, I want this to 8:19 be audio 8:25 info. All right. And we're going to have 8:28 we want the artist and the title. All 8:31 right. We're going to put those inside 8:32 of spans. So we'll say 8:36 span 8:38 class is going to be not 8:41 article 8:45 artist and remember these are going to 8:48 get generated from the JavaScript. We're 8:50 not going to include anything here. All 8:52 right. And then we want a dash and then 8:54 we're going to have this the the title 8:56 of the song. So span 8:59 class is going to be 9:04 title. All right. So that's this the 9:07 artist and the title. That's audio info. 9:11 Next, we want the volume, which is going 9:13 to be an 9:14 input. Uh it's going to have a 9:17 class. I'm sorry. It's going to have an 9:21 ID, a 9:24 volume. All right. And the type we're 9:27 going to use is the HTML 5 range type. 9:30 Okay. So, it's going to give us that 9:31 little slider. All right. The minimum 9:34 we're going to set to zero and the max 9:40 will be 10. All right. And the initial 9:43 value will be five. Okay. When it starts 9:47 up, it'll be at 9:50 five. Excuse 9:53 me. Okay. So that's good. And let's take 9:56 a look at it. It's not going to look 9:58 like much. Okay. So you uh we have not 10:02 basically just a slider. The text is 10:04 going to be generated. So we're not 10:06 going to see that yet. All right. So 10:09 after the volume, 10:11 uh let's just put in a line break. Bring 10:14 it down a little. And then we're going 10:15 to have our buttons. So div 10:20 id. And this is going to be we'll say 10:26 audio 10:27 [Music] 10:31 buttons. And basically what we're going 10:33 to do here is just create empty 10:36 buttons with uh ids. So button 10:41 ID, we want our previous button 10:50 um play. Let me just copy 10:58 this. Okay, so we have previous, we have 11:03 play, we have 11:05 pause. the pause button. We're going to 11:09 hide through. We're going to use CSS to 11:11 hide that until 11:15 um a song is actually playing. All 11:19 right. And then we'll say 11:21 stop and 11:25 next. All right. So, those are our 11:28 buttons. Uh after the buttons div, I'm 11:32 going to go ahead. We're going to have 11:33 some floating here. So, I want to go 11:35 ahead and clear it. So I'm going to 11:36 create a custom class called 11:44 clearfix. All right. And then after that 11:47 we want the tracker. All right. Now the 11:49 tracker is basically this area here with 11:52 the with the progress 11:55 bar. All right. So, div and we're going 11:59 to give it an 12:01 id of 12:06 tracker. All right. And inside here, 12:09 we'll have another div with the id of 12:12 progress bar. 12:22 And then inside there, we want another 12:25 div with the id of 12:28 progress. All right. Now, this is 12:32 because we're going to have an image of 12:34 an empty progress bar which will be 12:37 attached to this div and then the 12:39 progress will be the filled um the 12:43 filled progress bar. All right. Um and 12:46 in here we want to put a 12:48 span. So, 12:51 span ID. Oh, I'm 12:55 sorry. Uh, this should actually be a 12:59 span. This 13:03 progress. Make sure you change 13:06 that. Okay. Span progress. And that's 13:10 it. We're not going to put anything in 13:12 here. So, basically, we're not putting 13:14 in any content really through the HTML. 13:17 going to be all through JavaScript and 13:19 through the 13:19 API. So, right under the progress bar 13:23 div, we're going to have the duration 13:26 and that's going to be a span tag. So, 13:29 span 13:31 id is going to 13:33 equal duration and this is going to be 13:36 the numbers uh the time that the song 13:40 has been 13:41 playing. Okay. And then that's it 13:44 for I think it's tracker. Yeah. So under 13:48 tracker we're going to have 13:50 another Whoops. This should be a 13:53 span span. And under tracker we'll have 13:58 another clear 14:01 fix just to clear any 14:04 floats. All right. And then finally 14:06 we'll have the playlist. Okay. Which 14:08 will be quite a bit of code or markup I 14:11 should say. 14:12 So, it's going to be a ul and we're 14:14 going to give it an 14:16 ID of playlist. I apologize if I sound 14:20 um a little stuffy. I just I'm getting 14:22 over a 14:24 cold. Uh so, 14:26 playlist, an idea of playlist. It's 14:28 going to have a 14:31 class of 14:36 hidden. Actually, you know what? I'm not 14:38 sure if we need 14:41 this, so I'm going to take it off for 14:44 now. Uh, and then in the playlist, we're 14:46 going to have a bunch of LI tags 14:50 representing, excuse me, representing 14:52 each song. All right. So, we're actually 14:54 going to have a song 14:56 attribute. All right. And in that, we're 14:58 going to put the title. So, the first 15:00 one will be Lincoln Park dash because 15:03 I'm going to put the artist in as well. 15:06 And the song will be paper 15:10 cut 15:13 mp3. All right. So that's the song 15:15 attribute. Next we'll have 15:20 cover and that's going to be cover 15:23 one.jpeg. So each song you can have a 15:26 different cover for, but I'm just going 15:27 to use the same one for all of the 15:31 songs. All right. And then finally in 15:33 this li tag we want 15:37 artist. All right. So artist I'm going 15:40 to set to Lincoln 15:43 Park. All right. And then we'll close 15:46 that off. And then the name of the song 15:51 again. 15:53 MP3 li. All right. So we want to do this 15:57 for each song. 15:59 Now, generally, you would, if you were 16:02 to have this as a production app, you 16:04 would want a better way to add songs 16:06 instead of going in and adding an LI tag 16:09 and all the song names and stuff. So, 16:11 you you'd probably want to build some 16:13 kind of serverside application where you 16:16 could just um upload the song or enter 16:19 the song info in a form. All right. So, 16:22 this is basically just a front-end 16:25 application. All right. So, what I'm 16:27 going to do now is there's quite a bit 16:30 of songs. So, I'm going to pause the 16:31 video and then just paste in all the 16:33 songs. All right. So, I've I've pasted 16:36 in all the songs. Same format. Song, 16:39 cover, artist. All right. So, that is 16:42 all of the 16:43 HTML. If we save it and take a 16:47 look, it looks absolutely horrendous. 16:50 Okay. So, the next thing we want to do 16:53 is style this with CSS. 16:56 So, let's go ahead and open our 16:59 style.css 17:01 file. All right. So, we're going to 17:03 start with some of the core elements. 17:04 Uh, what I want to do is I want to zero 17:07 out the margin and the padding and the 17:09 border of all elements. So, I'm going to 17:12 use the 17:14 asterisk and we'll say margin 17:18 zero, padding 17:22 zero, border zero, and 17:28 outline none. Okay, so that's kind of a 17:31 reset. Next, we'll do the body. 17:36 Okay. So, I'm going to set font 17:39 family is going to be 17:47 Ariel. The font size I want to be 13 17:52 pixels. 17:55 Oops. Okay. The line 18:00 height line height will be 1.5mm. 18:07 color will be white. Okay. Now, we want 18:10 to do the background. And you can see 18:13 that in my image 18:15 folder, we have this 18:18 bg.png. And it's basically uh a dark 18:22 carbon type design uh texture, and we're 18:26 just going to have it repeat through the 18:27 whole background. Okay. It'll give us 18:29 that cool carbon look. All right. So 18:32 this is going to be 18:34 URL and it's going to be in the image 18:37 folder called 18:41 bg.png. And we're not going to do 18:43 anything with repeat because we want it 18:44 to repeat um vertically and 18:49 horizontally. So if we go ahead and 18:51 reload. Okay, now we have a 18:54 background. Next, uh, let's do that 18:56 clear fix 19:00 class. And the only thing we need here 19:03 is clear 19:04 both. That'll clear any floats. Okay. 19:08 Now, the 19:12 container container the width is only 19:14 going to be 330 pixels. All right. Now, 19:18 this this um application will also look 19:21 good on mobile devices. All right. We 19:24 don't even need to really do any kind of 19:26 responsive uh media queries because it's 19:29 so thin anyways. It should look good on 19:31 all 19:32 devices. Uh I'm going to set a minimum 19:35 height of 400 19:39 pixels. Okay. The background I want to 19:42 be a dark 19:44 gray and overflow should be 19:50 auto. overflow, not over 19:57 low. Uh, I'm going to give it a margin 20:00 at the top. We'll do 60 pixels top and 20:03 bottom. And then the left and right 20:05 auto, because we want it to be in the 20:07 middle. 20:10 Uh, we want to give it a border of a 20:15 semi dark 20:16 gray solid 2 pixels. And I want to have 20:21 a 10 pixel border radius. Okay. So, we 20:24 need to do the uh vendor prefix versions 20:27 as well. So, 20:29 border radius 10 20:32 pixels. We'll do 20:35 WebKit, Chrome, and 20:40 Safari 10 pixels 20:44 and border 20:46 radius 10 pixels. Okay, so that should 20:49 do it for the container. Let's go ahead 20:50 and take a 20:51 look. Okay, so that looks good so 20:55 far. Um, so let's do the image. Okay, 20:58 because the image will be the first 21:00 thing in the 21:02 container and this was called I believe 21:05 it was audio image or 21:11 img. And I'm going to set the 21:13 position to 21:17 relative and set the overflow to 21:23 hidden. It's going to have a height of 21:26 200 21:28 pixels, margin 21:31 bottom 15 pixels. Now, the image is 21:35 going to be uh it's going to be 21:37 generated through JavaScript. So, we're 21:38 not going to see it yet. Okay. So, even 21:41 if I save it, you can see that it's 21:43 going to be uh 200 pixels high, which is 21:45 it's going to show about, let's see, the 21:48 top half or the top 60% or so of the 21:52 album. We could make it bigger, but that 21:54 would move all our controls and 21:56 everything down under the fold, and I 21:58 don't want to do that. So, I think just 22:00 having the top of it is 22:02 fine. So, after the image, the 22:10 info, all we need to do for that is 22:12 align it to the center. 22:15 So text 22:18 align 22:20 center and the artist um I actually want 22:24 to be bold. All right. So we can 22:29 go and say audio 22:33 info 22:35 artist write an 22:37 article 22:41 artist say font 22:44 weight 22:46 bold. Okay. So, the 22:53 cover is going to have a width of 22:57 100%. And this actually should probably 23:00 be up with the image 23:03 class. So, right under audio image, 23:06 we'll have cover with 23:08 100% and zindex 23:12 one. All right. So next we have the 23:16 volume. Okay, which is an input. So 23:20 input 23:22 id 23:25 volume. All right, so I want the width 23:28 to be 23:31 95%. I'm going to have a margin left of 23:38 2%. Okay, just to get it in the middle. 23:43 uh 23:46 background will be 23:50 gray. It's going to have a height of 23:53 just one pixel and then a margin 23:57 bottom of 20 24:01 pixels. All right. Now, in order to get 24:05 it to use an image instead of this, we 24:07 have to do 24:08 um we have to use WebKit appearance. All 24:12 right. So, I'm going to put that like 24:14 right here. So, 24:18 WebKit appearance 24:22 um is going to be none. And set that to 24:27 important. And I believe there's a few 24:29 browsers that um this will have to look 24:32 like this. we can't get the the the knob 24:34 image. All right. It took me a while to 24:36 figure this out because I've actually 24:38 never done that. Never tried to style 24:40 one of those before. All right. So then 24:43 under 24:45 here, we're going to say input 24:48 volume and then uh I guess a pseudo 24:52 selector called 24:55 WebKit slider 24:59 thumb. Okay. I'm not exactly sure why we 25:02 use this uh but I just know we need to 25:04 use it if we want that knob and we need 25:07 this as well in here. All right. And 25:10 then we can put our image in. So 25:13 background 25:15 uh will be 25:18 URL and let's see the image folder we 25:23 want 25:25 knob.png. And you want to make sure that 25:28 you have a no 25:30 repeat. All right. And then just do the 25:33 height and width of the image, which is 25:34 12 25:37 pixels. All right. So So I think that 25:41 should work. Let's check it out. All 25:44 right. 25:48 Good. All right. So volume's all set. 25:50 Now we can get to the buttons. 25:56 Okay, this is just the button area in 25:58 general is going to have a width of 26:02 90%. We want it to display as a 26:08 block. Uh 26:11 margin, we'll do 15 on the top and 26:15 bottom and then auto on the left and 26:17 right. We're going to give it a little 26:20 margin on the left just to push it to 26:22 the middle uh of 23 pixels and then just 26:26 set the overflow to 26:31 auto. Okay. So now we can actually uh 26:34 put the buttons in. The buttons are 26:36 going to be background images. 26:39 So button ID of 26:45 play have a width of 26:49 90% 26:51 display block 26:56 um 26:58 margin. I'm sorry this is the wrong 27:02 code. We need a width of 70 pixels. 27:06 Okay, which is the width of the play 27:07 button and also height will be 70 27:12 pixels. And then the background 27:20 image, what is it? It's 27:25 play.png. Okay, we want to say no 27:28 repeat. And we also want to float it to 27:32 the left. 27:39 All 27:41 right. And now what I'm going to do is 27:43 just copy 27:48 this. Paste it. Okay. So after play, 27:52 we'll have the pause 27:56 button. So we just want to change the 27:58 name of the image. 28:02 Got play, pause, 28:11 stop, and then 28:22 previous. Okay. Previous 28:26 uh float lab. We want to give previous 28:29 uh a margin top. 28:32 of 15 28:35 pixels. All right. And then 28:45 next. So next uh will also have a margin 28:50 top, but it's going to float to the 28:55 right. Okay, they all float to the left 28:58 except for next. All right. So, let's 29:00 take a look at 29:02 this. And it's messed up because the the 29:06 pause and play button are both 29:08 displayed. When we do our JavaScript, uh 29:11 that won't happen. It'll show play. If 29:13 you click play, then pause will show and 29:16 play will hide. All right. So, don't 29:18 worry about this right 29:20 now. Okay. So, under the buttons, we'll 29:22 have our 29:23 playlist. Okay. Okay. So, remember we 29:25 have an ID called 29:30 playlist. All right. And we're just 29:32 going to set list 29:34 style to 29:37 none. And then add padding of 10 pixels 29:41 on all 29:43 sides. All right. So now the 29:47 playlist list 29:49 item, we want to change the cursor to a 29:53 pointer. when we hover over 29:56 it. All right. And we're going to have a 30:00 margin of five 30:04 pixels. All right. Now, the active 30:08 playlist, let me just copy that. And 30:12 playlist 30:18 liactive. We'll have a font 30:21 weight of 30:23 bold and we'll give it a padding of 30:27 three pixels and a background. Okay, 30:30 this is so we know which song is 30:36 playing. Uh let's see. I missed some 30:41 code for the progress bar, I believe. 30:43 Yeah, we didn't do that. the progress 30:49 bar. So let's see progress bar and the 30:54 duration. Okay. So next 30:58 uh we'll say 31:00 progress 31:03 bar. All right. This is going to have a 31:05 width of 31:08 80% and a margin 31:11 left of 2%. 31:17 And let's see, a margin 31:21 bottom of 20 pixels and then a margin 31:26 top of 9 31:29 pixels and the 31:32 height 10 31:35 pixels. And then we have our 31:38 background which will be a URL. 31:45 And the image is 31:47 called 31:51 progressbg.png. And we want to make sure 31:53 that it's no 31:56 repeat. All right. And then finally, 31:58 we're going to float 32:05 left. All right. So, we still can't see 32:09 it. And I think that I named it wrong. I 32:13 think this Yeah, this should be progress 32:15 bar lowercase 32:17 B. All right. So, there's the progress 32:20 bar. Now, we want to do the progress, 32:23 which is going to be the the blue 32:26 background in the progress 32:34 bar. Okay. So, we want to do our 32:37 background. Let me just copy this. 32:43 and it's called progress 32:48 png. Okay. Height also 10 32:52 pixels. And then we want to 32:55 display an inline 33:01 block. Okay. So, if we reload, uh, 33:04 you're not going to see anything 33:06 because we're only going to see it when 33:09 the song plays and it moves 33:12 up. So, next is the 33:15 duration. All right. So, uh, that'll be 33:18 the numbers, the time on the side of the 33:20 progress bar. 33:25 So 33:27 duration is going to have an absolute 33:33 position. Okay. So top 33:37 zero 33:39 right 10 pixels and we'll give it some 33:43 padding of four top bottom eight left 33:47 right and then set the 33:52 background to 33:55 black and set a border radius let me 33:58 just copy that from up 34:05 Here. Where is 34:12 it? Okay. 10 10 pixels is 34:17 good. Fix that. Okay. So, that's the 34:22 duration. And actually, I want that to 34:24 be five pixels. 34:30 And one thing we did forget is the 34:32 actual tracker ID which holds all that 34:35 stuff right here. Holds the progress bar 34:38 and the 34:40 duration. Oops. Where am I 34:46 going? Okay. So 34:51 tracker and for this all we want to do 34:54 is set the 34:55 position to relative because in order to 34:59 to use the absolute positioning of the 35:01 duration uh its container needs to be 35:04 positioned 35:05 relative. And then I'm just going to set 35:08 the width to 35:10 100%. And that should do it. All right. 35:12 So let's save that. Go back. 35:16 Reload. and our duration has no numbers 35:19 in it. Um, and also this kind of messes 35:22 it up a little. So, don't worry about 35:24 it. Uh, this is looking how it should at 35:27 this point. Um, I'm going to stop here 35:30 and in the next video we'll start to do 35:33 do the JavaScript and make this thing 35:36 come to life.
1:38:36
1:40
7:18
43:53