javascript - html5音频多个播放按钮

Question

我试图显示多个播放按钮，所以如果你点击播放一个，然后音乐开始，但如果你点击第二个播放按钮，那么音乐将播放第二个。目前，如果一个正在播放并且我单击第二个，它会停止，然后我必须再次单击它。

当我在播放音乐时单击另一个播放按钮时，我该如何做到这一点而不停止

这是一个jsfiddle

http://jsfiddle.net/eD9K3/

$(document).ready(function(){

window.player = document.getElementById('player');
    $('.play').click(function(){
        if (player.paused) {
            player.play();
            $('.play').html('Play');
            $(this).html('Pause');
        } else {
            player.pause();
            $('.play').html('Play');
            $(this).html('Play');
        }
    });    
});

Answer 1

您将多个播放按钮分配给同一个音频元素。当您单击第二个音频时，音频正在播放，因此它会在再次单击时暂停并播放(如您的单击处理程序所述)。

制作三个不同的音频元素，每个按钮一个，并分配每个播放按钮的单击处理程序以分别暂停/播放它们。

for(var i = 0; i < $playButtons.length; i++) {
    var playButton = $playButtons[i];
    var player = $players[i];

    $(playButton).click(onPlayClick.bind(null, playButton, player));  
}   

这是一个 fiddle : http://jsfiddle.net/eD9K3/1/