Audio Player Markup

[00:00:00]
>> So the first thing that we'd like to do is we'd like to substitute our audio track for the one that's here. So, if you play this audio right now, it's this weird new age kind of thing. That's so not magenta line, right? So, our audio track is right here in the comment at the start of the HTML If you copy that URL you'll see here on line 8, it's the second line of the HTML there is an audio element here.

[00:00:30]
If you're not familiar with the audio element this is an API built right in the HTML then we'll play audio files. But it's gonna play them with that default browser sort of look. So let us just drop in our correct URL for our audio track. And now when you play it, it sounds more like Magenta Lime.

[00:00:53]
Finest royalty-free music that money can buy. So there we go. All right, the next thing I wanna do is if you take a look at some of the elements that we have here on the page, we have things that we can group together. So if we review to our design here, how might we lay this out without thinking about our current HTML or anything else, how might we lay this out?

[00:01:23]
>> You want the play button in a row, and then pretty much everything else in another row.
>> You might have the play button, right? That's gonna be in one row, along with probably bombshell looks and track seven, right? The name of the song and the track number and then in another row, we're gonna have what

[00:01:42]
>> Song and the volume.
>> We're gonna have the sort of that slider so we can fast forward through the song and the slider for the volume with that icon, right. So we probably want to put in some groupings for those as we put this together so let's take a look at our HTML and see if we can understand what's going on here.

[00:02:01]
So clearly we have a div with an audio player container that goes all the way around this, awesome then we have our next line is the actual audio track, awesome. Then we have this audio player ish a paragraph, we have the button that's called the play icon. And then we're into the time, right that time, the slider and the time.

[00:02:26]
So anybody want to take a guess at what's going on here? We have this thing called play icon what is that? That's the play button right here yeah then it says current time where is that?
>> It's the time slider.
>> This end of the time slider okay remember it says 00 here that's what it starts at

[00:02:56]
>> But because I played the song, right, the number here may be different JavaScript's updating that, right? Okay, then we have our range slider, which is what?
>> The thing you just moved.
>> The thing I just pulled right here, yeah. And then we have a duration it's also set to 0.

[00:03:17]
Where's that?
>> The end.
>> That's the end right here. And remember the numbers different because JavaScript. Yeah? Okay. Then we also have down here an output. Says 100, yeah? Okay, that's this number here. What's this next thing?
>> Volume.
>> Volume slider, that's this actual slider here.

[00:03:42]
And then we have our mute icon, right? Because we can mute it, or we can play it, right? Okay, so given that, how should we group together? We wanna have on one particular row we just said we wanna have the words bombshell looks a Play icon and the words track seven.

[00:04:04]
What should we start with here on the screen in terms of grouping those, anyone have any ideas?
>> We want the sliders to be on the same row?
>> We definitely want the sliders to be on the same row. Yeah, so what would you suggest them what would be some elements you would group first the sliders.

[00:04:31]
>> Maybe in this ad or something to give them the same class, or I don't know some kind of div.
>> How about this? Let me let me rephrase that question. What line numbers would you want to group together?
>> Gotcha. 15 sit the volume slider and the 12, the range slider.

[00:04:54]
>> Right, yeah so lines 14, 15, and 16, that's our volume thing, right? So maybe we should group those. So we're gonna call this div with a class of volume, because we are super creative that way and /div. Okay, so we know that's our volume slider, all right?

[00:05:18]
Does anybody have another group that's maybe kind of obvious that we might want to put in place?
>> Maybe a navigation group?
>> A navigation group?
>> Yeah
>> Where? Like a Sikh group.
>> Yeah. So what line numbers are you talking about here in the HTML?
>> 11 12 and 13.

[00:05:44]
>> 11 12 and 13, so that is the like the sort of the place lighter kind of thing, right? So let's put in a div with a class of he play-slider. That's what those things are. /div. Okay, and of course, since we're being very careful about this as we add these elements, you can always go back and hit the play button again and make sure it still works, right?

[00:06:16]
[LAUGH] Because we don't want to break this as we go through. Okay, so that was relatively straightforward. We have a volume group we have a place lighter group. Now we have some words. We have a button that's our Play icon right? And so, what might that match here in this design?

[00:06:42]
That's our play button, right? Maybe these are some words that are already there. Maybe we can add these words, right? Okay, so let's try that. So, let's make a group here. So a div with a class of name hyphen play, because that's what's going on. It's the name of the track and the play button.

[00:07:10]
And we can change the name here. So where it says Audio Player ish. Let's change that, and the name of the track is Bombshell Looks. Then we have our Play icon and then we're gonna add a paragraph after that, and we'll say track 7 because that's what it is.

[00:07:37]
Now obviously we're doing this in a static kind of way where we're just hard coding in the name of the track and all that kind of stuff. Your next project will be how do we come up with a dynamic list of audio files? And whenever you click on the link it's gonna load in here right that is your homework have fun [LAUGH].

[00:07:59]
We are not gonna do that today we are just really focused on laying this out okay all right so it definitely looks a little bit weird. Yeah, but we have to start with good HTML before we can really start laying things out. All right, the last thing I want to do now, we can start collapsing a few things here so we have our bombshell looks play contract seven that corresponds with this bombshell looks Play icon track 7.

[00:08:28]
There's a Div around that, so we can make that into a row. Check, okay, then we have a play slider, right? And we have our volume. So if we look at that, there's our play slider and our volume, right? But they are not in the same row. Those are just free little elements hanging out in space right now, aren't they, right?

[00:08:54]
See how I came up with that? So what do we need to do to make them go on the same row?
>> Flexbox.
>> Well, flexbox or grid, yeah. And what do we need to do to make that happen?
>> Wrap them.
>> They need to have a container, right?

[00:09:09]
We've got to have a container or some kind of parent for them. So let's give them a div with a class of controls, and then a /div after that. So now they're grouped, so name play, we have the three elements that are gonna show up in our first row.

[00:09:32]
Yeah? And then the play slider and the volume are the controls that are gonna show up in the second row. This is really, really super important what I just did here. Do you see how I just sliced and diced that HTML to put everything together so that we could do the layout?

[00:09:48]
It looked absolutely impossible before, didn't it? But now that we have the layout all together like this, and we actually haven't changed the look all that much, now we can start to apply CSS to make it look exactly as we want. Make sense? Awesome. So this is a big take away for you because you'll always be working with other people's code.

[00:10:12]
So you wanna like make these kinds of changes and again, keep testing to make that the functionality still works, okay?