Audio Player Overview

[00:00:00]
>> The next thing we're gonna work on is skinning an audio player. And there is a lot of work to do where audio players are a concern, you may already know that you can play audio directly inside of your browser and you can use an audio HTML element to do it.

[00:00:16]
In fact If you just drop a MP3 URL inside of your web browser window, you'll see an audio player there, it works just great. We have a little play button, it'll play whatever it is, and it'll have volume associated with it. Now, this is Chrome, if we take a look at other styles, this is how it looks here in Firefox, looks like that kind of completely different.

[00:00:47]
And if we look at it in Safari, it looks even more different [LAUGH]. Okay, and that's because this is the browser's default styling for all of these various kinds of audio elements. It may or may not work with your page design. So, normally what developers will do is they'll build their own audio component for their webpage.

[00:01:11]
Now, and use a little JavaScript by the way to power it. So, we could go through that whole process, and honestly, it'd probably be a whole course by itself. So instead, we're gonna cheat just a little bit. I am pointing you to this great CSS tricks article, about how to create a custom audio player.

[00:01:31]
And if you go through this entire course, it will explain everything to you, explains to, you the various elements of your audio player, it explains the JavaScript API. It explains how to lay things out. And we wind up with, after a very long article, we wind up with a final code pen, which I have forked for you.

[00:01:52]
And, we have this audio player. So if you go into, we're still at practical CSS education. And we are in chapter 4, and we are down at 4D, the audio player. There are links to To that CSS Tricks article, the article describing how that audio player was created and our starting code pen, which is right here, okay.

[00:02:22]
So, already everything is in place, this is the HTML that comes from CSS Tricks, there it all is. This is their CSS, all of this stuff here that we forked in. And we have all of the JavaScript that's down here required to make this thing work, so let us talk.

[00:02:42]
We're gonna start by, coming up with a plan. We have, this was the way the audio player looks, the one that we are starting with. This is what we want it to look like when we're done, [LAUGH] okay. So we have a little bit of changing to do here, don't we?

[00:03:01]
So, can anybody start to identify? What are the kinds of things that we need to think about as we make a change to this particular player. What do we need to think about, what do we need to change?
>> Positioning the elements.
>> The positioning of the elements obviously not quite right, you were gonna say?

[00:03:23]
>> We need to bring in the track and the track number.
>> We have a track and a track number, that is not there on audio player -ish.
>> [LAUGH] right What else?
>> Colors.
>> The colors are completely wrong, we need to swap that around. There's a lot of things to consider here.

[00:03:43]
If you take a look here inside of our code, you take a look inside of the JavaScript. The thing we don't wanna do is we don't wanna break the functionality of our audio player, right? Because this works [LAUGH] and that's a really wonderful thing. So, we wanna be sure to keep it working.

[00:04:03]
[LAUGH] And in order to keep it working, we need to make sure that we don't change elements, that are called for here inside of our JavaScript, right? So our JavaScript has got things like getElementById, playIcon, getElementById, audio player container, getElementById, volume slider, mute icon, right? So that stuff we need to be sure to leave alone in our HTML, because otherwise we'll break our JavaScript make sense, okay.

[00:04:33]
So, that is always what I start with here, what can't I change in the skinning process? And it looks like this particular JavaScript author relied a lot on get element by ID, which is nice. Because that gives us a little bit more freedom with our classes, right? Okay, the other thing is, where do the icons come from, anytime you take a look at something like this, we need to figure out where those icons are coming from.

[00:05:00]
And if you take a look, actually it's right here in the JavaScript, it says it's importing this thing called LottieWeb. And LottieWeb happens to be an icon library with animated icons, so that is where our icons are coming from. So we don't wanna break that either [LAUGH] so, there is our HTML.

[00:05:28]
And this is always a good place to start, right? I've told you this throughout the course, we wanna start by looking at our HTML and starting to make some modifications, that then we can work with for styling purposes. And o again, when we're trying not to break the JavaScript, it's often easy enough to add containers to this.

[00:05:48]
So we can group elements here with like divs, and so forth. But removing elements tends to be tricky, if we remove elements, we may break things all together, right? Make sense, everybody clear on our approach here?