HTML - 오디오 플레이어

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 HTML 오디오 플레이어의 흥미로운 세상으로 뛰어들어 보겠습니다. 이 튜토리얼이 끝나면 여러분은 자신만의 맞춤형 오디오 플레이어를 만들고 심지어 몇 가지 멋진 시각 효과를 추가할 수 있을 것입니다. 그럼 coding 모자를 쓰고 이 음악 여정을 시작해 보겠습니다!

HTML - Audio Player

HTML 로컬 오디오 플레이어 및 시각화기

HTML 오디오 기본

화려한 오디오 플레이어를 만들기 전에 기본 개념부터 시작해 보겠습니다. HTML5는 <audio> 요소를 도입하여 웹 페이지에 오디오를 추가하는 것을 아주 쉽게 만들었습니다. 다음은 간단한 예제입니다:

<audio controls>
<source src="your-audio-file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

이 코드에서:

<audio> 태그는 오디오 플레이어를 만듭니다.
controls 속성은 재생, 일시 정지, 볼륨 컨트롤을 추가합니다.
<source> 태그는 재생할 오디오 파일을 지정합니다.
<audio> 요소를 지원하지 않는 브라우저에 대한 대체 메시지를 포함합니다.

맞춤형 오디오 플레이어 만들기

이제 더 맞춤형 오디오 플레이어를 만들어 보겠습니다. HTML, CSS, 그리고 JavaScript를 사용하여 이를 구축할 것입니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Audio Player</title>
<style>
#custom-player {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#play-pause-btn {
width: 100px;
height: 30px;
}
#seek-bar {
width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="custom-player">
<audio id="audio-element" src="your-audio-file.mp3"></audio>
<button id="play-pause-btn">Play</button>
<input type="range" id="seek-bar" value="0">
</div>

<script>
const audio = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
const seekBar = document.getElementById('seek-bar');

playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = 'Pause';
} else {
audio.pause();
playPauseBtn.textContent = 'Play';
}
});

audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
seekBar.value = progress;
});

seekBar.addEventListener('input', () => {
const time = (seekBar.value / 100) * audio.duration;
audio.currentTime = time;
});
</script>
</body>
</html>

이를 분해해 보겠습니다:

우리는 맞춤형 플레이어의 컨테이너 <div>를 만듭니다.
안에 <audio> 요소(컨트롤이 없음), 재생/일시 정지 버튼, 그리고 seek 바를 넣습니다.
JavaScript에서:

버튼을 클릭할 때 재생/일시 정지를 토글합니다.
오디오가 재생될 때 seek 바를 업데이트합니다.
seek 바를 클릭할 때 오디오의 재생 위치를 변경합니다.

시각화기 추가

이제 우리 플레이어에 간단한 시각화기를 추가하여 더 흥미롭게 만들어 보겠습니다. Web Audio API를 사용합니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Player with Visualizer</title>
<style>
#custom-player {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#play-pause-btn {
width: 100px;
height: 30px;
}
#seek-bar {
width: 100%;
margin-top: 10px;
}
#visualizer {
width: 300px;
height: 150px;
background-color: #000;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="custom-player">
<audio id="audio-element" src="your-audio-file.mp3"></audio>
<button id="play-pause-btn">Play</button>
<input type="range" id="seek-bar" value="0">
<canvas id="visualizer"></canvas>
</div>

<script>
const audio = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
const seekBar = document.getElementById('seek-bar');
const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');

// 오디오 컨텍스트 설정
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);

// 재생/일시 정지 기능
playPauseBtn.addEventListener('click', () => {
if (audioContext.state === 'suspended') {
audioContext.resume();
}
if (audio.paused) {
audio.play();
playPauseBtn.textContent = 'Pause';
} else {
audio.pause();
playPauseBtn.textContent = 'Play';
}
});

// seek 바 기능
audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
seekBar.value = progress;
});

seekBar.addEventListener('input', () => {
const time = (seekBar.value / 100) * audio.duration;
audio.currentTime = time;
});

