게임효과 -2-1 music player (Jquery , gsap)

JAVASCRIPT로 music player를 만들어볼게요 !

게임효과 -1 (Jquery , gsap)

 

전체소스보러가기

 

이전소스도 참조해 주세요 ! 

 

오늘은 뮤직플레이어 기능을 추가 할거에요 

재생, 정지, 다음곡, 이전곡, 진행바(duration)기능, 시간계산 요런 기능들을 추가했어요 

 

먼저 HTML부분을 볼게요 ! 

<div class="music__wrap">
        <div class="music__inner">
            <div class="music__header">
                <span class="left"></span>
                <h2>Music</h2>
                <span class="right"></span>
            </div>
            <div class="music__contents">
                <div class="music__view">
                    <div class="image">
                        <img src="img/music_view01.png" alt="음악">
                    </div>

                </div>
                <div class="music__control">
                    <div class="title">
                        <h3>노래 제목</h3>
                        <p>노래 작가 이름</p>
                    </div>
                    <div class="progress">
                        <div class="bar">
                            <audio id="main-audio" src="audio/Anxiety - NEFFEX.mp3"></audio>
                        </div>
                        <div class="timer">
                            <span class="current">0</span>
                            <span class="duration">1</span>
                        </div>
                        <div class="control">
                            <span>
                                <i class="repeat" id="control-repeat" title="전체 반복"></i>
                            </span>
                            <span>
                                <i class="prev" id="control-prev" title="이전곡 재생"></i>
                            </span>
                            <span>
                                <i class="play" id="control-play" title="재생"></i>
                            </span>
                            <span>
                                <i class="next" id="control-next" title="다음곡 재생"></i>
                            </span>
                            <span>
                                <i class="list" id="control-list" title="재생 목록"></i>
                            </span>
                            <!-- <span class="repeat_one">한곡 반복</span>
                            <span class="shuffle">랜덤 반복</span>
                            <span class="stop">정지 반복</span> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="music__footer"></div>
        </div>
    </div>

구조는 요렇게 잡았구요 

재생관련 아이콘들은 svg파일을 이용해서 이미지를 넣어줬어요 ! 

 

스크립트 부분 볼게요 ! 

// control-play 
let musicIndex =1; //현재 음악 인덱스

// 음악재생
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 = () =>{
    muscWrap.classList.add("paused");
    musicPlay.setAttribute("title","정지");
    musicPlay.setAttribute("class","stop");
    musicAudio.play();
}
// 정지
const pauseMusic = () =>{
    muscWrap.classList.remove("paused");
    musicPlay.setAttribute("title","재생");
    musicPlay.setAttribute("class","play");
    musicAudio.pause();
}
//이전곡 듣기 
const prevMusic = ()=>{
    
    musicIndex == 1 ? musicIndex= allMusic.length :musicIndex--;
    loadMusic(musicIndex);
    playMusic();
}
//다음곡 듣기
const nextMusic = ()=>{
    // musicIndex++;
    musicIndex == allMusic.length ? musicIndex=1 : musicIndex++;
    loadMusic(musicIndex);
    playMusic();
}

//뮤직 진행바
musicAudio.addEventListener("timeupdate", e=>{
    // console.log(e);
    let currentTime = e.target.currentTime; //재생시간
    let 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}`;
    })
    //진행 시간
    // musicProgressCurrent 
    let currentMin = Math.floor(currentTime/60) ;
    let currentSec = Math.floor(currentTime%60) ;
    if(currentSec < 10)currentSec = `0${currentSec}`;
    musicProgressCurrent.innerText = `${currentMin} : ${currentSec}`;
});
//진행 시간 클릭 
musicProgress.addEventListener("click", (e)=>{
    let progressWidth = musicProgress.clientWidth   //진행 전체 길이 
    let clickOffsetX = e.offsetX ;                  //진행바 기준 측정되는 x 좌표 값
    let songDuration = musicAudio.duration;         //오디오 전체 길이
    
    //백분위 단위로 나눈 숫자를 전체 길이를 곱해서 현재 재생값
    musicAudio.currentTime = Math.floor((clickOffsetX/progressWidth) * songDuration);
})
//이전곡 버튼 클릭
musicPrevBtn.addEventListener("click",()=>{
    prevMusic();
});

//다음곡 버튼 클릭
musicNextBtn.addEventListener("click",()=>{
    nextMusic();
});
// 플레이 버튼 클릭 
musicPlay.addEventListener("click",()=>{
    const isMusicPaused = muscWrap.classList.contains("paused");
    isMusicPaused ? pauseMusic() : playMusic();

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

스크립트에서 대부분의 music__wrap안 이벤트를 처리해줬어요 

.addEventListener 기능중

timeupdate,loadeddata기능을 이용해서 구현했어요 

시간이 지남에따라, 데이터를 불러온것 

그리고 javascipt 의 play() 기능으로 재생시켰습니다.