[JAVASCRIPT] GAME EFFECT 뮤직플레이어 만들기

자바스크립트를 이용하여 GAME EFFECT 뮤직플레이어 만들기

 

완성화면

 

 

 

 

 

script

-음악에 대한 정보 저장하기

const allMusic = [

    {
        name : "1. summer",
        artist : "Joe Hisaishi",
        img : "music_img01",
        audio : "1.mp3" 
    },{
        name : "2. spring",
        artist : "Joe Hisaishi",
        img : "music_img02",
        audio : "2.mp3" 
    },{
        name : "3. hello",
        artist : "patric",
        img : "music_img03",
        audio : "3.mp3" 
    },{
        name : "4. hello",
        artist : "patric",
        img : "music_img04",
        audio : "4.mp3" 
    },{
        name : "5. hello",
        artist : "patric",
        img : "music_view01",
        audio : "music_audio01.mp3" 
    },{
        name : "6. hello",
        artist : "patric",
        img : "music_view01",
        audio : "music_audio01.mp3" 
    },{
        name : "7. hello",
        artist : "patric",
        img : "music_view01",
        audio : "music_audio01.mp3" 
    },{
        name : "8. hello",
        artist : "patric",
        img : "music_view01",
        audio : "music_audio01.mp3" 
    },{
        name : "9. hello",
        artist : "patric",
        img : "music_view01",
        audio : "music_audio01.mp3" 
    },{
        name : "10. hello",
        artist : "patric",
        img : "music_view01",
        audio : "music_audio01.mp3" 
    }
];

 

 

script

-뮤직플레이어 선택자  지정

const musicWrap = document.querySelector(".music__wrap");
const musicName = musicWrap.querySelector(".music__control .title h3");
const musicArtist = musicWrap.querySelector(".music__control .title p");
const musicView = musicWrap.querySelector(".music__view .image img");
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(".progress");
const musicProgressBar = musicWrap.querySelector(".progress .bar");
const musicProgressCurrent = musicWrap.querySelector(".progress .timer .current");
const musicProgressDuration = musicWrap.querySelector(".progress .timer .duration");

let musicIndex = 2; //현재 음악 인덱스

 

✈. 음악에 대한 정보를 불러옵니다.

-음악재생 

//음악재생
const loadMusic = (num) => {
    musicName.innerText = allMusic[num-1].name;            //뮤직이름
    musicArtist.innerText = allMusic[num-1].artist;        //뮤직아티스트
    musicView.src = `img/${allMusic[num-1].img}.png`;      //뮤직이미지
    musicView.alt = allMusic[num-1].name;                  //뮤직이미지 alt
    musicAudio.src = `audio/${allMusic[num-1].audio}.mp3`; //뮤직파일
};

 

 

 

✈ . 뮤직플레이어가 작동할 수 있도록 기능을 넣어줍니다.

-재생버튼

//재생
const playMusic = () =>{
    musicWrap.classList.add("paused");//정지속성 주기
    musicPlay.setAttribute("title","정지");//속성바꾸기
    musicPlay.setAttribute("class","stop");
    musicAudio.play();
};

-정지

//정지
const pauseMusic = () =>{
    musicWrap.classList.remove("paused");//정지속성 지우기
    musicPlay.setAttribute("title","재생");//속성바꾸기
    musicPlay.setAttribute("class","play");
    musicAudio.pause();//자바스크립트 속성 : 정지기능
};

-이전곡듣기

//이전곡 듣기 버튼
const prevMusic = () =>{
    musicIndex--;//이전곡으로
    if(musicIndex == 0)musicIndex =allMusic.length;
    //(삼항연산자)musicIndex == 1 ? musicIndex = allMusic.length : musicIndex--;

    loadMusic(musicIndex);//플레이되는 음악
    playMusic();//음악재생
};

-다음곡듣기

//다음곡 듣기 
const nextMusic = () =>{
    musicIndex++;
    if(musicIndex == allMusic.length +1)musicIndex = 1;
   //(삼항연산자) musicIndex == allMusic.length ? musicIndex = 1 : musicIndex++

   loadMusic(musicIndex);
    playMusic();
};

 

 

-뮤직 진행바

//뮤직 진행바
musicAudio.addEventListener("timeupdate", e  => {//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}`;
        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}`;
});

 

BUTTON

✈. 뮤직플레이어의 해당 기능을 수행하도록 버튼을 클릭했을 때 호출하는 함수를 작성합니다 

-진행버튼 클릭 : 뮤직 플레이 중 진행bar를 클릭 했을 때

//플레이 버튼 클릭
musicProgress.addEventListener("click", (e) => {
    let progressWidth = musicProgress.clientWidth;    //플레이 바 전체길이
    let clickedOffsetX = e.offsetX;                   //플레이 바를 기준으로 측정되는 x좌표값
    let songDuration = musicAudio.duration;

    //백분위로 나눈 숫자에 다시 전체 길이를 곱해서 현재 재생값으로 바꿈
    musicAudio.currentTime = (clickedOffsetX / progressWidth) * songDuration;
})

-플레이 / 이전곡 / 다음곡  버튼

//플레이 버튼
musicPlay.addEventListener("click", () =>{
    const isMusicPaused = musicWrap.classList.contains("paused");//음악재생중
    isMusicPaused ? pauseMusic() : playMusic();
});
//이전곡 버튼 클릭
musicPrevBtn.addEventListener("click", () => {
    prevMusic();
});
//다음곡 버튼클릭
musicNextBtn.addEventListener("click", () => {
    nextMusic();
});

 

-음악 재생

//음악재생

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