How to play sound in javascript?

Question

I create websocket server in python to handle notification event. Now, i can receive notification, the problem is i can't play sound because new autoplay policy changed, if i play sound using javascript it give me domexception. Any suggestion please ?

Answer 1

As i know, playing sound is simple in html-javascript. like this example: https://stackoverflow.com/a/18628124/7514010

but it depend to your browsers and how you load and play, so issues is:

• Some of browsers wait till user click something, then let you play it (Find a way for it)
• In some case browsers never let you play till the address use SSL (means the HTTPS behind your url)
• The loading be late so the playing be late / or even not start.

So i usually do this:

HTML

<audio id="notifysound" src="notify.mp3" autobuffer preload="auto" style="visibility:hidden;width:0px;height:0px;z-index:-1;"></audio>

JAVASCRIPT (Generally)

var theSound = document.getElementById("notifysound");
theSound.play();

And the most safe if i want sure it be played when i notify is :

JAVASCRIPT (In your case)

function notifyme(theTitle,theBody) {
    theTitle=theTitle || 'Title';
    theBody=theBody || "Hi. \nIt is notification!";
    var theSound = document.getElementById("notifysound");
    if ("Notification" in window && Notification) {
        if (window.Notification.permission !== "granted") {
            window.Notification.requestPermission().then((result) => {
                if (result != 'denied') {
                    return notifyme(theTitle,theBody);
                } else {
                    theSound.play();
                }
            });
        } else {
            theSound.play();
            try {
                var notification = new Notification(theTitle, {
                    icon: 'icon.png',
                    body: theBody
                });
                notification.onclick = function () {
                    window.focus(); 
                };
            }
            catch(err) {
                return;
            }
        }
    } else {
        theSound.play();
    }
}

(and just hope it be played. because even possible to volume or some customization make it failed.)

Answer 2

to bypass new autoplay policy :

create a button that can play the sound, hide it and trigger the sound with :

var event = new Event('click');
playBtn.dispatchEvent(event);

EDIT

assuming you have :

let audioData = 'data:audio/wav;base64,..ᴅᴀᴛᴀ...'; // or the src path

you can use this function to trigger whenever you want without appending or create element to the DOM:

function playSound() {
  let audioEl = document.createElement('audio');
  audioEl.src = audioData;
  let audioBtn = document.createElement('button');
  audioBtn.addEventListener('click', () => audioEl.play(), false);
  let event = new Event('click');
  audioBtn.dispatchEvent(event);
}

usage :

just playSound()

EDIT 2

I re test my code and it does'nt work hum ... weird