如何检测HTML5音频播放/暂停状态是否已在网页外更改? [英] How do I detect if HTML5 audio play/pause state has been changed outside of webpage?

问题描述

我有一个Web应用程序，可播放广播电台的HTML5音频流.我正在使用jQuery播放/暂停音频并像这样切换播放/暂停按钮:

I have a web app that plays an HTML5 Audio stream of a radio station. I'm using jQuery to play/pause the audio and toggle the play/pause button like so:

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应用程序时，暂停"按钮仍然显示并且实际上无任何作用，直到您点按两次以恢复流.真正应该发生的是暂停按钮返回到播放"状态，因此看起来很自然.

This all works great. However, on devices like iPhone and iPad you can control the audio playing from outside of the web page (for example double-clicking on the home screen and clicking play/pause). Let's say the audio is playing and from outside the app I decide to pause the stream. When I return to the actual web app the 'pause' button still shows and effectively does nothing until you tap it twice to resume the stream. What should really happen is the pause button returns to 'play' so it seems like a natural thing.

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

How do I detect the change in audio play/pause state and reflect it back to the app?

推荐答案

这是来自W3C的HTML5视频演示/测试页面，但我相信您的相对事件对于音频

Here is the demo/test page from the W3C for HTML5 video, but I believe the relative events for you should be the same for audio http://www.w3.org/2010/05/video/mediaevents.html

因此您可以执行以下操作:

So you could do something like:

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

，然后对播放事件进行相同操作.

and then do the same for the play event.

希望有帮助

这篇关于如何检测HTML5音频播放/暂停状态是否已在网页外更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！