Javascript

Question

我正在建立一个直播音频的网站。它使用 html 音频元素和一些自定义 javascript / jquery 控件来停止缓冲并在暂停时更改按钮。

在 Android 上播放来自 chrome 的音频时，播放暂停按钮会出现在通知中。同样，iOS 设备在浏览器之外具有媒体控件。

当用户按下这些控件时，播放暂停命令将直接发送到音频元素（绕过我设置的控件。）

如何拦截这些命令并让它们调用我的自定义函数？

我的播放控件启动了这个功能：

function startAudio () {
  // add number to get var to force fresh load each time
  i++;
  $("#audioPlayer").attr("src",source + "&nocache=" + i).trigger("play");
  $("#playpause").removeClass('playing paused').addClass('loading');
  audioPaused = false;
}

我试过了：

audioElem.onplay = function() {
startAudio()
}

但如您所料，这只会导致无限循环，因为播放是在 startAudio() 中调用的。

对于上下文：暂停时删除音频源以防止在暂停时连续加载实时流。再次开始时，通过向源 url 添加一个数字（每次递增）来强制执行新负载。有更好的方法吗？

Answer 1

播放和暂停事件为您准备。

audioElement.onplay = function() {
    /* trigger your customs controls */
};
audioElement.onpause = function() {
    /* trigger your customs controls */
};

来自http://www.w3schools.com/tags/av_event_pause.asp

Javascript - 当用户从移动通知控件按下 play/pause 时如何覆盖默认操作？

Javascript - How do I override default action when user presses play/pause from mobile notification controls?

html

jquery

html5-audio