JS로 트랙 메타 데이터 등록하기

위와 같이 트랙에 대한 정보를 등록하고 싶을 때 방법을 몰라 해멘적이 있기 때문에 기록으로 적어 두려고 한다.

자바스크립트에는 navigator 라는 인터페이스가 존재한다.

간단히 사용자가 원하는 상태에 대해 만들고 싶은 이벤트를 표현하기 위한 인터페이스이다.

여기서 우린 음원 상태에 대한 이벤트를 표현하고 싶기 때문에 MediaSession이라는 인터페이스를 사용할 것이다.

MediaSession은 표준 미디어 재생장치 상호작용에 대한 맞춤 함수를 제공하고, 표준화된 사용자 인터페이스에서 표현을 위해 사용자 에이전트에 의해 디바이스 또는 운영 체제로 전송될 수 있는 메타데이터를 보낸다.

썸네일에 나와있는 사진이나 아래 있는 사진처럼 운영체제에서 음원이 재생되고 있다면 정보를 표시하거나 블루투스 이어폰 등에서 다음 트랙으로 넘어가라는 이벤트를 받을 경우 코드를 작성해 원하는 함수로 쓸 수 있다는 것이다.

잠금상태에선 캡처가 안되더라
이런 식으로 다음 트랙으로 넘어가게 할 수도 있다.

트랙의 정보를 등록하기 위해 아래와 같은 코드를 작성했다.

navigator.mediaSession.metadata = new MediaMetadata({
        title: music_data.name,
        artist: music_data.artists[0].name,
        album: music_data.album.name,
        artwork: [{ src: music_data.album.images[0].url }]
      })

블루투스 이어폰 등으로 트랙을 이동 시키기 위해서 다음 코드를 사용했다.

    navigator.mediaSession.setActionHandler("nexttrack", e => {
      NextTrack()
    })
    navigator.mediaSession.setActionHandler("previoustrack", e => {
      PreviousTrack()
    })

코드 찾으러 여기 아래까지 와주셔서 감사하다.