728x90
HTML, CSS 및 JavaScript를 사용하여 오디오 플레이어를 만들어보자.
HTML5 오디오 요소를 사용하여 오디오를 재생한다.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Audio Player Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<audio id="audio-player" src="music.mp3"></audio>
<div id="controls">
<button id="play-pause-btn"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
<div id="time">
<span id="current-time">00:00</span> / <span id="duration">00:00</span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
다음으로, 컨트롤러를 구성하는 요소를 추가.
이 요소들은 사용자가 오디오를 제어할 수 있는 버튼, 타임 라인, 현재 재생 시간 및 전체 재생 시간을 표시한다.
CSS
#controls {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
#play-pause-btn {
width: 30px;
height: 30px;
background-image: url(play.png);
background-repeat: no-repeat;
background-size: contain;
border: none;
cursor: pointer;
}
#play-pause-btn.pause {
background-image: url(pause.png);
}
#timeline {
flex: 1;
height: 5px;
background-color: #ccc;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
#playhead {
width: 10px;
height: 10px;
background-color: #333;
border-radius: 50%;
position: absolute;
top: -3px;
left: 0;
cursor: pointer;
}
#time {
font-size: 12px;
}
- #controls는 flex 컨테이너이며 가로 정렬
- #play-pause-btn은 버튼으로 사용됩니다. 크기 및 배경 이미지가 지정
- #timeline은 타임 라인을 나타내며, 배경 색상 및 위치가 지정
- #playhead는 타임 라인을 따라 이동하는 동그라미다. 이 요소는 커서가 포인트된 위치에서 클릭할 수 있으므로 커서 속성이 추가되었다.
JS
JavaScript 코드를 작성하여 오디오 플레이어를 제어
const audioPlayer = document.getElementById("audio-player");
const playPauseBtn = document.getElementById("play-pause-btn");
const playhead = document.getElementById("playhead");
const timeline = document.getElementById("timeline");
const currentTime = document.getElementById("current-time");
const duration = document.getElementById("duration");
let isPlaying = false;
function togglePlayPause() {
if (isPlaying) {
audioPlayer.pause();
playPauseBtn.classList.remove("pause");
} else {
audioPlayer.play();
playPauseBtn.classList.add("pause");
}
isPlaying = !isPlaying;
}
function updateCurrentTime() {
const current = audioPlayer.currentTime;
const minutes = Math.floor(current / 60);
const seconds = Math.floor(current % 60).toString().padStart(2, "0");
currentTime.innerHTML = `${minutes}:${seconds}`;
updatePlayhead();
}
function updateDuration() {
const total = audioPlayer.duration;
const minutes = Math.floor(total / 60);
const seconds = Math.floor(total % 60).toString().padStart(2, "0");
duration.innerHTML = `${minutes}:${seconds}`;
}
function updatePlayhead() {
const percentage = (audioPlayer.currentTime / audioPlayer.duration) * 100;
playhead.style.left = `${percentage}%`;
}
playPauseBtn.addEventListener("click", togglePlayPause);
audioPlayer.addEventListener("timeupdate", updateCurrentTime);
audioPlayer.addEventListener("loadedmetadata", updateDuration);
timeline.addEventListener("click", function(e) {
const percentage = (e.offsetX / timeline.offsetWidth);
audioPlayer.currentTime = audioPlayer.duration * percentage;
updatePlayhead();
});
- 오디오 플레이어 및 컨트롤러 요소를 가져와 변수에 할당
- togglePlayPause 함수는 플레이 / 일시 정지 버튼을 토글. 버튼의 상태를 변경하고, 오디오를 재생하거나 일시 정지
- updateCurrentTime 함수는 현재 재생 시간을 업데이트. 이 함수는 audioPlayer의 timeupdate 이벤트에 연결.
- updateDuration 함수는 전체 재생 시간을 업데이트. 이 함수는 audioPlayer의 loadedmetadata 이벤트에 연결.
- updatePlayhead 함수는 타임 라인의 playhead 위치를 업데이트. 이 함수는 timeupdate 이벤트 및 timeline 요소의 클릭 이벤트에 연결.
- 각 요소에 이벤트 리스너를 추가.
728x90
'JavaScript' 카테고리의 다른 글
| [JavaScript] 스크롤시 한 섹션씩 이동하기 (0) | 2023.04.14 |
|---|---|
| [JavaScript] 자바스크립트 객체, 내장 객체 정리 (1) | 2023.04.10 |
| [JavaScript] 엔터키 이벤트로 입력받기 (0) | 2023.04.08 |
| [JavaScript] history 객체로 이전 페이지로 돌아가는 방법 (0) | 2023.04.07 |
| [JavaScript] 자바스크립트 해당 위치로 이동하기 (0) | 2023.04.05 |
댓글