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

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

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

Можно ли отличить 1/2 от 3?

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

Мне не повезло, пока Media Session не приземлится повсюду?

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

Источник

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 События: остановлено / ожидание проверьте ресурс событий

Источник

В 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). Видео-демонстрацию проще протестировать.

Источник
Другие вопросы по тегам