javascript - 单击按钮时播放音频，然后停止，单击其他按钮时播放新音频

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>