MediaSession API – zarządzaj mediami na stronie spoza przeglądarki!

Spis treści

1. Wprowadzenie
2. Zarządzanie mediami
3. Wygląd UI
   1. Desktop
   2. Mobile
4. Działający przykład na Github Pages
5. Pełny kod przykładu na Github
6. Podsumowanie

Wprowadzenie

Dzięki MediaSession API możemy sterować listą odtwarzania spoza karty przeglądarki, która odtwarza dźwięk/wideo.

Przez to obsługa multimediów odtwarzanych przykładowo na stronie zespołu muzycznego jest dużo prostsza – użytkownik nie musi wracać na stronę i szukać na niej customowych przycisków.

W tym artykule zaimplementujemy bazową obsługę odtwarzania playlisty na stronie i jej kontrolę za pomocą MediaSession API.

Zarządzanie mediami

Na stronie umieścimy piosenki pobrane z serwisu Bensound, którymi będziemy chcieli zarządzać za pomocą nowego API.

navigator.mediaSession.setActionHandler('play', onPlayClicked);
navigator.mediaSession.setActionHandler('pause', onPauseClicked);
navigator.mediaSession.setActionHandler('stop', onStopClicked);
navigator.mediaSession.setActionHandler('previoustrack', onPreviousClicked);
navigator.mediaSession.setActionHandler('nexttrack', onNextClicked);Copy

const songs = [...document.querySelectorAll('audio')];
let currentSong = songs[0];

const onPreviousClicked = () => {
  currentSong.pause();
  currentSong.currentTime = 0;
  const currentSongIndex = songs.findIndex(el => el === currentSong);

  const newCurrentSongIndex = (() => {
    if (currentSongIndex === 0) {
      return songs.length - 1;
    }
    return currentSongIndex - 1;
  })();
  currentSong = songs[newCurrentSongIndex];
  currentSong.play();

  updateMetadata('playing');
};

const onNextClicked = () => {
  currentSong.pause();
  currentSong.currentTime = 0;
  const currentSongIndex = songs.findIndex(el => el === currentSong);

  const newCurrentSongIndex = (() => {
    if (currentSongIndex === songs.length - 1) {
      return 0;
    }
    return currentSongIndex + 1;
  })();
  currentSong = songs[newCurrentSongIndex];
  currentSong.play();
  
  updateMetadata('playing');
};Copy

W momencie gdy użytkownik klika przycisk następny bądź poprzedni, następuje zatrzymanie odtwarzania aktualnie wybranej piosenki oraz wyzerowanie czasu odtwarzania. Następnie wyliczany jest indeks kolejnej piosenki do odtworzenia i jest ona odtwarzana.

Przyciski wyglądają następująco:

Dane do wyświetlenia na odtwarzacze pobierane są z zahardkodowanej struktury HTML. Wygląda ona tak:

<p>
  <a href="https://www.bensound.com/royalty-free-music/track/dubstep">Dubstep from BenSound</a>
  <br>
  <audio controls src="bensound-dubstep.mp3"></audio>
</p>Copy

Oczywiście, w rzeczywistej aplikacji źródłem tych danych mógłby być np backend.

Funkcja która dokonuje aktualizacji opisu wygląda tak:

const updateMetadata = playbackState => {
  const descriptionItems = currentSong.parentNode.querySelector('a').innerHTML.split(' ');
  navigator.mediaSession.metadata = new MediaMetadata({
    title: descriptionItems[0],
    artist: descriptionItems[descriptionItems.length - 1],
  });
  navigator.mediaSession.playbackState = playbackState;
};Copy

Tworzony jest obiekt

Wygląd UI

Desktop

Na przeglądarce Chrome UI prezentuje się następująco:

I jest widoczne w prawym górnym rogu przeglądarki. Umożliwia sterowanie multimediami z dowolnej karty, niezależnie w której karcie są odtwarzane

Mobile (Android)

Na urządzeniu Android w przeglądarce Chrome UI wygląda tak:

Dostępny jest on, gdy rozwiniemy górny bar powiadomień (swipe palcem w dół). Niedogodnością jest to, że kliknięcie któregokolwiek przycisku zwija bar i przenosi nas do aplikacji, przez co nie da się multimediami sterować całkowicie spoza aplikacji

Działający przykład na Github Pages

Klikalny przykład znajduje się pod adresem:

https://radek-anuszewski.github.io/mediasession-demo/

Pełny kod przykładu na Github

Pełen kod przykładu znajduje się pod adresem

https://github.com/radek-anuszewski/mediasession-demo

Podsumowanie

MediaSession API znajdzie zastosowanie głównie na stronach z bardzo dużą ilością multimediów, jak strony zespołów muzycznych. Sterowanie odtwarzaniem z zewnątrz jest czytelne dla użytkownika i praktyczne, szczególnie dla użytkowników desktopów.