Media Session API

Предоставление медиа-метаданных и обратных вызовов в вашем PWA

Повысьте качество работы со СМИ

Если вы используете это веб-приложение с английским или немецким языком, вы увидите кнопку воспроизведения звука в верхней части статьи. Нажатие на кнопку запускает звуковую дорожку для чтения написанного текста. Без каких-либо модификаций это работает очень хорошо, но я подумал, что могу улучшить его.

Чтобы предоставить больше данных и даже элементы управления воспроизведением, теперь вы можете использовать новый API, доступный для прогрессивных веб-приложений, который называется Media Session API. Если браузер поддерживает это, приложение может значительно улучшить работу с мультимедиа.

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

Проще говоря, просто сделано

Реализация «Media Session API» очень проста и требует всего нескольких строк кода.

function setMediaSessionMetaData(props){
  // Progressive enhancement of your PWA,
  // which means we have to check if the
  // new API is available.
  if(!('mediaSession' in navigator)){
    return;
  }
  
  navigator.mediaSession.metadata = new MediaMetadata({
    title: props.title,
    artist: props.artist
    album: props.album,
    artwork: props.artwork
  });
  
  // Add action handlers, if any.
  // For a complete list, check out the
  // MDN-link in the addendum.
  if(props.play){
    navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
  }
}

// ... Later in your code ...

setMediaSessionMetaData({
  title: "Song name",
  artist: "Artist name",
  album: "Album name",
  artwork: [{ 
    src: 'https://dummyimage.com/512x512',
    sizes: '512x512',
    type: 'image/png' }]
});

Если вы используете Typescript, в NPM также есть пакет со связанными определениями типов.

После добавления изменений вы можете проверить свою реализацию, проиграв звуковую дорожку в браузере с поддержкой API, например в Google Chrome. Если все настроено правильно, в окне мультимедиа в Chrome теперь будут отображаться указанные имена, обложки альбомов, а также элементы управления, в зависимости от вашей реализации.

Image b313f068c476

Заключительные слова

«Media Session API» - очень простое дополнение к вашему PWA, которое позволяет вашим пользователям просматривать песни или видео с расширенными метаданными и элементами управления. В настоящее время API отмечен как экспериментальный, но уже может использоваться с большинством современных браузеров.

Предложения

Связанные

Приложение