Question

我的页面中有许多不同的音频元素，作为叙述网站的一部分。每个音频元素都有一个ID，因此可以在某些点调用它。任何时候都不会有多个声音播放。但我需要的是页面的静音按钮，据我所知，我不能使用id，因为我需要它们取消静音回到最后的声音而不是将它们全部取消静音（如果这样做有意义的话）。是否有一种简单的方法可以将所有页面音频静音，然后再次取消静音而不会触发所有音频播放？

以下是我的代码，但它显然不起作用，我不知道最好的方法是：

HTML：

    <audio id="streetsound" preload="auto" autoplay loop>
    <source src="assets/audio/1street.mp3" type="audio/mpeg">
    </audio>

    <audio id="seasonsound" preload="auto" loop>
    <source src="assets/audio/2seasons.mp3" type="audio/mpeg">
    </audio>

    <audio id="snowsound" preload="auto" loop>
    <source src="assets/audio/3snow.mp3" type="audio/mpeg">
    </audio>


 <div id="soundicon" style="display: none;">
    <a href="#" id="muteaudio"><img src="assets/images/sound.png" alt="cup" style="border:0;"></a>
    </div>

Jquery的：

$(function(){
    $('#muteaudio').click(function() {
       $('audio').pause("");

    });
});

Answer 1

试试吧。

 $('#muteaudio').click(function() {
     $('audio').each(function() {
            $(this).pause();
        });
    });

Answer 2

$('#muteaudio').click(function () {
    $('audio').each(function () {
        $(this).pause();
    });
});

应该工作 - 基于How to mute/unmute sound of an audio using javascript

使用.each()遍历所有匹配的元素，.pause()显然会暂停<audio>标记。

使用Jquery将页面上的所有音频静音

2 个答案: