뮤직플레이어기능 만들기
코드블럭
const allMusic = [
{
name : "1.Dangerously",
artist : "Charlie Puth",
img : "music_view01.png",
audio : "music_audio01"
}, {
name : "2.낭만교향곡",
artist : "빅나티",
img : "music_view02.png",
audio : "music_audio02"
}, {
name : "3.첫사랑",
artist : "백아",
img : "music_view03.png",
audio : "music_audio03"
}, {
name : "4.INDUSTRY BABY",
artist : "Lil Nas X Jack Harlow",
img : "music_view04.png",
audio : "music_audio04"
}, {
name : "5.빛이 나는 너에게 ",
artist : "던(DAWN)",
img : "music_view05.png",
audio : "music_audio05"
}, {
name : "6.인사",
artist : "범진",
img : "music_view06.png",
audio : "music_audio06"
}, {
name : "7.Rainy day",
artist : "PATEKO 파테코(Feat.ASH ISLAND Skinny Brown) ",
img : "music_view07.png",
audio : "music_audio07"
}, {
name : "8.연애의 발명",
artist : "빅나티",
img : "music_view08.png",
audio : "music_audio08"
}, {
name : "9.Tired",
artist : "Alan Walker ft Gavin James",
img : "music_view01.png",
audio : "music_audio09"
}, {
name : "10.INVU",
artist : "태연",
img : "music_view10.png",
audio : "music_audio10"
}
];
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(".music__contents .timer .current")
const musicProgressDuration = musicWrap.querySelector(".music__contents .timer .duration")
// const musicPlay =
let musicIndex = 10; //현재 음악 인덱스
// 음악 재생
const loadMusic = (num) => {
musicName.innerText = allMusic[num-1].name; //뮤직 이름
musicArtist.innerText = allMusic[num-1].artist; //아티스트 이름
musicView.src = `img/${allMusic[num-1].img}`; //뮤직이미지
musicView.alt = allMusic[num-1].name; //뮤직이미지 alt
musicAudio.src =`audio/${allMusic[num-1].audio}.mp3` //뮤직파일
}
// window.addEventListener("load",() => {
// loadMusic(musicIndex);
// musicAudio.play();
// })
//재생
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--;
musicIndex <= 1 ? musicIndex = 9 : musicIndex--;
// if(musicIndex<=1){
// musicIndex = 9;
// }else{
// musicIndex--;
// }
loadMusic(musicIndex);
playMusic();
}
//다음 곡 듣기
const nextMusic = () => {
//1 2 3 4 5 6 7 8 9 1 2 3 4 5 6..
// musicIndex++;
// if(musicIndex == 9) musicIndex == 1;
musicIndex == allMusic.length ? musicIndex = 1 : musicIndex++;
loadMusic(musicIndex);
playMusic();
}
//뮤직 진행바
musicAudio.addEventListener("timeupdate", e => {
console.log(e)
const currentTime = e.target.currentTime; //현재 재생되는 시간
const duration = e.target.duration; //오디오의 총 길이
let progressWidth = (currentTime/duration) * 100; //전체길이에서 현재 진행되는 시간을 백분위단위로 나누면 현재진행되는 길이를 알수 있음
console.log(progressWidth)
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}`;
});
//진행 버튼 클릭
musicProgress.addEventListener("click", (e) => {
let progressWidth = musicProgress.clientWidth; //진행바 전체 길이
let clickOffsetX = e.offsetX; //진행바를 기준으로 측정되는 X값 좌표
let songDuration = musicAudio.duration; //오디오 전체 길이
//백분위로 나눈 숫자에 다시 전체 길이를 곱해 현재 재생값으로 바꿈
musicAudio.currentTime = (clickOffsetX /progressWidth) * songDuration;
console.log(songDuration)
});
//플레이 버튼 클릭
musicPlay.addEventListener("click", () => {
const isMusicPaused = musicWrap.classList.contains("paused"); //음악 재생중
isMusicPaused ? pauseMusic() : playMusic();
// playMusic();
});
//이전곡 버튼 클릭
musicPrevBtn.addEventListener("click", () => {
prevMusic();
});
//다음곡 버튼 클릭
musicNextBtn.addEventListener("click", () => {
nextMusic();
});
// //음악 재생
// 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` //뮤직파일
// }
window.addEventListener("load", ()=>{
loadMusic(musicIndex);
console.log(musicIndex);
});보충설명
음악재생
✨loadMusic 함수는 num 매개변수를 받아 해당 번호의 음악 정보를 화면에 출력하는 역할을 합니다.
✨allMusic 배열에서 num-1 번째 인덱스의 뮤직 정보를 가져와 뮤직 이름, 아티스트 이름, 뮤직 이미지 파일 경로, 뮤직 파일 경로를 각각 musicName, musicArtist, musicView.src, musicAudio.src 속성에 할당합니다.
✨playMusic 함수는 뮤직 재생 버튼을 눌렀을 때 실행되며, musicWrap 클래스에 paused 클래스를 추가하여 CSS를 이용해 재생 중임을 나타내고, musicPlay 버튼의 title 속성과 class 속성을 각각 "정지"와 "stop"으로 변경하여 정지 버튼으로 변환합니다. 그리고 musicAudio의 play() 메서드를 호출하여 뮤직을 재생합니다.
✨pauseMusic 함수는 정지 버튼을 눌렀을 때 실행되며, musicWrap 클래스에서 paused 클래스를 제거하여 재생 중이지 않음을 나타내고, musicPlay 버튼의 title 속성과 class 속성을 각각 "재생"과 "play"로 변경하여 재생 버튼으로 변환합니다. 그리고 musicAudio의 pause() 메서드를 호출하여 뮤직을 일시 정지합니다.
이전곡, 다음곡 넘어가기
✨prevMusic 함수는 이전 곡 버튼을 눌렀을 때 실행되며, 현재 재생 중인 곡의 이전 곡을 불러옵니다.
✨musicIndex 변수가 1보다 작아지지 않도록 조건문을 사용하여, 만약 musicIndex가 1보다 작아진다면 musicIndex에 9를 할당합니다. 그리고 loadMusic 함수를 호출하여 musicIndex 번째 음악 정보를 불러오고, playMusic 함수를 호출하여 해당 음악을 재생합니다.
✨nextMusic 함수는 다음 곡 버튼을 눌렀을 때 실행되며, 현재 재생 중인 곡의 다음 곡을 불러옵니다. musicIndex 변수가 allMusic 배열의 길이를 초과하지 않도록 조건문을 사용하여, 만약 musicIndex가 allMusic 배열의 길이를 초과한다면 musicIndex에 1을 할당합니다.
✨loadMusic 함수를 호출하여 musicIndex 번째 음악 정보를 불러오고, playMusic 함수를 호출하여 해당 음악을 재생합니다.
뮤직진행바
✨addEventListener 함수는 지정된 이벤트가 발생할 때마다 해당 함수를 실행하도록 합니다. 여기서는 timeupdate 이벤트가 발생할 때마다 함수를 실행하도록 지정했습니다. timeupdate 이벤트는 오디오가 재생되면서 재생 시간이 변경될 때마다 발생합니다.
✨console.log(e) 는 현재 이벤트 객체를 콘솔에 출력하는 코드입니다. 이벤트 객체에는 다양한 정보들이 담겨있는데, 이 코드에서는 현재 시간과 총 재생 시간 정보를 가져오기 위해 사용합니다.
✨currentTime 변수는 현재 재생되고 있는 시간을 초 단위로 저장합니다. duration 변수는 오디오의 총 길이를 초 단위로 저장합니다.
✨progressWidth 변수는 현재 재생 시간과 총 재생 시간을 이용하여 진행 바의 길이를 계산합니다. progressWidth 값은 퍼센트 단위로 저장되며, HTML과 CSS를 사용하여 진행 바를 구현할 때 사용됩니다.
전제시간, 진행시간, 진행버튼 클릭
✨ loadeddata 이벤트를 이용하여 오디오 파일이 로드될 때 전체 길이를 구하고 musicProgressDuration 요소에 표시합니다.
✨timeupdate 이벤트를 이용하여 현재 시간을 구하고, 분과 초 단위로 변환한 후 musicProgressCurrent 요소에 표시합니다.
✨ click 이벤트를 이용하여 클릭한 위치의 좌표 값을 구하고, clickOffsetX / progressWidth 값을 구한 후 오디오 전체 길이와 곱하여 현재 재생 위치를 구합니다. 이렇게 구한 위치를 currentTime 속성에 할당하면 해당 위치에서 음악이 재생됩니다.
플레이버튼 클릭, 이전곡/다음곡 버튼클릭
✨musicPlay.addEventListener("click", () => {...}): 플레이 버튼을 클릭했을 때, musicWrap 클래스가 있는지를 확인하여 음악이 재생중이면 pauseMusic() 함수를 호출하고, 그렇지 않으면 playMusic() 함수를 호출합니다.
✨musicPrevBtn.addEventListener("click", () => {...}): 이전곡 버튼을 클릭했을 때, prevMusic() 함수를 호출하여 이전 곡을 재생합니다.
✨musicNextBtn.addEventListener("click", () => {...}): 다음곡 버튼을 클릭했을 때, nextMusic() 함수를 호출하여 다음 곡을 재생합니다.
✨window.addEventListener("load", () => {...}): 웹페이지가 로드될 때, loadMusic(musicIndex) 함수를 호출하여 초기 음악 파일을 로드합니다.
✨loadMusic(num) 함수는 num 번째 음악 파일을 로드하여 플레이어에 표시하는 기능을 합니다. playMusic() 함수는 음악을 재생하고, pauseMusic() 함수는 음악을 일시정지합니다. prevMusic() 함수와 nextMusic() 함수는 각각 이전 곡과 다음 곡을 재생하는 기능을 합니다.