게임 이펙트 음악 재생

 

HTML

JS

const allMusic = [
    {
        name : "1. 저리가라",
        artist : "parrick parrick",
        img: "music_view01",
        audio: "music_audio01"
    },{
        name : "2. 저리가라",
        artist : "parrick parrick",
        img: "music_view02",
        audio: "music_audio02"
    },{
        name : "3. 저리가라",
        artist : "parrick parrick",
        img: "music_view03",
        audio: "music_audio03"
    }
  ];

- 음악에 정보를 allMusic에 배열안 객체로 저장합니다.

//선택자
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 = 1; //현재 음악 인덱스

- 필요한 선택자의 class를 html에서 가져와 만들어 준후, 현재 음악의 인덱스를 저장해줍니다.

 

※윈도우 로드시 실행

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

- 윈도우에 load 이벤트 가 발생하면 다음 loadMusic함수에 현재음악의 인덱스 값을 넣어 실행합니다.

load	웹 페이지의 모든 리소스(이미지, 스타일 시트 등)가 완전히 로드되고 렌더링될 때 발생하는 이벤트입니다.

 

※음악 재생 파일 가져오기

//음악 재생 파일
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`;   //뮤직 파일
};

- 받아온 현재 음악의 인덱스 값을 num으로 저장고 음악 저장 해놓은 allMusic에서 정보를 가져옵니다.

- src의 정보를 가져올때는 문자열과 불러올 배열을 따로 구분을 지어 주어야하기 때문에 쌍따움표 대신 `백틱을 사용하며 

문자열을 적고 배열식을 적을 때에는 $를 써서 {}안에 배열식을 넣어 주어여 합니다.

 

※음악 재생/정지 하기

// 플레이 버튼
musicPlay.addEventListener("click", () => {
    const isMUsicPaused = musicWrap.classList.contains("paused");//클라스가 있는지 확인하는contains 음악재생중

    isMUsicPaused ?  pauseMusic() : palyMusic();
});

- 플레이 버튼을 누르면 음악이 실행 되게 해주기 위해 musicWrap에 클라스에 paused 가 있는지 확인하는 메서드 contains 를 isMUsicPaused에 저장하고 삼항연산자로 있으면 pauseMusic()을 실행하고 없으면 palyMusic()을 실행합니다. 지금은 클라스에 paused 가 없으므로 palyMusic()가 실행됩니다.

//재생
const palyMusic = () => {
    musicWrap.classList.add("paused");
    musicPlay.setAttribute("title", "정지");
    musicPlay.setAttribute("class", "stop");
    musicAudio.play();
};

- 음악을 재생하기전에 musicWrap에 paused 클라스를 넣어주고 musicPlay에 있는 속성값을 setAttribute로 바꾸어 줍니다. 그러면 플레이 버튼이 정지 버튼으로 바뀌게 되며, play()를 실행하며 음악이 재생됩니다.

 

//정지
const pauseMusic = () => {
    musicWrap.classList.remove("paused");
    musicPlay.setAttribute("title", "재생");
    musicPlay.setAttribute("class", "play");
    musicAudio.pause();

};

- 다시 한번 플레이가 있던 버튼을 누르게 되면 musicWrap에 있던 paused 클라스를 지워 주고 setAttribute로 musicPlay에 있는 속성값을 바꾸어준후 pause()를 실행하여 음악을 멈춰줍니다.

contains	DOM 요소의 자식 요소 중에서 특정 요소가 포함되어 있는지 여부를 확인하는 메서드입니다.
setAttribute	DOM 요소의 속성을 설정하는 메서드입니다. 이 메서드를 사용하여 JavaScript로 HTML 요소의 속성 값을 동적으로 변경할 수 있습니다.
play()	오디오나 비디오 등의 매체를 재생하는 메소드입니다.
pause()	오디오를 일시 정지하는 메소드입니다.

 

※이전곡 듣기

//이전곡 듣기 버튼
musicPrevbtn.addEventListener("click", () => {
    prevMusic();
});

- musicPrevbtn를 클릭 햇을때   prevMusic()를 실행합니다.

//이전곡 듣기 
const prevMusic = () => {
    musicIndex == 1 ? musicIndex = allMusic.length : musicIndex--;

    loadMusic(musicIndex);
    palyMusic();
    
};

