Membuat audio yang dapat diputar secara otomatis dan berulang (loop) merupakan salah satu fitur yang sering digunakan dalam pengembangan website, terutama untuk kebutuhan media player, notifikasi suara, atau background audio.
Pada tutorial ini, Anda akan belajar cara membuat audio yang akan diputar ulang secara otomatis setiap kali selesai dimainkan, lengkap dengan tombol play dan pause menggunakan JavaScript.
Konsep Dasar Audio Loop
Secara default, elemen audio di HTML tidak selalu mengulang secara otomatis kecuali menggunakan atribut loop. Namun, dengan JavaScript kita bisa mengontrol perilaku audio secara lebih fleksibel.
Kita akan memanfaatkan event ended untuk mendeteksi ketika audio selesai diputar, lalu menjalankannya kembali dari awal.
Contoh Kode JavaScript
Berikut adalah kode JavaScript yang digunakan untuk membuat audio loop otomatis:
const audioPlayer = document.getElementById("audioPlayer");
const playPauseButton = document.getElementById("playPauseButton");
audioPlayer.addEventListener("ended", function() {
audioPlayer.currentTime = 0;
audioPlayer.play();
});
if (playPauseButton) {
playPauseButton.addEventListener("click", function() {
if (audioPlayer.paused) {
audioPlayer.play();
playPauseButton.innerHTML = '<i class="fa fa-pause"></i>';
} else {
audioPlayer.pause();
playPauseButton.innerHTML = '<i class="fa fa-play"></i>';
}
});
}
Penjelasan Kode
Kode di atas bekerja dengan cara:
- Mengambil elemen audio dan tombol dari HTML
- Menambahkan event ended untuk mengulang audio
- Mengatur tombol play dan pause secara dinamis
- Mengubah ikon sesuai kondisi audio
Contoh Kode HTML
Berikut adalah struktur HTML yang digunakan:
<audio id="audioPlayer">
<source src="path/to/your/audio.mp3" type="audio/mpeg">
Browser Anda tidak mendukung audio.
</audio>
<button id="playPauseButton">
<i class="fa fa-play"></i>
</button>
Cara Kerja Tombol Play dan Pause
Tombol akan mendeteksi kondisi audio:
- Jika audio sedang pause, maka akan diputar
- Jika audio sedang diputar, maka akan dihentikan
Ikon tombol juga akan berubah sesuai kondisi tersebut.
Catatan Penting
Untuk menampilkan ikon play dan pause, Anda perlu menambahkan library Font Awesome ke dalam halaman HTML Anda.
Jika belum, tambahkan kode berikut di bagian head:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
Kesimpulan
Dengan memanfaatkan JavaScript, Anda dapat membuat audio player yang lebih interaktif dibandingkan hanya menggunakan atribut bawaan HTML.
Teknik ini sangat berguna untuk berbagai kebutuhan seperti notifikasi suara, background music, atau media player sederhana di website.
Jika dikembangkan lebih lanjut, Anda juga bisa menambahkan fitur seperti volume control, playlist, atau progress bar.
Kalau sudah siap, kirim artikel berikutnya saja, nanti kita konsistenin semua biar kucatat.com langsung naik level jadi portal profesional