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

9 浏览
0 Comments

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

我在单个页面上有许多audio元素，我希望一次只播放一个元素。也就是说，如果一个audio元素正在播放，我点击另一个元素的播放按钮，前一个audio元素应该暂停。

我在另一个问题中找到了一个使用jQuery代码来实现这一功能，但是它使用图像作为播放/暂停控件。而我是使用内置的controls='controls'属性来控制audio元素的播放/暂停。在我的情况下，是否可以使用jQuery来控制audio元素的播放/暂停功能？

以下是我的HTML代码：

    
#1 前奏 - The Oath

    
    
#2 A State Of Trance Year Mix 2013

以下是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代码对我来说似乎没有起作用。

0

3 答案

0 Comments

问题的出现原因是原始解答中的代码无法正常工作，播放事件从未触发。解决方法是对原始解答进行修改。

在HTML中，添加以下代码：

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

在JavaScript中，添加以下代码：

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

通过这种方式进行修改后，问题得到解决。

0
0 Comments

只播放一个HTML音频元素的原因及解决方法

在网页中，有时我们希望只能播放一个HTML音频元素，而不是多个音频同时播放。下面是一个使用纯JavaScript的解决方案，不需要依赖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);
});

一些需要注意的事项：

通过以上的解决方案，我们可以确保在网页中只播放一个HTML音频元素。

0
0 Comments

在这段代码中，当播放一个HTML音频元素时，其他的音频元素会被暂停。然而，在某些情况下，这段代码只能正常工作一次，之后就无法正常播放和停止其他音频元素。

造成这个问题的原因是，当第一个音频元素播放时，代码会遍历所有的音频元素，并将它们暂停。但是，当第二个音频元素播放时，代码又会遍历所有的音频元素，并将它们暂停，包括第一个音频元素。因此，第一个音频元素无法再次播放，也无法停止第二个音频元素的播放。

要解决这个问题，可以使用jQuery的each()方法来遍历所有的音频元素，并使用not()方法来排除当前播放的音频元素。这样，只有非当前播放的音频元素会被暂停。

下面是修复后的代码：

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

现在，当播放一个音频元素时，其他音频元素将会被暂停，而当前播放的音频元素可以正常播放和停止。这个修复可以确保一次只播放一个HTML音频元素。

0