Membuat audio yang dapat diputar secara otomatis dan berulang merupakan salah satu fitur yang cukup sering digunakan dalam pengembangan website. Fitur ini biasanya diterapkan pada media player, notifikasi suara, maupun background audio agar tetap berjalan tanpa perlu diputar ulang secara manual.
Pada tutorial ini, kita akan membahas cara membuat audio yang kembali diputar secara otomatis setelah selesai dimainkan, sekaligus menambahkan tombol play dan pause menggunakan JavaScript.
Memahami Konsep Audio Loop
Secara bawaan, elemen <audio> pada HTML sebenarnya telah menyediakan atribut loop untuk mengulang audio secara otomatis. Namun, penggunaan JavaScript memberikan fleksibilitas yang lebih besar karena memungkinkan pengembang mengontrol perilaku audio sesuai kebutuhan.
Dalam contoh ini, kita memanfaatkan event ended untuk mendeteksi saat audio selesai diputar, kemudian mengembalikannya ke awal dan menjalankannya kembali.
Kode JavaScript
Berikut contoh kode JavaScript yang digunakan:
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
Script tersebut bekerja melalui beberapa tahapan berikut:
1. Mengambil Elemen HTML
JavaScript terlebih dahulu mengambil elemen audio dan tombol menggunakan getElementById().
2. Mendeteksi Audio Selesai Diputar
Event ended akan dijalankan ketika audio mencapai akhir durasi.
audioPlayer.addEventListener("ended", function() {
audioPlayer.currentTime = 0;
audioPlayer.play();
});
Kode tersebut mengembalikan posisi audio ke detik awal dan langsung memutarnya kembali.
3. Mengatur Tombol Play dan Pause
Ketika tombol diklik, JavaScript akan memeriksa apakah audio sedang diputar atau sedang berhenti.
Jika audio sedang pause, maka audio akan dijalankan dan ikon berubah menjadi pause.
Sebaliknya, jika audio sedang berjalan, audio akan dihentikan sementara dan ikon berubah menjadi play.
Contoh Struktur HTML
Berikut contoh 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 Kontrol
Tombol play dan pause bekerja secara dinamis berdasarkan status audio:
- Audio berhenti → tombol menjalankan audio.
- Audio berjalan → tombol menghentikan audio sementara.
- Ikon akan berubah otomatis sesuai kondisi audio.
Dengan cara ini, pengalaman pengguna menjadi lebih interaktif dibandingkan hanya menggunakan kontrol audio bawaan browser.
Menambahkan Font Awesome
Karena contoh menggunakan ikon play dan pause dari Font Awesome, Anda perlu menambahkan library tersebut ke dalam halaman website.
Masukkan kode berikut di dalam tag <head>:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
Setelah ditambahkan, ikon akan tampil dengan benar pada tombol kontrol audio.
Kesimpulan
JavaScript memungkinkan pengembang membuat audio player yang lebih fleksibel dan interaktif dibandingkan hanya mengandalkan atribut bawaan HTML.
Dengan memanfaatkan event ended, audio dapat diputar ulang secara otomatis setelah selesai. Ditambah dengan tombol play dan pause, pengguna memiliki kontrol yang lebih baik terhadap audio yang sedang diputar.
Teknik ini dapat diterapkan pada berbagai kebutuhan seperti background music, notifikasi suara, hingga media player sederhana. Pengembang juga dapat mengembangkannya lebih lanjut dengan menambahkan fitur volume control, progress bar, playlist, maupun pengaturan audio lainnya.