Определить, произошло ли событие <audio>`pause` в результате взаимодействия с пользователем или опустошения буфера?

Question

При воспроизведении потокового аудио, например веб-радио, через <audio> или Audio() событие паузы может запускаться (как минимум) тремя способами:

1. пользователь нажимает кнопку паузы (с <audio controls>)
2. пользователь щелкает браузером глобальные элементы управления звуком
   • iOS: Центр управления
   • Android: ящик уведомлений браузера (не менее Chrome, Opera, Firefox)
   • Рабочий стол: Media Session API контролирует, но не инициализируется, без явного setActionHandler (может быть скрыто за флагом на данный момент)
3. переполнение буфера, вызванное различными условиями сети

Возможно ли dif guish между 1/2 и 3?

• В идеале, должно быть свойство события, подобное isTrusted, которое мне не хватает
• Я пытался угадать, глядя esp. в readyState и networkState, но оба они очень неубедительны, особенно в разных браузерах (например, интерпретация / семантика HAVE_FUTURE_DATA против HAVE_ENOUGH_DATA)
• Я уклонялся от создания «разлагающегося конечного автомата», манипулирования другими событиями. Переполнение буфера составляет , часто , за которым предшествуют stalled события, а иногда , за которыми следуют ended события. Кросс-браузерная реализация кажется безумно сложной, и опасность ложных срабатываний очень высока.

Мне не повезло, пока сессия СМИ не приземлится везде?

Примечание : этот вопрос выглядит как решение, но, к сожалению, нет - браузеры обрабатывают «концы» живых потоков по-разному и непоследовательно.

Answer 1

Если вы хотите запустить событие, когда пользователь приостанавливает звук, этот фрагмент выполнит эту работу. Я не проверял его на мобильном устройстве в ящике уведомлений, но думаю, что он будет работать.

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 (по крайней мере из того, что я понимаю) и почему это плохая техника. Ссылка на вопрос

3 События: остановлен / ожидает проверки ресурса событий

Answer 2

Событие waiting должно соответствовать вашим потребностям.

Вы можете попробовать эту демонстрацию во время симуляции плохой сети с помощью раскрывающегося списка на вкладке Chrome Network (например, Slow). 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). Демоверсию видео проще тестировать.