728x90
반응형
자바스크립트 게임 이펙트01 : 음악 효과(2)
수업 시간에 배운 내용을 복습하면서 해보겠습니다.
반복(한곡 반복, 랜덤 반복, 전체 반복), 뮤직 리스트에 대한 자바스크립트를 추가했습니다.
코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2 / MUSIC.CSS / JS) / 완성화면
반복(한곡 반복, 랜덤 반복, 전체 반복) JAVASCRIPT
// 반복 버튼 클릭
musicRepeat.addEventListener("click", () => {
let getAttr = musicRepeat.getAttribute("class");
switch(getAttr){
case "repeat" :
musicRepeat.setAttribute("class", "repeat_one");
musicRepeat.setAttribute("title", "한곡 반복");
break;
case "repeat_one" :
musicRepeat.setAttribute("class", "shuffle");
musicRepeat.setAttribute("title", "랜덤 반복");
break;
case "shuffle" :
musicRepeat.setAttribute("class", "repeat");
musicRepeat.setAttribute("title", "전체 반복");
break;
}
});
// 오디오가 끝나면
musicAudio.addEventListener("ended", () => {
let getAttr = musicRepeat.getAttribute("class");
switch(getAttr){
case "repeat" :
nextMusic();
break;
case "repeat_one" :
playMusic();
break;
case "shuffle" :
let randomIndex = Math.floor(Math.random() * allMusic.length + 1); // 랜덤 인덱스 생성
do {
randomIndex = Math.floor(Math.random() * allMusic.length + 1);
} while (musicIndex == randomIndex);
musicIndex = randomIndex; // 현재 인덱스를 랜덤 인덱스로 변경
loadMusic(musicIndex);
playMusic();
break;
}
palyListMusic();
});- 먼저 css 스타일로 한곡 반복, 랜덤 반복, 전체 반복에 대한 class 명을 만들어서 svg 아이콘을 넣어줍니다.
- 먼저 반복 재생 버튼에 해당하는 const musicRepeat = musicWrap.querySelector("#control-repeat");를 만들어줍니다.
- 클릭했을 때의 효과를 주기 위해 addEventListener("click") 메서드를 사용해줍니다. 그리고 변수 getAttr로 musicRepeat의 class 명의 이름을 가져오기 위해 getAttribute( ) 메서드를 사용해서 가져옵니다.
- 종류가 3가지이기 때문에 다중 if문보다는 switch문을 사용해주는 것이 가독성이 좋습니다. 그리고 switch문으로 case를 사용하는데 swtich(getAttr) 조건문으로 case로 class 명이 "repeat", "repeat_one", "shuffle"일 경우에 클릭하면 class명과 title을 변경시켜주기 위해 setAttribute( ) 메서드를 사용해서 변경시켜줍니다.
- 각각 반복 버튼에 종류에 맞춰 리스트가 끝나면 한곡 반복이면 한곡만 나오도록, 랜덤 반복이면 랜덤으로 나오도록, 전체 반복이면 곡의 다음 곡이 나오도록 해줍니다.
- 끝났을 때의 효과를 주기 위해 addEventListener("ended") 메서드를 사용해줍니다. 똑같이 switch문을 사용해주고 위와 같이 getAttribute( ) 메서드를 사용해서 class 명을 가져옵니다.
- swtich(getAttr) 조건문으로 case로 class 명이 "repeat", "repeat_one", "shuffle"일 경우 맞게 입력해줍니다. case "repeat"일 때는 nextMusic( ); 함수를 가져와서 다음 곡을 실행시키고 case "repeat_one"일 때는 palyMusic( ); 함수를 가져와서 그 곡을 실행시켜줍니다. case "shuffle"일 때는 musicIndex의 값을 변경시켜야하기 때문에 변수 randomIndex으로 랜덤 인덱스 값을 생성해줍니다. 이렇게 작성하면 같은 곡이 또 반복될 수 있습니다. 그걸 방지하기 위해 do while문을 사용해줍니. 그래서 변수 randomIndex의 값이 기존 musicIndex의 값과 같은 값이 나오면 다시 랜덤 인덱스를 생성해줍니다. 다른 값이 나오면 musicIndex의 값을 randomIndex의 값으로 변경 시켜주고 인덱스의 값을 매겨변수로 loadMuisc(musicIndex) 함수로 가져가게 해주고 playMusic( ); 함수를 실행시켜줍니다.
뮤직 리스트 JAVASCRIPT
// 뮤직 리스트 버튼
musicListBtn.addEventListener("click", () => {
musicList.classList.add("show");
})
musicListClose.addEventListener("click", () => {
musicList.classList.remove("show");
})
// 뮤직 리스트 구현하기
for(let i=0; i<allMusic.length; i++){
let li = `
<li data-index="${i+1}">
<span class="img">
<img src="img/${allMusic[i].img}.png" alt="${allMusic[i].img}">
</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:05</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}`);
});
};
// 뮤직 리스트를 클릭하면 재생
function palyListMusic(){
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");
musicIndex = getIndex;
loadMusic(musicIndex);
playMusic();
palyListMusic();
musicList.classList.remove("show");
};- 먼저 HTML 코드와 CSS 스타일을 먼저 만들고 JAVASCRIPT를 입력해줍니다.
- 먼저 반복 재생 버튼에 해당하는 const musicList = musicWrap.querySelector(".music__list");를 만들어줍니다.
- 클릭했을 때의 효과를 주기 위해 addEventListener("click") 메서드를 사용해줍니다. class .show를 먼저 css로 display:block;를 먼저 만들어주고 classList.add("show")로 추가시켜주고 classList.remove("show")로 제거시켜줍니다.
- 뮤직 리스트 목록을 구현하기위해 for문을 이용해서 allMusic의 갯수만큼 반복시켜줍니다. 코드 태그를 ``(백텟)을 사용해서 태그를 입력하고 값을 불러오는 것은 ${ }을 사용해서 입력해주고 변수로 저장시켜줍니다. 계속해서 추가로 저장해줄거기때문에 입력할 부분에 innerHTML을 사용하고 +=를 사용해서 추가로 저장시켜줍니다. 다른 방법으로는 insertAdjacentHTML( ) 메서드를 사용해서 입력할 수 있습니다.
- 리스트에 음악 시간을 불러오기위해 리스트에 시간을 표시할 선택자를 변수 liAudioDuration으로 만들고 리스트에 오디오 파일 선택자를 변수 liAudio로 만들어줍니다. 이제 오디오의 시간을 불러오기 위해 addEventListener("loadeddata") 메서드를 사용해줍니다. 블로그 https://dongjin6539.tistory.com/93에 있는 뮤직 진행바 부분에 전체 시간을 만들어준 것처럼 입력해줍니다.
- 리스트에 뮤직을 클릭하면 재생을 playListMusic 함수를 만들고 뮤직 리스트 목록을 변수 musicListAll로 만들어줍니다. for문을 이용해서 musicListAll의 갯수만큼 반복시켜줍니다. 각 리스트 목록의 .audio-duration의 class명을 변수 audioTag로 저장시켜줍니다. 그리고 각 리스트 목록을 클릭했을때 클릭했을때의 값을 가져오기 위해 setAttribute("onclick", "click(this)") 메서드를 사용해줍니다. 먼저 css로 playing이라는 만들어주고 if문을 사용해 리스트 목록에 playing class 명이 포함되어있는지 확인을 먼저 해줍니다. 포함되어있으면 romove로 제거해주고 data-duration 리스트의 시간을 가져와서 innerText로 텍스트를 입력해줍니다. 뮤직 리스트 목록의 data-index의 값이 현재 뮤직의 값인 변수 musicIndex의 값과 같다면 playing을 add로 class 명을 추가시키고 텍스트를 innerText로 재생중을 입력해줍니다.
728x90
반응형
