Terjemahan ke Bahasa Indonesia (id)

HTML - Pemutar Audio

Selamat datang, para pengembang web yang bersemangat! Hari ini, kita akan masuk ke dunia yang menarik dari pemutar audio HTML. Pada akhir panduan ini, Anda akan dapat membuat pemutar audio khusus 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 Lokal HTML dengan Visualizer

Dasar-Dasar Pemutar Audio HTML

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

<audio controls>
<source src="file-audio-anda.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 Khusus

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

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pemutar Audio Khusus</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="file-audio-anda.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 khusus kami.
Didalamnya, kita memiliki elemen <audio> (tanpa kontrol), tombol play/pause, dan batang seek.
Dalam JavaScript:

Kita toggle play/pause saat tombol diklik.
Kita memperbarui batang seek saat audio diputar.
Kita memungkinkan seek dengan mengklik batang seek.

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="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pemutar Audio dengan 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="file-audio-anda.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:

Kita menambahkan elemen <canvas> untuk visualizer kami.
Kita mengatur konteks audio dan analisis menggunakan Web Audio API.
Fungsi drawVisualizer membuat visualisasi grafik bar frekuensi audio.

Pemutar Audio Lokal dengan Daftar Putar

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

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pemutar Audio dengan Daftar Putar</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">Sebelumnya</button>
<button id="play-pause-btn">Play</button>
<button id="next-btn">Selanjutnya</button>
<input type="range" id="seek-bar" value="0">
<ul id="playlist">
<li data-src="song1.mp3">Lagu 1</li>
<li data-src="song2.mp3">Lagu 2</li>
<li data-src="song3.mp3">Lagu 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 pemutar daftar putar ini:

Kita membuat daftar trek menggunakan daftar tak berurutan.
Kita menambahkan tombol sebelumnya dan selanjutnya untuk navigasi.
JavaScript mengelola pemuatan trek, play/pause, dan perpindahan antar trek.

Metode Pemutar Audio

Berikut adalah tabel metode pemutar audio umum dan deskripsi mereka:

Metode	Deskripsi
`play()`	Memulai pemutaran audio
`pause()`	Menangguhkan pemutaran audio
`load()`	Memuat kembali 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 disembunyikan
`playbackRate`	Mendapatkan atau mengatur kecepatan pemutaran

Dan itu adalah! Anda sekarang telah belajar membuat pemutar audio dasar dan lanjutan, lengkap dengan visualizer dan daftar putar. Ingat, latihan membuat Anda mahir, jadi jangan khawatir untuk mencoba dan menyesuaikan contoh ini sesuai kebutuhan Anda. Selamat coding, dan may your web pages be filled with beautiful music!

Credits: Image by storyset

Tutorial Sebelumnya:

HTML - Web RTC

Tutorial Selanjutnya:

HTML - Pemutar Video