19

I'm wondering if there's a quick and simple way to style the HTML5 audio element to display what I want. I was wondering if you could turn certain controls on and off, but that doesn't seem to be the case.

I do not want a progress/track bar, or to display the time left. I just want a simple play/pause toggle button, and a mute/unmute toggle button.

That's all! Any ideas?

user1380540
  • 734
  • 3
  • 12
  • 26
  • I answered it already. Here's the link. http://stackoverflow.com/questions/19895581/html5-video-controls-mute-button/21500102#21500102 – Darron Park Feb 01 '14 at 15:52

2 Answers2

39

Use this code it 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>
Umar Sid
  • 1,317
  • 1
  • 17
  • 24
7

You could use the Media API and build your own set of controls with the functionality you want. I've written about this: Working with HTML5 multimedia components – Part 3: Custom controls - which shows a video example, but you can just as easily build an audio one.

Kenster
  • 23,465
  • 21
  • 80
  • 106
Ian Devlin
  • 18,534
  • 6
  • 55
  • 73
  • 1
    Link is gone, but available on the way back machine https://web.archive.org/web/20121215060538/http://www.w3.org/TR/html5/the-video-element.html – Allison Dec 29 '15 at 18:03