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

Jonah H. picture Jonah H. · Aug 31, 2012 · Viewed 54.5k times · Source

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?

Answer

Jonah H. picture Jonah H. · Sep 21, 2012

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.