26

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!

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
  • 1
    possible duplicate of [How to mute an html5 video player](http://stackoverflow.com/questions/6376450/how-to-mute-an-html5-video-player) – Naftali Jun 22 '11 at 15:32
  • Possible duplicate of [How to mute an html5 video player](https://stackoverflow.com/questions/6376450/how-to-mute-an-html5-video-player) – m7913d May 25 '17 at 11:21
  • It's not a duplicate. The other question is about jQuery. This is about JS. – Chuck Le Butt Nov 26 '20 at 19:49

1 Answers1

60

This should work:

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

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

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • 1
    You can also add muted="true" to your audio element in plain js, and muted={true} for React :) Tho this isn't for a custom button - it will be helpful to someone. – zero_cool Jul 08 '17 at 19:47