미디어 세션 API

PWA에서 미디어 메타 데이터 및 콜백 제공

Tom 프로그레시브 웹 앱, 타이프 스크립트 및 자바 스크립트, 배우기

미디어 경험 향상

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

더 많은 데이터와 재생 제어 기능을 제공하기 위해 이제 "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' }]
});

javascriptLanguageCheck out all coding posts

Typescript를 사용하는 경우 NPM에서 사용할 수있는 관련 유형 정의가있는 패키지도 있습니다.

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

마무리 단어

"미디어 세션 API"는 PWA에 매우 간단하게 추가되어 사용자가 향상된 메타 데이터 및 컨트롤로 노래 또는 비디오를 경험할 수 있도록합니다. API는 현재 실험용으로 표시되어 있지만 대부분의 최신 브라우저에서 이미 사용할 수 있습니다.

행위

Feedback

추천 게시물