Geek Answers Handbook

HTML5 Sound display plays only pause and mute buttons

I am wondering if there is a simple and easy way to style the HTML5 audio element to display what I want. I was wondering if certain controls can be turned on and off, but that doesn't seem to be the case.

I do not need a progress bar / track or display of the remaining time. I just need a simple play / pause button and a sound / mute button.

It's all! Any ideas?

+7
source share
2 answers

Use this code that will serve your purpose.

<!DOCTYPE html> <html> <body> <audio id="player" src="horse.ogg"></audio> <div> <button onclick="document.getElementById('player').play()">Play</button> <button onclick="document.getElementById('player').pause()">Pause</button> <button onclick="document.getElementById('player').muted=!document.getElementById('player').muted">Mute/ Unmute</button> </div> </body> </html>
+17
source

You can use the Media API and create your own set of controls with the required functionality. I wrote about this: Working with HTML5 Multimedia Components - Part 3: User Controls - which shows an example video, but you can create audio just as easily.

+3
source

More articles:


All Articles