HTML - Audio Player

Selamat datang, para pengembang web yang bersemangat! Hari ini, kita akan mempelajari dunia yang menarik dari pemutar audio HTML. Pada akhir panduan ini, Anda akan dapat membuat pemutar audio custom Anda sendiri dan bahkan menambahkan beberapa efek visual yang keren. Jadi, mari kita siapkan topi pengoding dan mulai perjalanan musik ini!

HTML - Audio Player

Pemutar Audio Local HTML dengan Visualizer

Dasar-Dasar Pemutar Audio HTML

Sebelum kita masuk ke dalam membuat pemutar audio yang fancy, mari kita mulai dari dasar. HTML5 memperkenalkan elemen <audio>, yang membuat hal menambahkan audio ke halaman web Anda menjadi sangat mudah. Ini adalah contoh sederhana:

<audio controls>
<source src="your-audio-file.mp3" type="audio/mpeg">
Browser Anda tidak mendukung elemen audio.
</audio>

Dalam kode ini:

Tag <audio> membuat pemutar audio.
Atribut controls menambahkan tombol play, pause, dan pengatur volume.
Tag <source> menentukan file audio yang akan diputar.
Kita termasukkan pesan cadangan untuk browser yang tidak mendukung elemen <audio>.

Membuat Pemutar Audio Custom

Sekarang, mari kita buat pemutar audio yang lebih custom. Kita akan menggunakan HTML, CSS, dan JavaScript untuk membuat ini:

<!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>

mari kitauraikan ini:

Kita membuat wadah <div> untuk pemutar audio custom kami.
Dalamnya, kita memiliki elemen <audio>, tombol play/pause, dan batang pencari.
Dalam JavaScript:

Kita togel play/pause saat tombol diklik.
Kita memperbarui batang pencari saat audio diputar.
Kita memungkinkan pencarian dengan mengklik batang pencari.

Menambahkan Visualizer

Sekarang, mari kita tambahkan visualizer sederhana untuk membuat pemutar kami lebih menarik. Kita akan menggunakan Web Audio API untuk ini:

<!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');

// Set up audio context
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);

// Play/Pause functionality
playPauseBtn.addEventListener('click', () => {
if (audioContext.state === 'suspended') {
audioContext.resume();
}
if (audio.paused) {
audio.play();
playPauseBtn.textContent = 'Pause';
} else {
audio.pause();
playPauseBtn.textContent = 'Play';
}
});

// Seek bar functionality
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;
});

// Visualizer
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>

Dalam versi ini yang diperluas:

Kita menambahkan elemen <canvas> untuk visualizer kami.
Kita mengatur kontek audio dan analyzer menggunakan Web Audio API.
Fungsi drawVisualizer membuat visualisasi grafik batang frekuensi audio.

Pemutar Audio Local dengan Daftar Putar

Sekarang, mari kita buat pemutar yang dapat menangani beberapa trek:

<!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>

Dalam versi daftar putar ini:

Kita membuat daftar trek menggunakan unordered list.
Kita menambahkan tombol sebelumnya dan selanjutnya untuk navigasi.
JavaScript mengelola memuat trek, memutar/pause, dan bergerak antar trek.

Metode Pemutar Audio

Berikut adalah tabel metode pemutar audio umum dan deskripsi mereka:

Metode	Deskripsi
`play()`	Memulai memutar audio
`pause()`	Men pause audio
`load()`	Memuat ulang elemen audio
`currentTime`	Mendapatkan atau mengatur posisi pemutaran saat ini dalam detik
`duration`	Mendapatkan durasi total audio dalam detik
`volume`	Mendapatkan atau mengatur volume (0.0 hingga 1.0)
`muted`	Mendapatkan atau mengatur apakah audio diam
`playbackRate`	Mendapatkan atau mengatur kecepatan pemutaran

Dan itu saja! Anda sekarang telah belajar membuat pemutar audio dasar dan lanjut HTML, lengkap dengan visualizer dan daftar putar. Ingat, latihan membuat Anda semakin baik, jadi jangan khawatir untuk mencoba dan menyesuaikan contoh ini sesuai kebutuhan Anda. Selamat coding, dan semoga halaman web Anda penuh dengan musik yang indah!

Credits: Image by storyset