[JavaScript] 음악 플레이리스트 프로그래스바 제작 (3)

버그를 해결했다. 원인을 찾아보니 크롬을 실행할 때 음원이 나오지 않아도 AudioContext 객체를 생성할 수 없다. 그래서 즉시 실행되던 함수를 묶어 playMusic 에서 실행하도록 바꾸었더니 해결됐다. 

 

다음으로 프로그래스 바를 만들었다. 내용을 요약하자면 오디오 timeupdate 이벤트 리스너를 이용해 내부 함수가 계속해서 실행될 수 있게 했다. 그 뒤로는 현재길이 / 전체길이 를 백분위로 환산한 뒤 프로그래스 바의 width 길이에 대입했다.

 

재생 시간에 따른 프로그래스 바 크기 조절

실행코드

  audio.addEventListener("timeupdate", (e) => {
    // console.log(e);

    // 프로그래스 바 진행 리스너
    const currentTime = e.target.currentTime; // 현재 재생되는 시간
    const duration = e.target.duration; // 오디오의  총 길이
    let progressWidth = (currentTime / duration) * 100;
    progressBar.style.width = `${progressWidth}%`;
  });

 

 

클릭 이벤트

실행 코드

  progress.addEventListener("click", (e) => {
    console.log("click");

    let progressWidth = progress.clientWidth;

    let clickedOffsetX = e.offsetX;
    let songDuration = audio.duration;

    audio.currentTime = (clickedOffsetX / progressWidth) * songDuration;
    console.log(progressWidth);
  });

offsetX 속성은 기준이 요소이다. 따라서 클릭을 한 위치가 요소의 어느 부분인지를 반환한다. 해당 위치와 전체 위치를 이용해 노래의 어느 부분으로 이동할지 결정한다.