이 코드는 웹 페이지의 오디오 플레이어를 제어하는 JavaScript 코드입니다. 코드는 여러 변수를 정의하고, 함수를 선언하여 다음과 같은 작업을 수행합니다: 이 HTML 코드는 뮤직 플레이어의 UI를 구성합니다. music__view 클래스는 플레이어의 이미지를 보여주는 div 요소를 포함합니다. music__control 클래스는 플레이어의 제목, 진행바, 제어 버튼 등을 갖는 div 요소를 포함합니다. title 클래스는 제목과 아티스트를 나타내는 h3와 p 요소를 포함합니다. progress 클래스는 오디오 파일의 진행 상태를 나타내는 진행바와 타이머를 포함합니다. bar 클래스는 진행바를 감싸는 div 요소이며, audio 요소를 포함합니다. timer 클래스는 현재 재생 중인 시간과 전체 길이를 나타내는 span 요소를 포함합니다. control 클래스는 플레이어의 제어 버튼을 포함하는 div 요소입니다. repeat, prev, play, next, list 클래스는 각각 전체 반복, 이전 곡, 재생, 다음 곡, 재생 목록을 나타내는 i 요소입니다. 뮤직플레이어 Javscript
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; //현재 음악 인덱스
//음악 재생
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 == 1 ? musicIndex = allMusic.length : musicIndex--;
loadMusic(musicIndex);
playMusic();
}
// 다음 곡 듣기
const nextMusic = () =>{
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; // 전체 길이에서 현재 진행되는 시간을 백분위 단위로 나누면 몇 퍼센트인지 알 수 있다.
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 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);
});
loadMusic 함수: 해당 인덱스의 음악 파일을 로드하고, 음악 이름, 아티스트, 이미지 등을 화면에 표시합니다.
playMusic 함수: 음악을 재생하고, 플레이어 UI를 변경하여 일시 정지 버튼으로 표시합니다.
pauseMusic 함수: 음악을 일시 정지하고, 플레이어 UI를 변경하여 재생 버튼으로 표시합니다.
prevMusic 함수: 이전 곡을 재생합니다.
nextMusic 함수: 다음 곡을 재생합니다.
timeupdate 이벤트 핸들러: 오디오의 재생 시간이 업데이트될 때마다, 진행 바와 현재 재생 시간 등을 업데이트합니다.
click 이벤트 핸들러: 진행 바를 클릭할 때, 클릭한 위치에 따라 재생 위치를 변경합니다.
버튼 클릭 이벤트 핸들러: 플레이/일시정지, 이전 곡, 다음 곡 버튼을 클릭할 때, 각각의 함수를 호출합니다.
window의 load 이벤트 핸들러: 페이지가 로드되면, 첫 번째 음악 파일을 로드합니다.
<div class="music__inner">
<div class="music__header">
<span class="left"></span>
<h2>HWANG's music player</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>Redmoon</h3>
<p>inchan</p>
</div>
<div class="progress">
<div class="bar">
<audio id="main-audio"src="audio/music_audio01.mp3"></audio>
</div>
<div class="timer">
<span class="current">0:00</span>
<span class="duration">3:55</span>
</div>
</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>
<span>
<i class="next" id="control-next" title="다음곡 재생"></i></span>
</span>
<span>
<i class="list" id="control-list" title="재생 목록"></i></span>
</span>
<!-- <span class="repeat_one">한곡 반복</span>
<span class="shuffle">랜덤 반복</span>
<span class="stop">정지 반복</span> -->
</div>
</div>
</div>
<div class="music__footer"></div>
</div>
</div>
<!-- //뮤직 플레이어 -->
music__inner 클래스는 전체 UI를 감싸는 div 요소입니다.
music__header 클래스는 헤더를 구성하는 div 요소입니다. left과 right 클래스를 갖는 span 요소가 있으며, h2 요소로 "HWANG's music player"를 표시합니다.
music__contents 클래스는 플레이어의 콘텐츠를 감싸는 div 요소입니다.
music__footer 클래스는 푸터를 구성하는 div 요소입니다.
제작
댓글