javascript – 一次播放一个HTML音频元素

我在一个页面上有很多音频元素,我想一次只播放一个元素.也就是说,如果正在播放一个音频元素,并且我在另一个元素上单击播放,则前一个音频元素应该暂停.

我从另一个问题中找到了一个jQuery代码来执行此操作,但它使用图像作为播放/暂停控件.我正在使用音频元素的内置controls =’controls’属性.在我的情况下,是否可以使用jQuery来控制音频元素的播放/暂停功能？

<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代码似乎对我不起作用.

解决方法

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

See sample at JSFiddle

javascript – 一次播放一个HTML音频元素

解决方法

猜你在找的JavaScript相关文章