Media Session API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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