게임이펙트 01-뮤직 리스트 구현

리스트 버튼을 클릭하면 뮤직 리스트가 나오고 노래를 선택하면 해당 곡이 나옵니다.

 

 

뮤직 리스트 / 리스트 닫기버튼

//뮤직 리스트 버튼
musicListBtn.addEventListener("click", () => {
    musicList.classList.add("show");
});
//뮤직 리스트 닫기 버튼
musicListClose.addEventListener("click", () => {
    musicList.classList.remove("show");
});

뮤직 리스트 버튼을 클릭하면 addEventListener를 통해 show 클래스를 추가하여 화면에 나타나게 하고

닫기를 누르면 show 클래스를 삭제하여 뮤직 리스트가 화면에서 사라지게 합니다.

 

뮤직 리스트 구현/ 리스트 음악 시간 불러오기

//뮤직 리스트 구현하기
for(let i=0; i<allMusic.length; i++){
    let li = `
        <li data-index="${i+1}">
            <span class="img">
                <img class="img" src="img/${allMusic[i].img}.png" alt="${allMusic[i].name}">
            </span>
            <span class="title">
                <strong>${allMusic[i].name}</strong>
                <em>${allMusic[i].artist}</em>
                <audio class="${allMusic[i].audio}" src="audio/${allMusic[i].audio}.mp3"></audio>
            </span>
            <span class="audio-duration" id="${allMusic[i].audio}">3:40</span>
        </li>
    `;

    // musicListUl.innerHTML += li;
    musicListUl.insertAdjacentHTML("beforeend", li);

    //리스트에 음악 시간 불러오기
    let liAudioDuration = musicListUl.querySelector(`#${allMusic[i].audio}`);   //리스트에서 시간을 표시할 선택자
    let liAudio = musicListUl.querySelector(`.${allMusic[i].audio}`);            //리스트에서 오디오 파일 선택
    liAudio.addEventListener("loadeddata", () => {
        let audioDuration = liAudio.duration;
        // console.log(audioDuration)
        let totalMin = Math.floor(audioDuration / 60);
        let totalSec = Math.floor(audioDuration % 60);
        if(totalSec < 10) totalSec = `0${totalSec}`;
        liAudioDuration.innerText = `${totalMin}:${totalSec}`;
        liAudioDuration.setAttribute("data-duration", `${totalMin}:${totalSec}`);
    });

}

for 루프를 사용하여 allMusic 배열에서 음악 정보를 하나씩 읽어옵니다. 그리고 HTML 문자열 템플릿 리터럴을 이용하여 각 음악 정보를 표현하는 마크업 코드를 만듭니다. 마크업 코드 안에는 이미지, 제목, 아티스트, 오디오 파일을 포함한 여러 가지 요소가 있습니다.

이 마크업 코드를 musicListUl이라는 ul 요소에 insertAdjacentHTML() 메서드를 이용하여 추가합니다.

각 음악 리스트 항목에는 시간을 표시하는 audio-duration 요소가 있습니다. 각 음악 파일에 대한 duration 정보를 읽어와서 시:분 형식으로 표시합니다.

이를 위해서 querySelector() 메서드를 이용하여 음악 파일과 시간 표시 요소를 선택하고, loadeddata 이벤트를 이용하여 음악 파일이 로드되면 duration 정보를 읽어와 시간 요소에 추가합니다

 

뮤직 리스트에서 곡을 클릭하면 재생되게 하기

//뮤직 리스트를 클릭하면 재생
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 = "재생중";
        }
    }
};
playListMusic();

musicListAll이라는 변수를 선언하여 뮤직 리스트의 모든 항목을 선택합니다. 그리고 for 반복문을 사용하여 각 항목을 하나씩 확인합니다.

각 항목에서 audio-duration 클래스를 가진 요소를 선택하여 audioTag 변수에 할당합니다.

그리고 setAttribute 메소드를 사용하여 해당 항목을 클릭하면 clicked 함수를 호출하도록 onclick 속성을 추가합니다.

그 다음 조건문을 사용하여 현재 재생 중인 곡과 일치하는 항목에 playing 클래스를 추가하고, 해당 항목의 audio-duration 요소의 텍스트를 "재생중"으로 변경합니다.

그 외의 항목들에 대해서는 playing 클래스를 제거하고, data-duration 속성에 저장된 시간으로 audio-duration 요소의 텍스트를 변경합니다.

마지막으로 playListMusic() 함수를 호출하여 페이지가 로드될 때 뮤직 리스트에 재생 중인 곡을 표시하도록 합니다.

 

뮤직리스트 클릭

function clicked(el){
    let getIndex = el.getAttribute("data-index");
    musicIndex = getIndex;
    loadMusic(musicIndex);
    playMusic();
    playListMusic();
}

el 파라미터는 사용자가 선택한 곡의 HTML 요소를 나타냅니다.

이 요소의 data-index 속성 값을 getAttribute 메서드로 가져와서 getIndex 변수에 할당합니다.

musicIndex 변수를 getIndex 값으로 변경하고, loadMusic 함수를 호출하여 선택한 곡을 로드합니다.

그리고 playMusic 함수를 호출하여 음악을 재생합니다.

playListMusic 함수를 호출하여 재생 목록에서 선택한 곡을 강조하여 사용자가 현재 어떤 곡이 재생 중인지 쉽게 파악할 수 있도록 합니다.