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

Question

我有一个播放广播电台的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等设备上,您可以控制从网页外部播放的音频(例如双击主屏幕并单击播放/暂停).假设音频正在播放,应用程序外部我决定暂停流.当我返回实际的网络应用程序时,"暂停"按钮仍会显示并有效地执行任何操作,直到您点击两次以恢复流.应该真正发生的是暂停按钮返回'播放',所以这看起来很自然.

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

Answer 1

这是来自W3C for HTML5视频的演示/测试页面,但我相信您的相关事件应该与音频相同http://www.w3.org/2010/05/video/mediaevents.html

所以你可以这样做:

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

然后为播放事件做同样的事情.

希望有所帮助