html5音频多播放按钮

html5 audio multiple play buttons

本文关键字：按钮 播放 多播 音频 html5      更新时间：2023-09-26

我试图显示多个播放按钮，所以如果你点击播放一个，音乐就会开始，但如果你点击第二个播放按钮则音乐会播放第二个。现在，如果有一个正在播放，我点击第二个，它就会停止，然后我必须再次点击。

当我在音乐播放时点击另一个播放按钮时，我如何在不停止的情况下做到这一点

这是一个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');
        }
    });    
});

您正在为同一音频元素分配多个播放按钮。当你点击第二个时，音频正在播放，所以当它再次被点击时，它会暂停并播放（正如你的点击处理程序所说）。

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

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/

相关文章：