Повысьте качество работы со СМИ
Если вы используете это веб-приложение с английским или немецким языком, вы увидите кнопку воспроизведения звука в верхней части статьи. Нажатие на кнопку запускает звуковую дорожку для чтения написанного текста. Без каких-либо модификаций это работает очень хорошо, но я подумал, что могу улучшить его.
Чтобы предоставить больше данных и даже элементы управления воспроизведением, теперь вы можете использовать новый 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 теперь будут отображаться указанные имена, обложки альбомов, а также элементы управления, в зависимости от вашей реализации.
Заключительные слова
«Media Session API» - очень простое дополнение к вашему PWA, которое позволяет вашим пользователям просматривать песни или видео с расширенными метаданными и элементами управления. В настоящее время API отмечен как экспериментальный, но уже может использоваться с большинством современных браузеров.
