HTML, CSS 및 JavaScript를 사용하여 오디오 플레이어를 만들어보겠습니다. 이 예제는 HTML5 오디오 요소를 사용하여 오디오를 재생합니다.
1. HTML 코드
우선, HTML 코드를 작성하겠습니다. 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>
위의 코드는 기본적인 HTML 문서를 정의합니다. HTML5 오디오 요소를 포함하고 있으며, 이 요소는 id 속성이 "audio-player"로 지정되어 있습니다.
다음으로, 컨트롤러를 구성하는 요소를 추가하겠습니다. 이 요소들은 사용자가 오디오를 제어할 수 있는 버튼, 타임 라인, 현재 재생 시간 및 전체 재생 시간을 표시합니다.
2. CSS 코드
이제 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는 타임 라인을 따라 이동하는 동그라미입니다. 이 요소는 커서가 포인트된 위치에서 클릭할 수 있으므로 커서 속성이 추가되었습니다.
3. JavaScript 코드
마지막으로 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 요소의 클릭 이벤트에 연결됩니다.
- 각 요소에 이벤트 리스너를 추가합니다.
이제 HTML, CSS 및 JavaScript 코드를 작성하여 오디오 플레이어를 만들었습니다. 이 예제는 단순한 오디오 플레이어이지만, 이를 기반으로 기능을 추가할 수 있습니다.
'자바스크립트' 카테고리의 다른 글
| [자바스크립트] 문자열을 숫자로 바꾸는 방법 (Number, parseInt) (0) | 2023.03.15 |
|---|---|
| [자바스크립트] 문자열 배열로 자르기 (split 함수) (0) | 2023.03.15 |
| [자바스크립트] 정규표현식을 통한 이메일 검증 (0) | 2023.03.14 |
| [자바스크립트] querySelector(), querySelectorAll() 사용법 (0) | 2023.03.14 |
| [자바스크립트] 배열 항목 삭제 방법 (0) | 2023.03.14 |
댓글