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.

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

Recent Posts

Source code Template website sekolah dengan react js

Bismillaahirrohmaanirrohiim... Berikut ini source code yang dapat dimodifikasi untuk membuat front end website sekolah dengan…

8 hours ago

Subdomain pada cyberpanel tidak dapat diakses

Bismillaahirrohmaanirrohiim... Jika domain dan sub domainnya berada dalam satu vps cyberpanel, maka seringkali jadi tidak…

5 days ago

10 Aplikasi Kasir Terbaik di Indonesia (2025)

Bismillaahirrohmaanirrohiim... Dalam era digital saat ini, penggunaan aplikasi kasir (Point of Sale/POS) menjadi solusi penting…

6 days ago

Website di aapanel sering mati sendiri

Bismillaahirrohmaanirrohiim... Saat browsing-browsing saya seringkali melihat iklan aapanel, sekilas membuat penasaran sampai akhirnya saya mencoba…

1 week ago

Reset password cyberpanel via SSH

Bismillaahirrohmaanirrohiim... Berikut ini perintah untuk reset password admin cyberpanel melalui SSH command line. pastikan login…

1 week ago

Template Blogger Blogspot Gratis dan Bagus

Bismillaahirrohmaanirrohiim... Berikut ini beberapa template blogspot yang dapat anda gunakan secara gratis namun tampilannya bagus.…

2 months ago