Transcript from the "Audio Player Overview" Lesson
>> 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: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: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?
>> 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?
>> The colors are completely wrong, we need to swap that around. There's a lot of things to consider here.
[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?