Membunyikan efek suara dengan JavaScript

⬢⬡⬡, JavaScript /

Dengan JavaScript, kita bisa memainkan musik maupun efek suara (SFX) pada halaman web. Hal ini bisa dicapai dengan menggunakan Audio object. Coba tekan bel di bawah ini.

Dengan menggunakan objek Audio, memainkan suara dapat dilakukan hanya dengan 2 baris kode saja!

function bunyi() {
  var bel = new Audio('https://www.meramukoding.com/wp-content/uploads/2020/05/doorbell.mp3');
  bel.play();
}

Format-format suara yang bisa digunakan adalah WAV, MP3, MP4, OGG.

Sekarang, kita pasang fungsi bunyi() agar dieksekusi saat mengeklik tombol.

<input type="button" onclick="bunyi();" value="Tekan Bel" />

Menghilangkan jeda

Karena objek Audio baru diinisialisasi saat fungsi bunyi() dieksekusi, potongan file mp3 di atas baru akan dimuat ketika tombol ditekan. Ini tidak menjadi masalah jika file mp3 berukuran kecil dan dapat dimuat dengan cepat. Namun jika file suara yang akan dimuat berukuran cukup besar, atau koneksi internet yang kurang, maka akan ada jeda antara saat tombol diklik dan saat suara diputar.

Untuk mengurangi jeda ini, kita bisa memindahkan variabel bel ke global scope.

var bel = new Audio('https://www.meramukoding.com/wp-content/uploads/2020/05/doorbell.mp3');
function bunyi() {
  bel.currentTime = 0;
  bel.play();
}

Karena variabel bel dibuat global, fungsi bunyi() mencoba memutar suara hanya dari satu objek. Properti currentTime ditambahkan di sini supaya setiap kali fungsi bunyi() dijalankan, suara akan diputar ulang dari awal. Dengan begini tombol “Tekan Bel” bisa ditekan berkali-kali.

“doorbell-a” oleh kwahmah_02, dari freesound.org. CC BY 3.0

Tulis Komentar