안녕하세요~ 오늘은 저번에 했던 게임 이펙트를 이어서 작업해보겠습니다!
뮤직리스트 버튼, 뮤직리스트 닫기 버튼
// 뮤직 리스트 버튼
musicListBtn.addEventListener("click", () => {
musicList.classList.add("show");
});
// 뮤직 리스트 닫기 버튼
musicListClose.addEventListener("click", () => {
musicList.classList.remove("show");
});
"musicListBtn"와 "musicListClose" 두 개의 버튼에 이벤트 리스너를 추가하는 JavaScript 코드입니다. "musicListBtn" 버튼을 클릭하면 "musicList" 요소에 "show" 클래스가 추가되고, "musicListClose" 버튼을 클릭하면 "show" 클래스가 제거됩니다.
뮤직 리스트 구현하기
// 뮤직 리스트 구현하기
for(let i=0; i<allMusic.length; i++){
let li = `
<li data-index="${i+1}">
<img class="img" src="img/${allMusic[i].img}.png" alt="${allMusic[i].name}">
<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:04</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;
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}`);
});
}
"musicListBtn"와 "musicListClose" 두 개의 버튼에 이벤트 리스너를 추가하는 JavaScript 코드입니다. "musicListBt"allMusic"이라는 배열을 반복하며 리스트를 생성합니다. 각 음악에 대한 이미지, 제목, 아티스트 이름, 오디오 파일 및 시간이 포함된 각 항목의 HTML 코드가 생성됩니다. 그 후, 생성된 HTML 코드가 "musicListUl" 요소에 추가됩니다.
이 코드는 각 항목의 오디오 파일을 로드하고, 로드가 완료되면 해당 오디오 파일의 총 길이를 계산하여 시간을 표시합니다. 이 시간은 "liAudioDuration" 요소에 추가되며, 이 요소는 해당 항목의 "id" 속성을 사용하여 선택됩니다. 추가적으로, "data-duration" 속성도 설정되어서 나중에 이를 사용하여 플레이어 UI에서 더 많은 정보를 표시할 수 있습니다.n" 버튼을 클릭하면 "musicList" 요소에 "show" 클래스가 추가되고, "musicListClose" 버튼을 클릭하면 "show" 클래스가 제거됩니다.
뮤직 리스트를 클릭했을 때
// 뮤직 리스트를 클릭하면
function clicked(el){
let getIndex = el.getAttribute("data-index");
musicIndex = getIndex;
loadMusic(musicIndex);
playMusic();
playListMusic();
}
뮤직 리스트의 각 항목을 클릭할 때 호출됩니다. 함수는 해당 요소의 "data-index" 속성을 가져와서 "musicIndex" 변수에 할당합니다. 그 후, "loadMusic" 함수를 호출하여 선택한 음악을 로드하고, "playMusic" 함수를 호출하여 음악을 재생합니다. 마지막으로, "playListMusic" 함수를 호출하여 플레이어 UI에 선택한 음악을 업데이트합니다.
뮤직 리스트를 클릭하면 재생함
// 뮤직 리스트를 클릭하면 재생
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 = "재생중";
}
}
}
뮤직 리스트의 각 항목을 클릭하면 호출됩니다. 함수는 먼저 "musicListAll" 변수에 모든 뮤직 리스트 항목을 가져옵니다. 그런 다음, 각 항목에 대해 "clicked" 함수를 클릭 이벤트 핸들러로 등록하고, 선택된 항목과 일치하는 경우 "playing" 클래스를 추가합니다. "audio-duration" 요소의 텍스트는 "재생중"으로 설정되고, 이전에 재생 중인 항목은 "playing" 클래스가 제거되고 시간이 다시 표시됩니다.
완성된 페이지와 코드보기