我正在帮助学生完成他们的工作,我们有一个使用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>
最佳答案
这是工作示例,它将在单击按钮时使所有音频静音:
<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>
关于javascript - 需要帮助静音多个音频文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59207760/