<p>HTML has a built-in native audio player interface that we get simply using the element. Point it to a sound file and that’s all there is to it. We even get to specify multiple files for better browser support, as well as a little CSS flexibility to style things up, like giving the audio player a border, some rounded corners, and maybe a little padding and margin. </p> <p>But even with all that… the rendered audio player itself can look a little, you know, plain. </p> <p>Did you know it’s possible to create a custom audio player? Of course we can! While the default player is great in many cases, having a custom player might suit you better, like if you run a podcast and an audio player is the key element on a website for the podcast. Check out the sweet custom player Chris and Dave set up over at the ShopTalk Show website. </p> <p>The audio player fits in seamlessly with other elements on the page, sporting controls that complement the overall design. </p> <p>We’re going to take stab at making our own player in this post. So, put on your headphones, crank up some music, and let’s get to work! </p> <p>The elements of an audio player </p> <p>First, let’s examine the default HTML audio players that some of the popular browsers provide. </p> <p>Blink </p> <p>Firefox </p> <p>Internet Explorer </p> <p>If our goal is to match the functionality of these examples, then we need to make sure our player has: </p> <p>a play/pause button,a seek slider,the current time indicator,the duration of the sound file,a way to mute the audio, anda volume control slider. </p> <p>Let’s say this is the design we’re aiming for: </p> <p>We’re not going for anything too fancy here: just a proof of concept sorta thing that we can use to demonstrate how to make something different than what default HTML provides. </p> <p>Basic markup, styling and scripts for each element </p> <p>We should first go through the semantic HTML elements of the player before we start building features and styling things. We have plenty of elements to work with here based on the elements we just listed above. </p> <p>Play/pause button </p> <p>I think the HTML element appropriate for this button is the element. It will contain the play icon, but the pause icon should also be in this button. That way, we’re toggling between the two rather than taking up space by displaying both at the same time. </p> <p>Something like this in the markup: </p> <p> Audio Player</p>