一次播放一个 HTML 音频元素

Question

我在一个页面上有许多 audio 元素，我想一次只播放一个元素。也就是说，如果一个 audio 元素正在播放并且我在另一个元素上单击播放，则前一个 audio 元素应该暂停。

我从另一个问题中找到了一个 jQuery 代码来执行此操作，但它使用图像作为播放/暂停控件。我正在使用 audio 元素的内置 controls='controls' 属性。就我而言，是否可以使用 jQuery 来控制 audio 元素的播放/暂停功能？

这是我的 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 代码

$(document).ready(function() {
    var curPlaying;

    $(function() {
        $(".playback").click(function(e) {
            e.preventDefault();
            var song = $(this).next('audio')[0];
            if(song.paused){
                song.play();
                if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
            } else { song.pause(); }
            curPlaying = $(this).parent()[0].id;
        });
    });
});

jQuery 代码似乎不适合我。

Answer 1

<script>
var nowplaying = null;

// Pause and reset playing audio before starting new selection  
function pauseRunningAudio(id) {        
    if ( nowplaying != null && nowplaying != id) {
        var x = document.getElementById(nowplaying); 
        x.pause();
        x.load();   
    }
    nowplaying = id;
}
</script>

<!-- id and function value must be the same -->
<audio controls onplay="pauseRunningAudio('song1')" id="song1">
    <source src="Bohemian Rhapsody.mp3" type="audio/mpeg">
</audio>

<audio controls onplay="pauseRunningAudio('song2')" id="song2">
    <source src="November Rain.mp3" type="audio/mpeg">
</audio>

<audio controls onplay="pauseRunningAudio('song3')" id="song3">
    <source src="Smoke on the Water.mp3" type="audio/mpeg">
</audio>

Answer 2

角度：

<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(); 
    }
  }
}

}

Answer 3

<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>

Answer 4

对 LostInComputer 的回答稍作修改

在您的 HTML 中写入：

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

                </audio>

在 Js 中写：

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

Answer 5

原版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);
});

注意事项：

• 由于这会侦听父元素上的事件，而不是 audio 元素本身上的事件，因此可以在页面加载后添加或删除它们，它仍然可以工作。
• 它在capture phase 中监视播放事件，因为play events don't bubble。
• 更多媒体活动described here on MDN。
• 监听“DOMContentLoaded”should work for most browers。

Answer 6

$(function(){
    $("audio").on("play", function() {
        $("audio").not(this).each(function(index, audio) {
            audio.pause();
        });
    });
});

See sample at JSFiddle

Answer 7

假设您停止和暂停曲目的语法是正确的（我对 audio 元素一无所知），您应该能够执行以下操作：

$(".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();

});