Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Unable to play audio from Audio tag

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

 

2 answers

0 votes
Dick Atlassian Team Sep 12, 2018

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!

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 !!!");
         });
     }
}

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Bitbucket

Powering DevOps with Bitbucket Server & Data Center

Hi everyone, The Cloud team recently announced 12 new DevOps features that help developers ship better code, faster   ! While we’re all excited about the new improvements to Bitbucket ...

1,880 views 0 7
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you