Categories: Javascript

Cara memutar audio dengan html5 dan javascript dengan atau tanpa interaksi user

Bismillaahirrohmaanirrohiim…

Kali ini saya akan berbagi pengalaman tentang bagaimana membuat audio di halaman web dengan javascript.

Umumnya, untuk memutar audio user melakukan klik pada tombol play, pause, stop, dll.

Kode html5 dan javascriptnya cukup mudah, yaitu sebagai berikut:

<!DOCTYPE html>
<html>
<body>

<audio id="audioNotifikasi">
  <source src="notifikasi.mp3" type="audio/mpeg">
</audio>

<p>Klik tombol di bawah ini untuk memutar atau pause audio.</p>

<button >




Bisa juga dengan metode seperti ini
 
<script type="text/javascript">
    function playAudio() {
        var notifikasi = new Audio("notifikasi.mp3");
        notifikasi.play();
    }
</script>

 
Nah, masalah akan muncul jika ingin memutar audio namun tidak ada interaksi dari user (klik, enter, submit, dll).
 
Misalnya saat website selesai di load atau saat menangani response ajax dan digunakan untuk memutar sound notifikasi.
  
 
 
 
Kode di atas jika digunakan untuk memutar audio tanpa interaksi dari user, akan error: “play() failed because the user didn’t interact with the document first”.
 
Solusinya adalah, dengan cara membuat audio menjadi autoplay.
 
Baca Juga:  Fungsi Javascript berguna yang sering dipakai programmer
Caranya membuat agar audio dapat diputar tanpa membutuhkan interaksi user adalah seperti kode di bawah ini:
 
<script type="text/javascript">
    function playAudio() {
        var source = "notifikasi.mp3";
        var audio = document.createElement("audioNotifikasi");
        audio.autoplay = true;
        audio.load()
        audio.addEventListener("load", function() { 
            audio.play(); 
        }, true);
        audio.src = source;
    }

    function cekNotifikasi() {
        $.ajax({url: "http://url/to/notifikasi", 
                success: function(totnotif) {
    
                if (totnotif > 0) {
                    //play sound
                    playAudio();
                }
    
                setTimeout(function(){ cekNotifikasi();}, 60000);//60 detik
            }
        });
    }

</script>

 
Update 2023
 
Untuk membuat audio berbasis HTML dan Javascript, tinggal gunakan kode di bawah ini:
 
    <audio id="doneAudio">
      <source src="files/interface-welcome-131917.ogg" type="audio/ogg">
      <source src="files/interface-welcome-131917.mp3" type="audio/mpeg">
      <source src="files/interface-welcome-131917.wav" type="audio/wav">
      NOAUDIO.
    </audio>

    <audio id="errorAudio">
      <source src="files/system-error-notice-132470.ogg" type="audio/ogg">
      <source src="files/system-error-notice-132470.mp3" type="audio/mpeg">
      <source src="files/system-error-notice-132470.wav" type="audio/wav">
      NOAUDIO.
    </audio>

<script type="text/javascript">
        var x = document.getElementById("doneAudio");
        var xy = document.getElementById("errorAudio");

        function playAudiox(tp) { 
            if (tp=='success') x.play(); 
            if (tp=='error') xy.play(); 
        }

        function pauseAudiox() { 
          x.pause(); 
        } 
</script>

 
Untuk menambahkan getar pada HP bisa menggunkan kode di bawah ini:
 
window.navigator.vibrate(300);
 
Demikian tutorial singkat cara memutar audio dengan html5 dan javascript dengan atau tanpa interaksi dari user, cukup mudah bukan, semoga bermanfaat.
  
 
 
 
Bagikan
rasupe

View Comments

Leave a Comment
Share
Published by
rasupe
Tags: audio javascript
4 years ago

Recent Posts

CPU usage tinggi pada server

Bismillaahirrohmaanirrohiim... Untuk mendeteksi cpu usage tinggi memang perkara rumit, adakalanya karena codingan bermasalah, akses ke…

2 weeks ago

Membersihkan log mongodb yang besar

Bismillaahirrohmaanirrohiim... Jika tidak dirawat dan dicek berkala, log mongodb akan semakin membesar. Bahkan sampai menghabiskan…

4 weeks ago

Cara mengakses gps di HP dengan javascript

Bismillaahirrohmaanirrohiim... Jika kita membuat website yang digunakan untuk memantau lokasi HP client, maka kita memerlukan…

4 months ago

Menghitung jarak dua titik koordinat dengan php dan javascript

Bismillaahirrohmaanirrohiim... Kali ini kita akan mencoba menerapkan rumus trigonometeri dari formula haversine, yang digunakan untuk…

4 months ago

Kemasan cleo botol kecil sering bikin tangan terluka

Bismillaahirrohmaanirrohiim... Disini saya akan berbagi pengalaman tentang susahnya membuka tutup botol cleo kecil ukuran 220ml.…

4 months ago

Solusi InsCek pada meteran PLN

Bismillaahirrohmaanirrohiim... Kali ini saya akan berbagi pengalaman tentang mati lampu yang disebabkan oleh permasalahan arus…

4 months ago