티스토리 뷰
{
const musicWrap = document.querySelector(".wrap__music");
const musicImg = musicWrap.querySelector(".music__img img");
const musicName = musicWrap.querySelector(".music__song .name");
const musicArtist = musicWrap.querySelector(".music__song .artist");
const musicAudio = musicWrap.querySelector("#main-audio");
const musicPlay = musicWrap.querySelector("#control-play");
const musicPrevBtn = musicWrap.querySelector("#control-prev");
const musicNextBtn = musicWrap.querySelector("#control-next");
const musicProgress = musicWrap.querySelector(".music__progress");
const musicProgressBar = musicWrap.querySelector(".bar");
const musicProgressCurrent = musicWrap.querySelector(".current");
const musicProgressDuration = musicWrap.querySelector(".duration");
const musicRepeat = musicWrap.querySelector("#control-repeat");
const musicList = musicWrap.querySelector(".music__list");
const musicListBtn = musicWrap.querySelector("#control-list");
const musicListClose = musicList.querySelector(".close")
const musicListUl = musicList.querySelector(".list ul")
let musicIndex = Math.floor((Math.random() * allMusic.length) + 1 );
//음악 재생
function loadMusic(num){
musicImg.src = `images/${allMusic[num -1].img}.jpg`;
musicImg.art = allMusic[num -1].name;
musicName.innerText = allMusic[num -1].name;
musicArtist.innerText = allMusic[num -1].artist;
musicAudio.src = `songs/${allMusic[num -1].audio}.mp3`;
}
//플레이 버튼
function playMusic(){
musicWrap.classList.add("paused");
musicPlay.innerText = "pause"
musicPlay.setAttribute("title", "재생")
musicAudio.play();
}
//정지 버튼
function pauseMusic(){
musicWrap.classList.remove("paused")
musicPlay.innerText = "play_arrow";
musicPlay.setAttribute("title", "정지")
musicAudio.pause();
}
//이전 곡 듣기 버튼(1)
function pervMusic(){
musicIndex--;
//번호 값이 1이면 --> 20으로 변경
musicIndex < 1 ? musicIndex = all.Music.length : musicIndex = musicIndex;
loadMusic(musicIndex);
playMusic();
playListMusic()
}
//다음 곡 듣기 버튼(20)
function nextMusic(){
musicIndex++;
//번호값이 20이면 --> 1로 변경
musicIndex > allMusic.length ? musicIndex = 1 : musicIndex = musicIndex;
loadMusic(musicIndex);
playMusic();
playListMusic()
}
//뮤직 진행바 진행되고있는 상태
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 audioDuration = musicAudio.duration;
let totalMin = Math.floor(audioDuration / 60) //몇 분
let totalSec = Math.floor(audioDuration % 60) //몇 초
if(totalSec < 10) totalSec = `0${totalSec}`//totalSec에 0이 붙게 설정 안붙으면 2:2 나옴 붙으면 2:02 나옴
musicProgressDuration.innerText = `${totalMin}:${totalSec}`; //음악 총 길이가 나오게 설정
})
//진행되고있는 현재 시간 설정
let currentMin = Math.floor(currentTime / 60)
let currentSec = Math.floor(currentTime % 60)
if(currentSec < 10) currentSec = `0${currentSec}`
musicProgressCurrent.innerText = `${currentMin}:${currentSec}`
})
//플레이 버튼
musicPlay.addEventListener("click", ()=> {
const isMusicPaused = musicWrap.classList.contains("paused");
isMusicPaused ? pauseMusic() : playMusic();
});
//이전 곡 버튼
musicPrevBtn.addEventListener("click", () => {
pervMusic();
});
//다음 곡 버튼
musicNextBtn.addEventListener("click", () => {
nextMusic();
});
//진행 버튼 클릭
musicProgress.addEventListener("click", (e)=>{
let progressWidth = musicProgress.clientWidth
let clickedOffestX = e.offsetX;
let songDuration = musicAudio.duration;
musicAudio.currentTime = (clickedOffestX / progressWidth) * songDuration;
playMusic();
})
//반복 버튼 this쓰려면 function을 써야함 화살표 함수에선 this를 못 씀
musicRepeat.addEventListener("click", () => {
let getText = musicRepeat.innerText;
//switch문을 이용해서 클릭할때마다 3개의 메뉴가 바뀌게 만듬
switch(getText){
case "repeat":
musicRepeat.innerText = "repeat_one"
musicRepeat.setAttribute("title", "한곡 반복")
break;
case "repeat_one":
musicRepeat.innerText = "shuffle"
musicRepeat.setAttribute("title", "랜덤 반복")
break;
case "shuffle":
musicRepeat.innerText = "repeat"
musicRepeat.setAttribute("title", "전체 반복")
break;
}
})
//오디오가 끝나고
musicAudio.addEventListener("ended", () => {
let getText = musicRepeat.innerText
switch(getText){
case "repeat":
nextMusic();
break;
case "repeat_one": //한 곡 버튼을 누르면
loadMusic(musicIndex)
playMusic();
break;
case "shuffle": //랜덤재생
let randIndex = Math.floor((Math.random() * allMusic.length) + 1 )
do { //do while문을 써서 musicIndex 와 randIndex 같을때만 실행함
randIndex = Math.floor((Math.random() * allMusic.length) + 1 )
} while (musicIndex == randIndex);
musicIndex = randIndex;
loadMusic(musicIndex)
playMusic();
playListMusic()
break;
}
})
//뮤직 리스트 버튼
musicListBtn.addEventListener("click", () => {
musicList.classList.add("show");
})
//뮤직 리스트 닫기 버튼
musicListClose.addEventListener("click", ()=>{
musicList.classList.remove("show")
})
//뮤직 리스트 구현하기
for(let i=0; i<allMusic.length; i++){
let li = `
${allMusic[i].name}${allMusic[i].artist}
3:36`; musicListUl.insertAdjacentHTML("beforeend", li); let liAudioDuration = musicListUl.querySelector(`#${allMusic[i].audio}`);//20개의 노래들을 선택함 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}`//totalSec에 0이 붙게 설정 안붙으면 2:2 나옴 붙으면 2:02 나옴 liAudioDuration.innerText = `${totalMin}:${totalSec}`; //음악 총 길이가 나오게 설정 liAudioDuration.setAttribute("data-duration", `${totalMin}:${totalSec}` ); }) } //뮤직 리스트 클릭하면 클릭 한 음악이 나오게 function playListMusic(){ const musicListAll = musicListUl.querySelectorAll("li"); for(let j=0; j<musicListAll.length; j++){ let audioTag = musicListAll[j].querySelector(".audio-duration"); if(musicListAll[j].classList.contains("playing")){ musicListAll[j].classList.remove("playing") let adDuration = audioTag.getAttribute("data-duration"); audioTag.innerText = adDuration } if(musicListAll[j].getAttribute("data-index") == musicIndex){ musicListAll[j].classList.add("playing"); audioTag.innerText = "재생중" } musicListAll[j].setAttribute("onclick", "clicked(this)") //클릭하면 함수화시켜줌 onclick } } //리스트 클릭하기 function clicked(el){ //클릭한 해당 번호를 가져옴 let getLiIndex = el.getAttribute("data-index"); musicIndex = getLiIndex; loadMusic(musicIndex); playMusic() playListMusic() } //플레이 window.addEventListener("load", ()=>{ loadMusic(musicIndex); playListMusic() }); }
댓글
© 2018 webstoryboy