检测是否由用户交互或缓冲区欠载触发 <audio> `pause` 事件？答案

【问题标题】：Detect if <audio> `pause` event fired by user interaction or buffer underrun?检测是否由用户交互或缓冲区欠载触发 <audio> `pause` 事件？
【发布时间】：2020-02-12 07:10:00
【问题描述】：

当通过<audio> 或Audio() 播放实时音频流（如网络广播）时，暂停事件可以（至少）三种方式触发：

用户点击暂停按钮（<audio controls>）
用户点击浏览器全局音频控件
- iOS：Control Center
- Android：浏览器的通知抽屉（至少 Chrome、Opera、Firefox）
- 桌面：Media Session API 控件，但未初始化，没有明确的setActionHandler（目前可能隐藏在标志后面）
各种网络条件导致的缓冲区不足

能区分1/2和3吗？

理想情况下，应该有一个像 isTrusted 这样的事件属性，我错过了
我试图猜测，特别是看起来。 readyState 和 networkState，但两者都非常不确定，尤其是跨浏览器（例如 HAVE_FUTURE_DATA 与 HAVE_ENOUGH_DATA 的解释/语义）
我已经避免制作“衰减状态机”来处理其他事件。缓冲区欠载通常之前是stalled 事件，有时之后是ended 事件。跨浏览器的实现似乎非常复杂，误报的风险非常高。

在媒体会议lands 无处不在之前，我是不是运气不好？

注意：this question 看起来像是一个解决方案，但不幸的是不是——浏览器以不同且不一致的方式处理直播流的“结束”。

【问题讨论】：

标签： javascript audio html5-audio mediaelement mediasession

【解决方案1】：

waiting 事件应该满足您的需求。

您可以在使用 Chrome 网络选项卡中的下拉菜单模拟坏网络时尝试此演示（例如：Slow 3G）

const video = document.getElementById('mwe_player_0');
video.onwaiting = function() { console.log('onwaiting'); };

&lt;video id="mwe_player_0" controls="" preload="none" style="width:800px;height:450px"&gt;&lt;source src="https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm" type="video/webm; codecs=&amp;quot;vp8, vorbis&amp;quot;"&gt;&lt;/video&gt;

请注意，此演示也适用于 HTMLAudioElement（因为它继承了 HTMLMediaElement）。视频演示更容易测试。

【讨论】：

谢谢，但我必须再次设置一些标志，例如 was_waiting，然后推断 pause 是可能网络事件（多少时间必须过去，所以不是吗？）。如果还不够清楚：我必须处理pause，而不是找到替代方案。我通过类似的ended 事件在更窄的用例中取得了一些成功：对于预期正在播放的直播流（再次，一个标志），ended 之前的pause 事件变得没有意义 -我可以推断，任何其他pause必须是用户交互...直到出现新的控制方案;)
...tl;dr：我看过这个和其他事件，充其量仍然是令人沮丧的隐含猜测。
为什么你必须处理 pause 事件，而它不会因缺少数据而触发？
pause 事件确实发生在有限的资源上，它们对于仅限直播流没有实际意义

【解决方案2】：

如果您想在用户暂停音频时启动一个事件，那么这个 sn-p 将完成这项工作。我没有在通知抽屉中的移动设备上对其进行测试，但我认为它会起作用。

const video = document.querySelector('video');

video.addEventListener('pause', (event) => {
  console.log('The Boolean paused property is now true. Either the ' + 
  'pause() method was called or the autoplay attribute was toggled.');
});

resource：音频元素事件

resource: 暂停事件

我还找到了一个有用的答案来说明您正在尝试做什么2（至少据我所知）以及为什么这是一种糟糕的技术。 Link to question

3事件：停止/等待检查事件资源

【讨论】：

不，抱歉。这只是监听事件，但不辨别其来源。此外，我并没有尝试进行任何经典意义上的 UA/移动嗅探。