- 삼항연산자로 현재 재생중인 음악의 순서가 1과 같을때 현재 재생중인 음악의 순서는 모든음악의 갯수로 가게되고 아닐경우 musicIndex-- 를 해줍니다.

-적용된값을  loadMusic(musicIndex) 에 실행시키고 보낸후 palyMusic() 함수를 실행 시킵니다.

 

※다음곡 듣기

//다음곡 듣기 버튼
musicNextbtn.addEventListener("click", () => {
    nextMusic();
});

- musicNextbtn를 클릭 햇을때  nextMusic()를 실행합니다.

//다음곡 듣기 
const nextMusic = () => {
    musicIndex == allMusic.length ? musicIndex = 1 : musicIndex++;

    console.log(musicIndex)
    loadMusic(musicIndex);
    palyMusic();
};

- 삼항연산자로 현재 재생중인 음악의 순서가 allMusic.length와 같을때 musicIndex = 1이 되고 아닐경우 musicIndex++ 해줍니다.

-적용된값을  loadMusic(musicIndex) 에 실행시키고 보낸후 palyMusic() 함수를 실행 시킵니다.

 

※ 뮤직 진행바 설정 해주기

//뮤직 진행바
musicAudio.addEventListener("timeupdate", e => {
    const currentTime = e.target.currentTime;           //재생되는시간
    const duration = e.target.duration;                 //오디오의 총길이
    let progressWidth = (currentTime/duration) * 100 ;  //전체길이에서 현재 진행되는 시간을 백분위 단위로 나누면 그값의 width값을 알수 있다.

    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 currenMin = Math.floor(currentTime / 60);
    let currenSec = Math.floor(currentTime % 60);

    if(currenSec < 10) currenSec = `0${currenSec}`;
    musicProgressCurrent.innerText = `${currenMin}:${currenSec}`;
});

// 뮤직바 진행

- musicAudio에  timeupdate이벤트가 발생 할때마다 그값을 e에 저장하여 가져 옵니다.

- e의 값에서 재생되는 시간인 currentTime 값을 currentTime에 저장하고,오디오의 총길이인 duration값을 duration에 저장합니다.

- 현재 진행되는 뮤직바의 width값을 알기위해(currentTime/duration) * 100을 하여 progressWidth저장합니다.

- 그후musicProgressBar에 width값을 progressWidth의% 만큼 값이 변경 될때마다 반복합니다.

 

//전체시간

현재 음악의 전체 시간을 구하기위해 loadeddata 이벤트가 실행 될때 musicAudio의duration값을 가져와 audioDuration에 저장해 줍니다. 그후 분과 초를 구하기 위해 audioDuration에 나누기60을 하여 분을 구하고 audioDuration에%60의 나머지값으로 초를 구합니다.

이때 초가 10보다 낮을때 앞에 0을 붙여줍니다.

 

//진행 시간

현재 음악의 진행 시간을 알기위해 뮤직진행 바에서 currentTime을 가져와 나누기60을 하여 분을 가져오고 %60을 하여 초를 가져옵니다 이때 초가 10보다 낮을때 앞에 0을 붙여 줍니다.

timeupdate	<audio> 또는 <video> 요소에서 발생하는 이벤트 중 하나입니다. 이 이벤트는 재생 중인 미디어의 재생 위치가 변경될 때마다 발생합니다.
loadeddata	<audio> 또는 <video> 요소에서 발생하는 이벤트 중 하나입니다. 이 이벤트는 미디어의 재생이 가능한 상태가 되었을 때(즉, 미디어가 로드되어 재생할 수 있는 상태가 되었을 때) 발생합니다.
duration	<audio> 또는 <video> 요소에서 제공되는 속성 중 하나입니다. 이 속성은 현재 재생 중인 미디어의 전체 길이(총 재생 시간)를 초 단위로 나타냅니다

//진행 버튼 클릭

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

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

뮤직바를 클릭했을때 그곳으로 이동하기위해 musicProgress를 클릭했을때 progressWidth에 진행바의 전체길이를 가져오고, clickedOffsetX 으로 진행바를 기준으로 측정되는 x을 좌표 값을 저장합니다.그후 songDuration 에 오디오의 전체길이를 가져오고 (clickedOffsetX / progressWidth) * songDuration;을 하여 musicAudio.currentTime을 클릭한위치로 바꿔줍니다.