사용자에게 제어 : 미디어 세션 API를 제공합니다

이것을 상상해보십시오 : 킬러 Kendrick Lamar 트랙은 많은 브라우저 탭 중 하나에서 폭발합니다. 당신은 그루브를하고 있지만 누군가가 들어 와서 일시 중지해야합니다. 어떤 탭? 브라우저는 제한된 도움말을 제공합니다. 모든 오디오를 음소거 할 수도 있지만 직접 제어는 더 나을 수 없습니까?

미디어 세션 API가이를 해결합니다. 재생 탭을 넘어 미디어 재생 컨트롤을 확장하여 다음을 통해 액세스를 제공합니다.

• 모바일 장치 알림 영역
• 웨어러블
• 데스크탑 미디어 허브

또한 미디어 키 및 음성 비서를 사용하여 제어 할 수 있습니다 (Siri, Google Assistant, Bixby, Alexa).

미디어 세션 API 이해

API는 두 인터페이스를 중심으로합니다.

• MediaMetadata : 미디어 세부 정보 (제목, 앨범, 아트 워크, 아티스트 - Kendrick Lamar,이 예에서)를 제공합니다.
• MediaSession : 재생 기능을 관리합니다.

구현하기 전에 항상 브라우저 지원을 확인하십시오.

 if (네비게이터의 '미디어 세션') {
  // 미디어 세션 API 코드는 여기에 있습니다
}

MediaMetadata 인터페이스

MediaMetadata.MediaMetadata() MediaMetadata 객체를 만듭니다. 주요 속성에는 다음이 포함됩니다.

• MediaMetadata.title : 미디어 제목.
• MediaMetadata.artist Artist : 아티스트 또는 그룹.
• MediaMetadata.album : 앨범 이름.
• MediaMetadata.artwork : MediaImage 객체의 배열 (이미지 URL, 크기, 마임 유형).

Kendrick Lamar의 "Alright"의 예 :

 if (네비게이터의 '미디어 세션') {
  navigator.mediasession.metadata = New MediaMetadata ({
    제목 : '좋아요',
    아티스트 : 'Kendrick Lamar',
    앨범 : 'To Pimp a Butterfly',
    작품 : [
      {src : 'https : // mytechnicalarticle/kendrick-lamar/to-pimp-a-butterfly/alright/96x96', 크기 : '96x96', type : 'image/png'},
      {src : 'https : // mytechnicalarticle/kendrick-lamar/to-pimp-a-butterfly/alright/128x128', 크기 : '128x128', type : 'image/png'},
      // 더 많은 크기 추가 (192x192, 256x256 등)
    ]]
  });
}

MediaSession 인터페이스

이 인터페이스는 사용자 재생 컨트롤을 제공합니다.

• play() : 재생을 시작합니다.
• pause() : 재생을 일시 중지합니다.
• previoustrack() : 이전 트랙을 재생합니다.
• nexttrack() : 다음 트랙을 재생합니다.
• seekbackward() : 뒤로 추구합니다 (지정된 오프셋으로).
• seekforward() : 앞으로 추구합니다.
• seekto() : 특정 시간을 추구합니다.
• stop() : 재생 중지.
• skipad() : 건너 뛰기 광고 (구현 세부 사항은 간결하게 생략 됨).

setActionHandler() 이러한 작업에 대해 핸들러를 등록합니다. 플레이/일시 중지 예 :

 let alright = new Audio (); // htmlaudioElement 대신 오디오를 사용합니다

if (네비게이터의 '미디어 세션') {
  navigator.mediasession.setactionHandler ( 'play', () => Alright.Play ());
  navigator.mediasession.setactionHandler ( 'pause', () => allight.pause ());
}

previoustrack , nexttrack , seekbackward , seekforward , seekto 및 stop 에서도 비슷한 핸들러가 구현됩니다. seekbackward 및 seekforward details.seekOffset 있으면 기본 10 초 오프셋을 사용하십시오. seekto 표준과 빠른 추구를 모두 처리합니다. stop 핸들러는 재생 시간을 일시 중지하고 재설정합니다.

각 조치 후 setPositionState() 사용하여 재생 상태를 업데이트해야합니다.

 if (네비게이터의 '미디어 세션') {
  navigator.mediasession.setPositionState ({
    기간 : 알겠습니다.
    Playbackrate : 알겠습니다. Playbackrate,
    위치 : 알겠습니다 .CurrentTime
  });
}

오류 처리는 중요합니다. 랩 setActionHandler try...catch .

오류 처리 및 상태 업데이트를 통합 한 완전한 예는 원본 기사에 제공됩니다. 자리 표시 자 이미지 URL을 실제 URL로 바꾸는 것을 잊지 마십시오. 데모는 다양한 장치와 플랫폼에서 API의 기능을 보여줍니다. 향상된 사용자 경험을 위해 미디어가 풍부한 애플리케이션 에서이 API를 구현하는 것을 고려하십시오.

위 내용은 사용자에게 제어 : 미디어 세션 API를 제공합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!