게임이펙트 뮤직플레이어2

뮤직플레이어 리스트만들기

추가 코드블럭

//뮤직 리스트를 클릭하면 재생
function playListMusic(){
    const musicListAll = musicListUl.querySelectorAll("li");    //뮤직 리스트 목록
    
    for(let i=0; i<musicListAll.length; i++){
        let audioTag = musicListAll[i].querySelector(".audio-duration");

        musicListAll[i].setAttribute("onclick", "clicked(this)");

        if(musicListAll[i].classList.contains("playing")){
            musicListAll[i].classList.remove("playing");
            let dataAudioDuration = audioTag.getAttribute("data-duration");
            audioTag.innerText = dataAudioDuration;
        }

        if(musicListAll[i].getAttribute("data-index") == musicIndex){
            musicListAll[i].classList.add("playing");
            audioTag.innerText = "재생중";
        }
    }
}

//뮤직 리스트를 클릭하면
function clicked(el){
    let getIndex = el.getAttribute("data-index");
    // alert(getIndex);
    musicIndex = getIndex;
    loadMusic(musicIndex);
    playMusic();
    playListMusic();
}

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

보충설명

//뮤직 리스트를 클릭하면 재생

음악 리스트를 관리하는 함수인 playListMusic()입니다.

먼저 querySelectorAll() 함수를 사용하여 musicListUl 요소 내부의 li 태그 목록을 가져옵니다. 그리고 for 루프를 사용하여 모든 음악 리스트 아이템에 대해 아래의 작업을 수행합니다.

1. querySelector() 함수를 사용하여 현재 아이템에서 .audio-duration 클래스를 갖는 태그를 찾아옵니다.

2. setAttribute() 함수를 사용하여 클릭 이벤트를 clicked() 함수로 설정합니다.

3. 만약 현재 아이템이 playing 클래스를 갖고 있다면, 해당 클래스를 제거하고 음악 재생 시간을 저장하고 있던 data-duration 속성 값을 가져와서 .audio-duration 태그의 텍스트로 설정합니다.

4. 현재 아이템이 musicIndex와 같은 data-index 값을 가지고 있다면, playing 클래스를 추가하고 .audio-duration 태그의 텍스트를 "재생중"으로 설정합니다.

이렇게 함으로써, 음악 리스트에서 재생 중인 음악 아이템은 playing 클래스를 가지고, 해당 아이템의 재생 시간은 "재생중"으로 표시됩니다. 또한, 음악 리스트 아이템을 클릭하면 clicked() 함수가 호출되어 해당 음악을 재생하도록 설정됩니다.

 

//뮤직 리스트를 클릭하면

음악 리스트에서 특정 음악을 클릭했을 때 실행되는 clicked() 함수와, 페이지 로드 시 초기화를 위한 window.load 이벤트 핸들러를 포함하고 있습니다.

1. clicked() 함수는 클릭한 음악 아이템의 data-index 값을 가져와서 musicIndex 변수에 저장합니다. 

2. loadMusic() 함수를 호출하여 해당 음악을 로드하고, playMusic() 함수를 호출하여 해당 음악을 재생합니다.

3. playListMusic() 함수를 호출하여 음악 리스트를 갱신합니다.

window.load 이벤트 핸들러는 페이지가 로드되면 loadMusic() 함수와 playListMusic() 함수를 호출하여 초기화합니다.

이렇게 함으로써 페이지 로드 시 음악 리스트와 재생 중인 음악을 초기화할 수 있습니다.