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 onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button> 

<script type="text/javascript">
var el = document.getElementById("audioNotifikasi"); 

function playAudio() { 
  el.play(); 
} 

function pauseAudio() { 
  el.pause(); 
} 
</script>

</body>
</html>

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.

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>

Demikian tutorial singkat cara memutar audio dengan html5 dan javascript dengan atau tanpa interaksi dari user, cukup mudah bukan, semoga bermanfaat.

Bagikan

You May Also Like

About the Author: rasupe

Leave a Reply

Your email address will not be published. Required fields are marked *