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

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>