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

Question

我正在帮助学生完成他们的工作，我们有一个使用ID的静音按钮，但是当然一次只能静音一件事。我们希望能够立即关闭所有音频播放。如果我尝试在脚本中使用除getElementById以外的任何其他功能，它只会中断并且不会完全静音。例如，使用“getElementbyClassName(“soundsnip”)“不会使任何内容静音。成功工作的唯一一件事是仅使用“getElementById”使一件事静音。谁能帮助我们一键将所有这些元素静音？

这是我们现在拥有的工作代码，仅使一个元素静音:

<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

这是工作示例，它将在单击按钮时使所有音频静音:

<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>