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

【问题标题】：How do I detect if HTML5 audio play/pause state has been changed outside of webpage?如何检测 HTML5 音频播放/暂停状态是否已在网页之外更改？
【发布时间】：2013-07-03 00:44:15
【问题描述】：

我有一个网络应用程序可以播放广播电台的 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 等设备上，您可以控制从网页外部播放的音频（例如双击主屏幕并单击播放/暂停）。假设音频正在播放，我决定从应用程序外部暂停流。当我返回到实际的网络应用程序时，“暂停”按钮仍然显示并且实际上什么都不做，直到您点击它两次以恢复流。真正应该发生的是暂停按钮返回“播放”，所以这看起来很自然。

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

【问题讨论】：

标签： jquery html5-audio mobile-application

【解决方案1】：

这是来自 W3C 的 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');
    }
}

然后对 play 事件执行相同的操作。

希望有帮助

【讨论】：

【解决方案2】：

事件pause 和play 是单独触发的，因此您需要同时监听它们并使用一个事件监听器来处理您的逻辑。

jQuery 示例：

$('#audioplayer').on('pause play', function(e) {
    if (e.currentTarget.paused) {
        // ...
    } else {
        // ...
    }
});

对于 React，将其设为 controlled component，就像对其他 input 元素所做的那样。

const AudioTrack: FC<{ src: string }> = ({ src }) => {
  const [paused, setPaused] = useState<boolean>(true)

  const onAudioStateChange = useCallback((e: SyntheticEvent<HTMLAudioElement>) => {
    setPaused(e.currentTarget.paused)
  }, [])

  console.log(paused)

  return (
    <>
      {/* ..... */}
      <audio src={src} onPlay={onAudioStateChange} onPause={onAudioStateChange} />
    </>
  )
}

【讨论】：

【解决方案3】：

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

$(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，清除播放器的缓冲区。

【讨论】：