3

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

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

4

3 回答 3

6

这是来自 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 事件做同样的事情。

希望有帮助

于 2013-07-05T02:04:02.793 回答
1

事件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} />
    </>
  )
}
于 2021-06-30T09:25:54.250 回答
0

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

$(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在稍后启动播放器时重新加载，清除播放器的缓冲区。

于 2016-08-14T18:46:31.290 回答