In this section, we'll cover how to customize the controls of our audio player. As we've seen in our video player discussed in the previous chapter, it can be fairly useful to create a custom experience. For this book, we've kept it fairly simple, and we will continue following that pattern so that we can discuss the principles and get you started quickly. For audio, customizing the controls is even simpler, especially since we do not have control over the volume, which is discussed further in the following section.
First, let's remove the controls attribute from our audio element. When we do this, you should have the following markup:
<audio preload>
<source src="../assets/sample1.mp3" type='audio/mpeg; codecs="mp3"'/>
<p>Audio is not supported in your browser.</p>
</audio>Now we need to add custom controls to the markup. We can continue doing the same thing we did in the previous chapter...