静音/取消静音按钮可发出背景声音

Question

guys. Please explain this to me. I wanted to create a single mute/unmute button for my page. (audio starts automatically) So here the code I used first time:

 <script> var sound = getElementById ('background_sound'); function mute(){ if(background_audio.muted == false){ background_audio.muted = true; } else { background_audio.muted = false; } } </script> 

But it didn't work. So I just removed the first line (I mean this var) and addressed the id directly. And it worked. Now my html looks like this:

 <audio id="background_audio" autoplay="true" loop="loop"> <source src="Audio/flute.mp3"> If you are reading this, it is because your browser does not support the audio element. </audio> <button onclick="mute()"> <i class="fa fa-music"></i></button> 

And javascript like this

 <script> function mute(){ if(background_audio.muted == false){ background_audio.muted = true; } else { background_audio.muted = false; } } </script> 

The question is how can I address Id directly without creating a variable? It works fine though but will I have any problems with the code later? I just thought I need to assign a var this to work. A bit confused.

Answer 1

try this i am sure this will work

 <script>

            function mute(){
              if(document.getElementById('background_audio').muted == false){
                document.getElementById('background_audio').muted = true;
              } else {
                document.getElementById('background_audio').muted = false;
              }

    }
    </script>