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

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

希望有所帮助

Answer 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} />
    </>
  )
}

Answer 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，清除玩家的缓冲区。

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

3 个答案:

jQuery 示例：