CODEWITHSUNDEEP
javascriptjqueryhtmlaudiovideo
Gerwin
Gerwin

Reputation: 1612

Toggle mute audio of video on click

I'am trying to mute the audio of a video on click, but for some reason it won't mute..

html:

<video src="background/background1.mp4" autoplay="autoplay" loop="loop" id="background"> </video>

        <img src="button/audio_on.png" id="audio"/>

jquery/javascript solutions I have tried:

$('#audio').click(function() {
         if( $("#background").prop('muted', true) ) {
              $("#background").prop('muted', false);
              alert('music paused');
          } else {
              $("#background").prop('muted', true);
              alert('music playing');
          }
        });

Note: It does alert 'music paused' but never alerts 'music playing'

second method I've tried (note: it does change the img source):

 //change music icon
            $("#audio").on('dblclick', function(){
                $("#audio").attr("src","button/audio_on");
            document.getElementById("#background").volume = 1;


            });

                $("#audio").on('click', function(){
             $("#audio").attr("src","button/audio_off");
                    document.getElementById("#background").volume = 0;

            });

Does anyone know why it won't mute the audio of my video?

Upvotes: 1

Views: 3184

Answers (1)

M Zeinstra
M Zeinstra

Reputation: 1981

Try using the following code to toggle the audio of your video: 

   $("#audio").click( function (){
       $("#background").prop('muted', !$("#background").prop('muted'));
   });

Upvotes: 2

Related Questions