檢測是否<audio>由用戶交互或緩沖區不足觸發的“暫停”事件？

Question

當通過<audio>或Audio()播放實時音頻流（如網絡廣播Audio() ，暫停事件可以（至少）三種方式觸發：

1. 用戶點擊暫停按鈕（使用<audio controls> ）
2. 用戶單擊瀏覽器的全局音頻控件
   • iOS：控制中心
   • Android：瀏覽器的通知抽屜（至少是 Chrome、Opera、Firefox）
   • 桌面： 媒體會話 API控件，但未初始化，沒有顯式setActionHandler （目前可能隱藏在標志后面）
3. 由各種網絡條件引起的緩沖區欠載

是否可以區分 1/2 和 3？

• 理想情況下，會有一個像isTrusted這樣的事件屬性，我缺少它
• 我試圖猜測，特別是尋找。 在readyState和networkState ，但兩者都非常不確定，尤其是跨瀏覽器（例如HAVE_FUTURE_DATA與HAVE_ENOUGH_DATA的解釋/語義）
• 我避免制作“腐爛狀態機”，同時處理其他事件。 緩沖區欠載通常在stalled事件之前，有時在ended事件之后。 跨瀏覽器的實現看起來非常復雜，誤報的危險非常高。

難道我的運氣，直到媒體會話土地隨處可見？

注意： 這個問題看起來像一個解決方案，但不幸的是不是——瀏覽器處理實時流的“結束”不同且不一致。

Answer 1

waiting事件應該符合您的需求。

您可以在使用 Chrome 網絡選項卡中的下拉菜單模擬不良網絡時嘗試此演示（例如：慢速 3G）

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

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

請注意，此演示也適用於HTMLAudioElement （因為它繼承了HTMLMediaElement ）。 視頻演示更容易測試。

Answer 2

如果您想在用戶暫停音頻時啟動一個事件，那么此代碼段將完成這項工作。 我沒有在通知抽屜中的移動設備上測試它，但我認為它會起作用。

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

資源：音頻元素事件

資源：暫停事件

我還找到了有關您嘗試執行的操作2的有用答案（至少根據我的理解）以及為什么它是一種糟糕的技術。 問題鏈接

3事件：停滯/等待檢查事件資源