需要帮助静音多个音频文件

Question

I'm helping a student with their work, and we have a mute button working using IDs, but of course that only mutes one thing at a time. We want to be able to shut off ALL audio playing at once. If I try to use anything other than getElementById in my script, it just breaks and doesn't mute at all. For example, using "getElementbyClassName("soundsnip")" doesn't mute anything. The only thing successfully working is muting one thing only with "getElementById". Can anyone help us be able to mute all of these elements with one button?

Here's the working code we have now, muting only one element:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">+</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">white noise 
        <br>
        <br>
    <audio loop controls class="soundsnip" id="white1">
  <source src="whitenoise.wav" type="audio/wav"></audio></a>
    <a href="#">mic rubbing
     <br>
        <br>
    <audio loop controls class="soundsnip" id="mic1">
  <source src="micrub.wav" type="audio/wav"></audio></a>
    <a href="#">mic scratching
     <br>
        <br>
    <audio loop controls class="soundsnip" id="scratch1">
  <source src="micscratch.wav" type="audio/wav"></audio></a>
  </div>
</div>

<button onclick="enableMute()" type="button">Mute sound</button>
<button onclick="disableMute()" type="button">Enable sound</button>

<script>
var aud = document.getElementById("white1");
function enableMute() { 
  aud.muted = true;
} 

function disableMute() { 
  aud.muted = false;
} 

function checkMute() { 
  alert(aud.muted);
} 
</script>

Answer 1

First, select all the audio elements, with document.querySelectorAll() . Then, loop over them. Try something like this.

for (audioEl of document.querySelectorAll('audio')) {
  audioEl.muted = true;
}

As an alternative, you could connect these to a Web Audio API graph and use a GainNode.

Answer 2

Here's working example, it will mute all audio on button click:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">+</button> <div id="myDropdown" class="dropdown-content"> <a href="#">white noise <br> <br> <audio loop controls class="soundsnip" id="white1"> <source src="https://www.milannohejl.cz/subdom/codepen/Shantifax-WeAreAllOne.mp3" type="audio/wav"></audio></a> <a href="#">mic rubbing <br> <br> <audio loop controls class="soundsnip" id="mic1"> <source src="https://www.milannohejl.cz/subdom/codepen/Shantifax-WeAreAllOne.mp3" type="audio/wav"></audio></a> <a href="#">mic scratching <br> <br> <audio loop controls class="soundsnip" id="scratch1"> <source src="https://www.milannohejl.cz/subdom/codepen/Shantifax-WeAreAllOne.mp3" type="audio/wav"></audio></a> </div> </div> <button type="button" id="mute-button">Mute sound</button> <button type="button" id="unmute-button">Enable sound</button> <script> $(document).ready(function() { /*** Mute all ***/ $('#mute-button').on('click', function() { /*** Mute all video and audio on page ***/ $('body video, body audio').each(function() { /*** Do it here globally ***/ $(this).prop('muted', true); }); }); /*** UnMute all ***/ $('#unmute-button').on('click', function() { /*** Un Mute all video and audio on page ***/ $('body video, body audio').each(function() { /*** Do it here globally ***/ $(this).prop('muted', false); }); }); }); </script>