Question

当用户点击按钮时，它会播放音频，但是当他们点击另一个音频停止的按钮时，它会播放该按钮的音频，依此类推。在页面加载的那一刻，我也有自动播放的背景音乐，我试图弄清楚当按下一个新按钮时如何停止音乐播放，然后音乐播放当前它们重叠。任何帮助将不胜感激。

加载背景音乐代码：

<audio autoplay="autoplay" class="bondAudio">
     <source src="audio/Bond.mp3" type="audio/mpeg">
     Your browser does not support the audio element.
</audio>

按钮点击音频播放代码：

<script>
    $(document).ready(function() {
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', 'audio/Dr-No.mp3');
        audioElement.setAttribute('play', 'play');
        //audioElement.load()

        $.get();

        audioElement.addEventListener("load", function() {
            audioElement.play();
        }, true);

        $('#blockLink1').click(function() {
            audioElement.play();
        });
    });
</script>

Answer 1

为什么在使用jQuery时使用纯js创建元素？

<script>
    $(document).ready(function() {
        var audioElement = $('<audio></audio>');

        audioElement.attr('src', 'audio/Dr-No.mp3');
        audioElement.attr('play', 'play');
        //audioElement.load()

        $.get(); // ?

        audioElement.on("load", function() {
            audioElement.get(0).play();
        }, true);

        $('#blockLink1').click(function() {
            $('audio').each(function() {
                this.stop();
            });
            audioElement.get(0).play();
        });
    });
</script>

单击按钮时播放音频然后停止，单击不同按钮时播放新音频

1 个答案: