[JS] audio 관련 event

• audio.play()
• audio.pause()
• audio.volume

이 외, 핸들러를 이용한 여러 상태 변경 요소들

- playing-time/duration-time(with progressBar)

const onTimeUpdate = (event) => {
    if (event.target.readyState === 0) return;
    const currentTime = event.target.currentTime;
    const duration = event.target.duration;
    const progressBarWidth = (currentTime / duration) * 100;
    prograssBar.current.style.width = `${progressBarWidth}%`;
  };

- progressBar

  const onClickProgress = (event) => {
    const progressBarWidth = event.currentTarget.clientWidth;
    const offsetX = event.nativeEvent.offsetX;
    const duration = audio.current.duration;
    audio.current.currentTime = (offsetX / progressBarWidth) * duration;
  };

오디오에 관련된 이벤트는 많이 사용하지 않아서

다음번에 사용할 일이 있을 때 다시 찾아야 할 것 같아

한 번 정리해보았다.

 

React 공부를 하면서 javascript를 많이 배우게 되는데,

핸들러의 종류도 다양하고, 

단순히 오브젝트를 옮기고 붙이기 위한 용도가 아닌, 더 깊은 부분의 고려가 보인다.