Media Session API

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

API Media Session даёт разработчику возможность настроить уведомление о медиа. С помощью него можно предоставить метаданные о проигрываемых приложением медиа, а также позволяет приложению реагировать на команды управления воспроизведением. Смысл данного интерфейса в том, чтобы пользователь мог просматривать и управлять медиаконтентом, не переходя на страницу, где происходит воспроизведение.

Принципы и использование Media Session

Интерфейс MediaMetadata позволяет приложению передавать метаданные о воспроизводимом контенте браузеру и ОС. Примеры таких метаданных: название, исполнитель, альбом и обложка. Данная информация может отображаться в медиацентре, блоке уведомлений или на экране блокировки.

Интерфейс MediaSession позволяет пользователям контролировать воспроизведение с помощью элементов управления браузера. Взаимодействие с этими элементами также вызывает события в приложении. Так как этот API может использоваться сразу несколькими страницами, браузер контролирует, какая страница получит события. Браузер предоставляет поведение по умолчанию, если оно не было переопределено страницами.

Работа с Media Session API

Главный интерфейс Media Session API -- MediaSession. Не нужно создавать собственный экземпляр MediaSession, доступ к API осуществляется через свойство navigator.mediaSession. Например, следующий код укажет, что страница воспроизводит медиа в данный момент:

navigator.mediaSession.playbackState = "playing";

Интерфейсы

MediaMetadata
Позволяет веб-странице предоставить метаданные о воспроизведении для показа в интерфейсе платформы.
MediaSession
Позволяет странице определить собственные обработчики стандартных медиа-событий.

Объекты

MediaImage
Объект MediaImage содержит информацию об отображаемой картинке. Чаще всего этим изображением является обложка или постер.
MediaPositionState
Содержит информацию о длине трека, месте и скорости воспроизведения, передаваемую с помощью метода setPositionState().
MediaSessionActionDetails
Предоставляет информацию, необходимую для выполнения запрошенного действия, например тип действия или позицию перемотки.

Примеры

Данный пример демонстрирует работу и определение доступности Media Session API. Также, он передает метаданные и определяет собственные обработчики событий:

if ('mediaSession' in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Unforgettable',
    artist: 'Nat King Cole',
    album: 'The Ultimate Collection (Remastered)',
    artwork: [
      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
    ]
  });

  navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
}

Некоторые браузеры отключают автовоспроизведение медиаэлементов на мобильных устройствах и требуют действий пользователя для начала воспроизведения. Этот пример добавит обработчик события pointerup для кнопки воспроизведения на странице, который начнет работу с медиасессией:

playButton.addEventListener('pointerup', function(event) {
  var audio = document.querySelector('audio');

  // Пользователь нажал кнопку, начинаем воспроизведение...
  audio.play()
  .then(_ => { /* Настройка элементов управления (показана выше). */ })
  .catch(error => { console.log(error) });
});

Спецификации

Спецификация Статус Комментарий
Media Session Standard Черновик Изначальное определение.

Совместимость

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
MediaSession
Экспериментальная
Chrome Полная поддержка 73Edge Полная поддержка ≤79Firefox Полная поддержка 71
Отключено
Полная поддержка 71
Отключено
Отключено From version 71: this feature is behind the dom.media.mediasession.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Полная поддержка 57Firefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 7.0
metadata
Экспериментальная
Chrome Полная поддержка 73Edge Полная поддержка ≤79Firefox Полная поддержка 71
Отключено
Полная поддержка 71
Отключено
Отключено From version 71: this feature is behind the dom.media.mediasession.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Полная поддержка 57Firefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 7.0
playbackState
Экспериментальная
Chrome Полная поддержка 73Edge Полная поддержка ≤79Firefox Полная поддержка 76
Отключено
Полная поддержка 76
Отключено
Отключено From version 76: this feature is behind the dom.media.mediasession.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Полная поддержка 57Firefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 7.0
setActionHandler()
Экспериментальная
Chrome Полная поддержка 73Edge Полная поддержка ≤79Firefox Полная поддержка 71
Отключено
Полная поддержка 71
Отключено
Отключено From version 71: this feature is behind the dom.media.mediasession.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Полная поддержка 57Firefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 7.0
setPositionState()
Экспериментальная
Chrome Полная поддержка 73Edge Полная поддержка ≤79Firefox Полная поддержка 76
Отключено
Полная поддержка 76
Отключено
Отключено From version 76: this feature is behind the dom.media.mediasession.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Полная поддержка 57Firefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 7.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.