Muting a HTML5 audio element using a custom button

javascript html html5-audio
Chuck Le Butt picture Chuck Le Butt · Jun 22, 2011 · Viewed 54.4k times · Source

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!

Answer

Matt Ball picture Matt Ball · Jun 22, 2011

This should work:

document.getElementById('background_audio').muted = true;

Demo: http://jsfiddle.net/mattball/sVwXH/ (no jQuery)

Related questions

How to play audio?

I am making a game with HTML5 and JavaScript. How could I play game audio via JavaScript?

Read More
Sound effects in JavaScript / HTML5

I'm using HTML5 to program games; the obstacle I've run into now is how to play sound effects. The specific requirements are few in number: Play and mix multiple sounds, Play the same sample multiple times, possibly overlapping playbacks, Interrupt …

Read More
HTML5 record audio to file

What I ultimately want to do is record from the user's microphone, and upload the file to the server when they're done. So far, I've managed to make a stream to an element with the following code: var audio = document.…

Read More