Jquery 如何检测HTML5音频播放/暂停状态是否已在网页外更改？

我有一个web应用程序，可以播放电台的HTML5音频流。我使用jQuery播放/暂停音频并切换播放/暂停按钮，如下所示：

var playerStream = document.getElementById('player-stream');
$('section.player').hammer().on('tap','button.toggle-stream', function(event){
    if (playerStream.paused) {
        playerStream.play();
        $('button.toggle-stream').attr('data-icon','s');
    }   
    else {
        playerStream.pause();
        $('button.toggle-stream').attr('data-icon','p');
    }
});

这一切都很好。但是，在iPhone和iPad等设备上，您可以从网页外部控制音频播放（例如双击主屏幕并单击播放/暂停）。假设音频正在播放，从应用程序外部我决定暂停流。当我返回到实际的web应用程序时，“暂停”按钮仍然显示，并且实际上什么也不做，直到你点击两次以恢复流。真正应该发生的是暂停按钮返回到“播放”状态，因此这似乎是一件很自然的事情

---

如何检测音频播放/暂停状态的变化并将其反映回应用程序？

这是W3C针对HTML5视频的演示/测试页面，但我相信您的相关事件应该与音频相同

所以你可以这样做：

$('audioplayer').on('pause', function() {
    if (playerStream.paused) {
        playerStream.play();
        $('button.toggle-stream').attr('data-icon','s');
    }   
    else {
        playerStream.pause();
        $('button.toggle-stream').attr('data-icon','p');
    }
}

然后在比赛中也这样做

---

希望这有帮助

以下是我一直在使用的一个脚本，用于我的私人互联网流：

$(document).ready(function() {

    var player = "#webplayer";
    var button = "#webplayer_button";

    $(button).click(function() {
        if ($(player)[0].paused) {
            $(player).attr('src', 'http://www.whateverurl.com/stream.mp3');
            $(player)[0].play();
        } else {
            $(player)[0].pause();
            $(player).attr('src', 'media/silence.ogg');
        }
    });    
});

该脚本的新增功能是加载一个小的

OGG

文件，当播放器暂停时，该文件只包含静音。当播放器稍后启动时，它将重新加载

URL

，清除播放器的缓冲区