O'Reilly logo

HTML5 iPhone Web Application Development by Alvin Crespo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Customizing HTML5 audio controls

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.

Creating custom media controls

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required