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

我有一个播放广播电台的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 HTML5video的演示/测试页面，但我相信音频的相关事件应该与音频相同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'); } } 

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

希望有所帮助

Answer 2

这是我用于私人互联网流的脚本：

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

此脚本的附加function是它加载一个小的OGG文件，该文件在播放器暂停时仅包含静音。 然后，当玩家稍后启动时，它将重新加载URL ，清除玩家的缓冲区。