Question

我试图显示多个播放按钮，因此如果您点击播放按钮，则音乐会启动，但如果您点击第二个播放按钮，则音乐将播放第二个播放按钮。目前，如果正在播放，我点击第二个，它会停止，然后我必须再次点击它。

当我在播放音乐时点击另一个播放按钮

时如何在不停止的情况下执行此操作

这是一个jsfiddle

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

这是一个小提琴：http://jsfiddle.net/eD9K3/1/

html5音频多个播放按钮

1 个答案: