HTML5 Audio can't play through Javascript unless triggered manually once

Question

I'm trying to get a small sound file to play automatically using an tag and javascript to initiate it.

<audio id="denied" preload="auto" controls="false">
    <source src="sound/denied.wav" />
 </audio>

And then through javascript, at the appropriate time:

$('#denied')[0].play()

Works fine on Chrome on my desktop. In Android 4.1.1, the sound will not play, unless I hit "play" on the HTML5 audio controls before javascript attempts to play it.

So basically the Android browser (stock or Dolphin) will not play the audio unless the user initiates it at some point before the javascript. Is this intended? Is there any way around this?

Solution 1

Well, for my purposes, here's what I did:

Luckily, before the user can trigger the behavior to start audio, they have to click a button. I set the volume of the element to 0.0, and have it "play" when they click this button.

After the sound is played silently, I simply set the volume property back to 1.0, and it plays without user intervention just fine.

Solution 2

In my case this was an easy solution:
https://stackoverflow.com/a/28011906/4622767
Copy & paste this in your chrome:

chrome://flags/#autoplay-policy

My web app has many page reload so I can't force the user to press a button every time; but it is for internal usage, so I can force the users to use chrome and configure that option.

Solution 3

The main issue is that sound (on iOS and Android) must be triggered by a user click. My workaround was very simple. Tie the audio.play() to a click event listener and then immediately pause it. From that point and on the sound works perfect.

var myAudio = new Audio('assets/myAudio.mp3');
...
button.addEventListener("click", function() {
    myAudio.play();
    myAudio.pause();
    ...
});

Solution 4

I know that in mobile safari any javascript call to play() must be in the same call stack as a user initialted click event. Spoofing the the click with a javascript trigger won't work either.

On my nexus 7 I can confirm that unless the javascript was triggered by a user click, it does not play.

Solution 5

Here is a blog-post on the reason and how to overcome it by loading all the audio files on first user interaction and play them later in programmed manner: https://blog.foolip.org/2014/02/10/media-playback-restrictions-in-blink/ Adopting this approach a small javascript module is available on GitHub https://github.com/MauriceButler/simple-audio

I tried this simple approach on my own - worked seamlessly & great!

View more solutions

Comments

[toon81]

In mobile Safari, you can trick Safari by having the user click a button and play a short silent sound. No volume tricks or anything required, that seems to do the trick there. Not sure if that will work on Android though.

[raacer]

Works for me in Chrome 58.0.3029.83. Note: you have to wait until the first play is finished before starting it again.

[maracuja-juice]

myAudio.play() returns a promise! This code will result into an exception: Use the then method. For Example: myAudio.play().then(() => {myAudio.pause()})

[Arnaud]

Caution: this option has a new name: Autoplay policy.

[Munim Munna]

This solves it for me, what about everyone visiting my site?

[AndiDev]

is not there on ipads

[mestarted]

Worked for me, in mobile browsers. Thanks

[Chad Scira]

For the newer version of chrome i had to do the following Settings -> Privacy and Security -> (Additional content settings) Sound => Add site/file to Allow list This is useful if you need to have something working locally. These solutions are not for visitors to your site.