Javascript 一次播放一个HTML音频元素

我在一个页面上有许多

音频

元素，我只想一次播放一个元素。也就是说，如果一个

audio

元素正在播放，而我在另一个元素上单击play，则上一个

audio

元素应该暂停

我从另一个问题中找到了一个jQuery代码来执行此操作，但它使用图像作为播放/暂停控件。我正在为

audio

元素使用内置的

controls='controls'

属性。在我的例子中，是否可以使用jQuery控制

音频

元素的播放/暂停功能

这是我的HTML代码

<div>
    <p class="song"><h3><strong>#1 Intro - The Oath</strong></h3><p>
    <audio class="playback" src=http://geo-samples.beatport.com/lofi/5005876.LOFI.mp3 controls='controls' preload="none">
        <I>Your browser does not support the audio element.</I>
    </audio>
</div>

<div>
    <p class="song"><h3><strong>#2 A State Of Trance Year Mix 2013</strong></h3></p>
    <audio class="playback" src=http://geo-samples.beatport.com/lofi/5005933.LOFI.mp3 controls='controls' preload="none">
        <I>Your browser does not support the audio element.</I>
     </audio>
</div>

---

jQuery代码似乎对我不起作用。

假设您停止和暂停曲目的语法正确（我对

音频元素一无所知），您应该可以执行以下操作：

$(".playback").click(function(e) {

  // pause all other tracks
  $('.audio').each(function () {
    var song = this;
    if (!song.paused) { song.pause(); }
  });

  // play the audio associated with this element
  this.play();

});

香草JS解决方案
这里有一个不需要jQuery的解决方案

function onlyPlayOneIn(container) {
  container.addEventListener("play", function(event) {
  audio_elements = container.getElementsByTagName("audio")
    for(i=0; i < audio_elements.length; i++) {
      audio_element = audio_elements[i];
      if (audio_element !== event.target) {
        audio_element.pause();
      }
    }
  }, true);
}

document.addEventListener("DOMContentLoaded", function() {
  onlyPlayOneIn(document.body);
});

function onlyplaynein（容器）{
container.addEventListener（“播放”），函数（事件）{
audio_elements=container.getElementsByTagName（“音频”）
对于（i=0；i

需要注意的一些事项：


因为它侦听父元素上的事件，而不是
音频
元素本身上的事件，所以可以在加载页面后添加或删除这些事件，并且仍然可以工作
它会在教室里观看比赛
更多的媒体活动正在进行中
正在侦听“DOMContentLoaded”
对LostInComputer的答案稍加修改

在HTML中编写：

<audio controls onplay="pauseOthers(this);" >
                    <source src="SourcePath">

                </audio>


功能控制播放（e）{
document.querySelectorAll（'.playback'）.forEach（item=>{if（item.id！=e.target.id）item.pause（）；}）；
}
document.queryselectoral（'.'）.forEach（item=>{item.addEventListener（“play”，event=>{controlplay（event）}）}）；
角度：

<audio (play)="audioPlay($event)" controls preload="none">
    <source [src]="url" type="audio/mpeg">
 </audio>    


audioPlay(e) {
 let eAudio = this.domService.getDocument.getElementsByTagName('audio')
 if (eAudio && eAudio.length > 0) {
  for (var i = 0; i < eAudio.length; i++) {
    if(e.target !== eAudio[i]){
      eAudio[i].pause(); 
    }
  }
}


音频播放（e）{
让eAudio=this.domService.getDocument.getElementsByTagName（'audio'））
如果（eAudio&&eAudio.length>0）{
对于（变量i=0；i

}
用户能否随机播放页面上的任何音频元素？如果是这样的话，只暂停上一个音频是不起作用的。是的，用户可以随意播放任何元素。谢谢。由于某些原因，@LostInComputer答案对我不起作用，游戏事件从未启动，所以请以这种方式工作。
<audio controls onplay="pauseOthers(this);" >
                    <source src="SourcePath">

                </audio>

function pauseOthers(ele) {
                $("audio").not(ele).each(function (index, audio) {
                    audio.pause();
                });
            }

<script>
function controlplay(e) {
  document.querySelectorAll('.playback').forEach(item => { if(item.id != e.target.id) item.pause(); });
}
</script>

<script>
document.querySelectorAll('.').forEach(item => { item.addEventListener("play", event => { controlplay(event) })});
</script>

<audio (play)="audioPlay($event)" controls preload="none">
    <source [src]="url" type="audio/mpeg">
 </audio>    


audioPlay(e) {
 let eAudio = this.domService.getDocument.getElementsByTagName('audio')
 if (eAudio && eAudio.length > 0) {
  for (var i = 0; i < eAudio.length; i++) {
    if(e.target !== eAudio[i]){
      eAudio[i].pause(); 
    }
  }
}