PWA에서 새 미디어 세션 API 사용

미디어 경험 향상

이 웹 앱을 영어 또는 독일어 로케일로 사용하는 경우 기사 상단에 오디오 재생 버튼이 표시됩니다. 버튼을 클릭하면 작성된 텍스트에 대해 소리내어 읽기 오디오 트랙이 시작됩니다. 수정하지 않아도 매우 잘 작동하지만 개선 할 수 있다고 생각했습니다.

더 많은 데이터와 재생 제어 기능을 제공하기 위해 이제 "Media Session API"라는 점진적 웹 앱에 사용할 수있는 새로운 API를 사용할 수 있습니다. 브라우저가이를 지원하는 경우 응용 프로그램은 미디어 경험을 크게 향상시킬 수 있습니다.

앨범 아트 워크 제공
제목, 앨범 이름 또는 아티스트 이름과 같은 오디오 트랙에 대한 추가 정보 제공
사용자가 웹 앱 외부에서 오디오 트랙의 일부를 일시 중지하거나 건너 뛸 수 있도록 재생 컨트롤을 제공합니다.

간단히 말해서 간단히 완료

"미디어 세션 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에서 사용할 수있는 관련 유형 정의가있는 패키지도 있습니다.

변경 사항이 추가 된 후 Google Chrome과 같은 API를 지원하는 브라우저에서 오디오 트랙을 재생하여 구현을 확인할 수 있습니다. 모든 것이 올바르게 설정되면 이제 Chrome의 미디어 창에 구현에 따라 제공된 이름, 앨범 아트 워크 및 컨트롤이 표시됩니다.

Image b313f068c476