Menu
What's the best way to mute a HTML5 audio element? I don't want the browser's custom controls, so I've been looking at the javascript instead. Unfortunately it just doesn't seem to work for me :( I'm undoubtedly doing something very wrong.
<audio id="background_audio" autoplay="autoplay">
<source src="static/audio/clip.ogg" type="audio/ogg" />
<source src="static/audio/clip.mp3" type="audio/mpeg" />
</audio>
<a href="#" onclick="document._video.muted=true; return false">mute sound</a>
Still getting my head around this. Thanks!
676
In this article, we mute the audio by using the muted attribute in the <audio> tag of the HTML document. It is used to define that the audio should be muted on the webpage.
You can create your own controls with plain old HTML, CSS, and JavaScript. The element has methods like play() and pause() and a read/write property called currentTime. There are also read/write volume and muted properties. So you really have everything you need to build your own interface.
To mute all sound in a page with JavaScript, we can set the muted property of each audio element to true . to add the audio elements. We select all the audio and video elements with querySelectorAll . Then we loop through each element in elems and set the muted property of it to true to mute the audio.
The muted attribute is a boolean attribute. When present, it specifies that the audio output should be muted.
This should work:
document.getElementById('background_audio').muted = true; Demo: http://jsfiddle.net/mattball/sVwXH/ (no jQuery)
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
