<Custom Player> Javascript - volume

오늘 만들어볼 기능은 크게 2가지 입니다.
1. volume 버튼을 눌렀을 때 mute, unmute 기능
2. input[type=range]를 이용해서 volume 조절하기

project

youtube
  |views
    |mixins
     *|videoPlayer.pug
  |assets
    |js
     *|videoPlayer.js
   

videoPlayer.pug

span.volume
  span#jsVolumeIcon
    i.fas.fa-volume-up
  input#jsVolumeRange(type="range", min = 0, max = 100, value=50)

videoPlayer.js

• muted property
  muted property는 video의 mute상태를 boolean 값으로 반환해주며 동시에 boolean 값을 전달할 수도 있습니다.
• volume property
  volume property는 video의 volume값을 0-1사이의 값으로 반환해주며 동시에 값을 전달할 수도 있습니다.
• volume css trick
  input range를 custom하기 위해서 background에 linear-gradient를 적용하였습니다.

const videoPlayer = document.querySelector("#jsVideoPlayer");
const volumeIcon = document.querySelector("#jsVolumeIcon");
const volumeRange = document.querySelector("#jsVolumeRange");

function init(){
  videoPlayer.volume = 0;
  volumeIcon.addEventListener("click", handelVolumeClick);
  volumeRange.addEventListener("input", handleVolume);
}

function handleVolumeClick(){
  if(videoPlayer.muted){
    videoPlayer.muted = false;
    volumeIcon.innerHTML = '<i class="fas fa-volume-up"></i>';
    volumeRange.value = videoPlayer.volume*100;
    if(videoPlayer.volume === 0){
      volumeIcon.innerHTML = '<i class="fas fa-volume-mute"></i>';
    }else if(videoPlayer.volume <= 0.3){
      volumeIcon.innerHTML = '<i class="fas fa-volume-down"></i>';
    }else{
      volumeIcon.innerHTML = '<i class="fas fa-volume-up"></i>';
    }
    volumeRange.style.background ='linear-gradient(to right, white 0%, white ' + volumeRange.value + '%, rgba(173, 167, 167, 0.6) ' + volumeRange.value + '%, rgba(173, 167, 167, 0.6) 100%)';
  }else{
    videoPlayer.muted = true;
    volumeIcon.innerHTML = '<i class="fas fa-volume-mute"></i>';
    //muted를 했어도 videoPlayer는 volume값을 저장하고 있다.
    volumeRange.value = 0;
    volumeRange.style.background = 'rgba(173, 167, 167, 0.6) 100%)';

  }
}

function handleVolume(){
  const {target:{value}} = event;
  // 0과 1사이의 값을 넣어주어야 합니다.
  videoPlayer.volume = value/100;
  if(videoPlayer.volume === 0){
    volumeIcon.innerHTML = '<i class="fas fa-volume-mute"></i>';
  }else if(videoPlayer.volume <= 0.3){
    volumeIcon.innerHTML = '<i class="fas fa-volume-down"></i>';
  }else{
    volumeIcon.innerHTML = '<i class="fas fa-volume-up"></i>';
  }
  this.style.background = 'linear-gradient(to right, white 0%, white ' + value + '%, rgba(173, 167, 167, 0.6) ' + value + '%, rgba(173, 167, 167, 0.6) 100%)';
}

if(videoPlayer){
  init();
}