Unable to play audio from Audio tag

[Shubham Marathia]

Hi,

Awesome Dashboard guys, keep it up!

So I have a dashboard ,its widget page have a table and the data fetched is appended to that end of table like this:

$('#flighttable > tbody:last',el).append();

And there is an if condition which results in a red record for some conditions. Here's the way it's done:

if(....){

$('#flighttable > tbody:last',el).append("<tr><td class='red'>"+quote.AC_REG_CD+"</td></tr>........................}

So, in this if block, I was appending an audio tag after <tr> like this:

$('#flighttable > tbody:last',el).append("<tr><audio autoplay = 'true'><source src='338.mp3'></audio><td class='red'>"+quote.AC_REG_CD+"</td>......and so on....

But, when I restart the application after these changes, the audio file is not playing. I have also tried Audio() class with methods like load() and play() but even that's not working as well.

I am maintaining some other developer's code and am extremely new to Atlasboard. Please suggest where am I going wrong.

Thanks In Advance.

Shubham

[anand-b10]

There is a good reason for this precaution: Users usually don't expect audio from websites. They get really angry when they load a website, and an audio advertisement blares at them at full volume. This is even worse if they opened multiple tabs and are not sure which one is responsible. That's why all browser vendors prevent websites from playing audio unless the user interacts with them. Yes, I understand that you want to use this feature for good and not evil, but if there was a workaround, that workaround could also be used by the advertisers. So be glad that such a workaround does not exist.

So the only real solution is to find some reason why the player would need to perform some form of interaction after the game HTML document is loaded. A good excuse is some kind of initial screen with a copyright message and other legalese which disappears after the user clicked on it. You can also use this splash screen as a preloader for the assets needed for your login screen. That makes sure the background music is actually loaded when a user with a low bandwidth connection sees it.

You need to handle the error and promise and play sound from javascript, check below and use accordingly:

var audio = new Audio();
audio.src='rest/assets/images/beep.mp3';
// when the sound has been loaded, execute your code
audio.oncanplaythrough = (event) => {
    var playedPromise = audio.play();
    if (playedPromise) {
        playedPromise.catch((e) => {
             console.log(e)
             if (e.name === 'NotAllowedError' || e.name === 'NotSupportedError') { 
                   console.log(e.name);
              }
         }).then(() => {
              console.log("playing sound !!!");
         });
     }
}

[Dick]

Hi Shubham!

There's two things going on here:

• After appending e.g. <audio id="my-audio"> with jQuery, you need to run 

$("#my-audio").get(0).play();

• But unfortunately, automatically playing audio is something browsers have become quite strict about...

For example, if you want to run this in Chrome (> 66), it will give you an error:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

Which is not an ideal case for a wallboard. If you have full control over where you're displaying the wallboard (e.g. it's on your own machine, or it's always run on a system that you control), you could change the browser settings to allow this by default.

For Chrome, that would mean go to chrome://flags/#autoplay-policy and set it to 'No user gesture is required'.

Hope this helps,

Cheers!