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" ...