게임 이펙트01_ 재생바, 컨트롤버튼 활성

오늘은 재생바와 컨트롤 버튼을 활성화 하였습니다. 
재생버튼, 일시정지 버튼 이전곡 버튼 다음곡버튼으로 곡재생을 하였고 

기본적으로 전체 재생을 주었으므로 마지막 곡이 재생되면 다시 돌아가 곡이 재생됩니다.

마지막으로 뮤직 재생바라 활성화 되면서 재생바의 위치에 따라 곡의 위치와 곡의 진행도를 알 수 있습니다.

---

// 재생 버튼
const playMusic = () =>{
    musicWrap.classList.add("paused");
    musicPlay.setAttribute("title","정지");
    musicPlay.setAttribute("class","stop");
    musicAudio.play();
}

// 일시정지 버튼
const pauseMusic = () =>{
    musicWrap.classList.remove("paused");
    musicPlay.setAttribute("title","재생");
    musicPlay.setAttribute("class","play");
    musicAudio.pause();
}

// 이전곡 듣기
const prevMusic = () => {
    musicIndex == 0 ? musicIndex = allMusic.length : musicIndex--;

    loadMusic(musicIndex);
    playMusic();
}

// 다음곡 듣기
const nextMusic = () => {
    musicIndex == allMusic.length ? musicIndex = 1 : musicIndex++;

    loadMusic(musicIndex);
    playMusic();
}

// 뮤직 진행바
musicAudio.addEventListener("timeupdate",e => {
    console.log(e);
    const currentTime = e.target.currentTime;   // 현재 재생되는 시간
    const duration = e.target.duration;         // 오디오의 총길이
    let progressWidth = (currentTime/duration)*100;                       // 전체 기이에서 현재 진행되는 시간을 백분이 단우리ㅗ 나누기
    
    musicProgressBar.style.width = `${progressWidth}%`;

    musicAudio.addEventListener("loadeddata",() => {
        let audioration = musicAudio.duration;
        let totalmin =  Math.floor(audioration / 60);
        let totalsec =  Math.floor(audioration % 60);
        if(totalsec < 10) totalsec = `0${totalsec}`;
        musicProgressDuration.innerHTML = `${totalmin}:${totalsec}`;
    });

    // 진행 시간
    let currentMin = Math.floor(currentTime / 60);
    let currentsec = Math.floor(currentTime % 60);
    if(currentsec < 10) currentsec = `0${currentsec}`;
    musicProgresscurrent.innerText = `${currentMin}:${currentsec}`;
});

// 진행 버튼 클릭
musicProgress.addEventListener("click", (e) => {
    let progressWidth = musicProgress.clientWidth;  // 진행바의 전체길이
    let clickedOffsetX = e.offsetX;                 // 진행바를 기준으로 측정되는 X좌표값
    let songDuration = musicAudio.duration;         // 오디오 전체 길이

    // 백분위로 나눈 숫자에 다시 전체 길이를 곱해서 현재 재생값으로 바꿈
    musicAudio.currentTime = (clickedOffsetX / progressWidth) * songDuration;
    console.log(songDuration);
});

// 플레이 버튼 클릭
musicPlay.addEventListener("click",() =>{
    const isMusicPaused = musicWrap.classList.contains("paused"); //음악 재생중
    isMusicPaused ? pauseMusic() : playMusic();
});



// 이전곡 버튼 클릭
musicPrevBtn.addEventListener("click",() =>{
    prevMusic();
})

// 다음곡 버튼 클릭
musicNextBtn.addEventListener("click",() =>{
    nextMusic();
})

window.addEventListener("load", () => {
    loadMusic(musicIndex);

    // musicAudio.play();
})

• playMusic 함수는 음악을 재생합니다. musicWrap에 paused 클래스를 추가하고, musicPlay 요소의 title 속성을 "정지"로, class 속성을 "stop"으로 변경합니다. 그리고 musicAudio 요소의 play() 메소드를 호출하여 음악을 재생합니다.
• pauseMusic 함수는 음악을 일시정지합니다. musicWrap에서 paused 클래스를 제거하고, musicPlay 요소의 title 속성을 "재생"으로, class 속성을 "play"로 변경합니다. 그리고 musicAudio 요소의 pause() 메소드를 호출하여 음악을 일시정지합니다.
• prevMusic 함수는 이전 곡을 재생합니다. musicIndex 변수를 이전 곡 인덱스로 변경한 후, loadMusic 함수를 호출하여 이전 곡을 로드하고, playMusic 함수를 호출하여 음악을 재생합니다.
• nextMusic 함수는 다음 곡을 재생합니다. musicIndex 변수를 다음 곡 인덱스로 변경한 후, loadMusic 함수를 호출하여 다음 곡을 로드하고, playMusic 함수를 호출하여 음악을 재생합니다.
• musicAudio 요소에 timeupdate 이벤트 리스너를 등록하여 음악이 재생되는 동안 매 초마다 진행바를 업데이트합니다. currentTime 변수를 이용하여 현재 재생 시간을 계산하고, duration 변수를 이용하여 음악의 총 길이를 계산합니다. 이를 이용하여 진행바의 길이와 시간을 업데이트합니다.
• musicProgress 요소에 click 이벤트 리스너를 등록하여 진행바를 클릭했을 때, 음악 재생 위치를 업데이트합니다.
• musicPlay 요소에 click 이벤트 리스너를 등록하여 플레이 버튼을 클릭했을 때, 음악을 재생하거나 일시정지합니다.
• musicPrevBtn 요소와 musicNextBtn 요소에 각각 click 이벤트 리스너를 등록하여 이전 곡과 다음 곡 버튼을 클릭했을 때, 각각 prevMusic 함수와 nextMusic 함수를 호출합니다.
• 마지막으로, 페이지가 로드되면 loadMusic 함수를 호출하여 초기 음악을 로드합니다. musicAudio 요소에 play() 메소드를 호출하여 음악을 자동으로 재생합니다.

---