230608 youtube iframe player api 볼륨 값 localStorage에 저장하고 불러오기

230608 youtube iframe player api 볼륨 값 localStorage에 저장하고 불러오기

youtube iframe player api는 몇 가지 이벤트를 제공하지만, 볼륨 값이나 음소거 여부가 변경 되었을 때 알려주는 이벤트리스너는 없었다. 그래서 setInterval() 함수를 통해 주기적으로 값을 가져오기로 했다.

setInterval()로 볼륨 값 계속 가져오기

player가 시작되는 onReady 이벤트나 onStateChange의 콜백으로 아래와 같은 함수를 호출하여

500ms마다 볼륨 값과 뮤트 값을 가져와서 updatePlayerOptions()를 통해 localStorage에 저장한다.

const youtubePlayer = {
  player: null, // youtube player 정보를 담을 변수
  intervalId: null // 나중에 setInterval 취소할 때 사용할 id를 저장할 변수
};

// Youtube Player의 volume과 isMuted를 저장하기 위해 setInterval로 확인
function startVolumeObserver() {
  youtubePlayer.intervalId = setInterval(() => {
    const isMute = youtubePlayer.player.isMuted();
    const volume = youtubePlayer.player.getVolume();

    updatePlayerOptions(isMute, volume);
  }, 500);
}

 

setInterval() 취소하기

플레이어가 종료될 때 아래의 함수를 호출하여 setInterval()이 계속 켜져 있지 않도록 clearInterval()로 취소한다.

// VolumeObserver setInterval 삭제
function stopVolumeObserver() {
  if (youtubePlayer.intervalId) {
    clearInterval(youtubePlayer.intervalId);
    youtubePlayer.intervalId = null;
  }
}

 

localStoage에 저장하기

저장할 값을 담은 객체를 만들고 JSON.stringify()를 통해 문자열 형태로 변환하여 localStorage.setItem()로 저장한다.

// mete LocalStorage의 playerOptions 업데이트
function updatePlayerOptions(isMuted = true, volume = 0) {
  const currentDate = new Date().getTime();
  const newOptions = {
    data: {
      volume,
      isMuted
    },
    expiration: currentDate + EXPIRATION_DATE,
    creation: currentDate
  };
  localStorage.setItem('youtube-iframe-player-options', JSON.stringify(newOptions));
}