html5 audio controls

i’m wondering how you can override the controls of the html5 audio tag, without using a 3rd party script? i dont like how enabling the controls will lead to 6 different designs for the various browsers.

What do you mean by “without using 3rd party script”? In order to have the controls show up, you have to explicitly tell the browser to do so…


<audio controls />

…so if you don’t want those disparate controls showing up, don’t set the “controls” attribute.

But if you want to then put your own controls in there, controls that are the same in every browser, you’ll have to use JavaScript. And if you don’t want to use 3rd party scripts, you’ll have to build the JS yourself.

Are you sure you don’t want to use something like audio.js? You’ll save yourself a lot of headaches.

thanks this is helpful. by third party i meant something like jplayer or the cool one you linked to (never saw that before).

i am kind of curious about what kind of javascript is involved though. skinning some players can be a lot of work, and i just wondered if making it yourself can save that headache.

In my opinion, it’s not worth it, because there are so many different bugs and edge cases you’d have to allow for.

Also, if you choose a good HTML-based <audio> player (such as, ahem, audio.js), you can style the player however you’d like just using simple CSS.