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

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>