Audio object not playing in callbacks on mobile devices

Question

It seems to me that the Audio object can not be easily played inside a JavaScript callback when running on a mobile device. The code below shows an onload function which, on a PC, plays the sound when the web page is loaded, but on Android phones plays nothing.

My uninformed guess is that the callback returns before the Audio object starts to play, and thus, for some deep reason, dies.

Is there any way over this? In the full version the JavaScript would read the sound to play from the URL.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Play Me</title>
    <style>
        body {background-color:lightgrey}
        h1   {color:blue}
        p    {color:green;font-size:50px}
    </style>
</head>
<body onload="playMySound()">
<P>
PLAY ME
<button onclick="playMySound()">sound me</button>
</P>

<br>
<script>
    var mySound ;

    function playMySound () {
        var soundUrl = "http://www.letiketa.com/myapp/sound.ashx?sound=sound1" ;
        var mySound = new Audio(soundUrl);
        // Actually play the sound
        mySound.play() ;
    }

</script>

The button plays the sound correctly, on all devices and I suppose that is a callback...? Is there something special about the onload callback?

Owen Ransen Owen Ransen · Accepted Answer · 2014-12-04T13:13:25

Argh, it is all to do with the fact that on mobile devices, currently, HTML5 disallows sounds to be played unless the user has done some input, presumably saying "I allow you to play sounds." The latest Firefox browser, V34 anyway, seems to have lifted the restrictions and all works as it should.

There is a fix in Chrome too, you need to, in the address bar, goto "about:flags" and find the "gesture required" option, disabling it.

After all this the program which I wrote two days ago now works...

Audio object not playing in callbacks on mobile devices

1 Answers