// 시각화기
function drawVisualizer() {
requestAnimationFrame(drawVisualizer);

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(dataArray);

ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

const barWidth = (canvas.width / bufferLength) * 2.5;
let x = 0;

for (let i = 0; i < bufferLength; i++) {
const barHeight = dataArray[i] / 2;

ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);

x += barWidth + 1;
}
}

drawVisualizer();
</script>
</body>
</html>

이 향상된 버전에서:

우리는 시각화기의 <canvas> 요소를 추가합니다.
Web Audio API를 사용하여 오디오 컨텍스트와 분석기를 설정합니다.
drawVisualizer 함수는 오디오 주파수 데이터를 사용하여 바 그래프 시각화를 만듭니다.

로컬 오디오 플레이어와 플레이리스트

이제 여러 트랙을 처리할 수 있는 플레이어를 만들어 보겠습니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Player with Playlist</title>
<style>
#playlist-player {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#play-pause-btn, #prev-btn, #next-btn {
width: 80px;
height: 30px;
margin: 5px;
}
#seek-bar {
width: 100%;
margin-top: 10px;
}
#playlist {
list-style-type: none;
padding: 0;
}
#playlist li {
cursor: pointer;
padding: 5px;
}
#playlist li:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="playlist-player">
<audio id="audio-element"></audio>
<button id="prev-btn">Previous</button>
<button id="play-pause-btn">Play</button>
<button id="next-btn">Next</button>
<input type="range" id="seek-bar" value="0">
<ul id="playlist">
<li data-src="song1.mp3">Song 1</li>
<li data-src="song2.mp3">Song 2</li>
<li data-src="song3.mp3">Song 3</li>
</ul>
</div>

<script>
const audio = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const seekBar = document.getElementById('seek-bar');
const playlist = document.getElementById('playlist');
let currentTrack = 0;

function loadTrack(index) {
const tracks = playlist.getElementsByTagName('li');
if (index >= 0 && index < tracks.length) {
currentTrack = index;
audio.src = tracks[currentTrack].getAttribute('data-src');
audio.load();
playPauseBtn.textContent = 'Play';
}
}

function playPause() {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = 'Pause';
} else {
audio.pause();
playPauseBtn.textContent = 'Play';
}
}

playPauseBtn.addEventListener('click', playPause);

prevBtn.addEventListener('click', () => {
loadTrack(currentTrack - 1);
});

nextBtn.addEventListener('click', () => {
loadTrack(currentTrack + 1);
});

audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
seekBar.value = progress;
});

seekBar.addEventListener('input', () => {
const time = (seekBar.value / 100) * audio.duration;
audio.currentTime = time;
});

playlist.addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
const tracks = playlist.getElementsByTagName('li');
loadTrack([...tracks].indexOf(e.target));
playPause();
}
});

loadTrack(0);
</script>
</body>
</html>

이 플레이리스트 버전에서:

우리는 트랙 목록을 사용하는 무序列表를 만듭니다.
이전 및 다음 버튼을 추가합니다.
JavaScript는 트랙 로드, 재생/일시 정지, 트랙 이동을 처리합니다.

오디오 플레이어 메서드

다음은 일반적인 오디오 플레이어 메서드와 설명입니다:

메서드	설명
`play()`	오디오 재생 시작
`pause()`	오디오 일시 정지
`load()`	오디오 요소 재로드
`currentTime`	현재 재생 위치(초) 가져오기/설정
`duration`	오디오 전체 길이(초) 가져오기
`volume`	볼륨(0.0에서 1.0 사이) 가져오기/설정
`muted`	오디오 음소거 여부 가져오기/설정
`playbackRate`	재생 속도 가져오기/설정

이제 여러분은 기본 및 고급 HTML 오디오 플레이어, 시각화기, 그리고 플레이리스트를 만드는 방법을 배웠습니다. 연습이 완벽함을 기억하며, 여러분의 필요에 맞게 이 예제를 실험하고 맞춤화해 보세요. 행복한 코딩 되세요, 그리고 여러분의 웹 페이지가 아름다운 음악으로 가득 차길 바랍니다!

Credits: Image by storyset