Playing html5 audio in android browser

Question

I have a javascript that plays audio in the browser, using the html5 <audio> tag. It works fine in the iPhone browser, but not in Android. (Testing using a htc desire with android 2.1.) Anyone know why?

My code:

   function playHTML5(sound, soundcv){
                // sound = url to m4a audio file
                // soundcv = div in which the audioplayer should go

  var audio = document.createElement('audio');
  audio.src = sound;
  audio.controls = "controls";
  if (currentSound != null){
   soundcv.replaceChild(audio,currentSound);
  } else {
   soundcv.appendChild(audio);
  }
  currentSound = audio;
 }

By the way, I am also trying to enlarge the audio button that shows up in the iphone (the default one is quite small), with no luck so far - would be grateful for any ideas!

Answer 1

I've been tinkering all day on this and I finally got mine to work on my old Samsung Droid browser with the yahoo webplayer:

<a href="somefolder/file.mp3"></a>
<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script>

Works great puts a little arrow icon next to the text that you can click to play your mp3. Thanks Yahoo.

I forgot to mention that the audio does NOT show up in my Chrome or Firefox browser when testing this locally. Works great on my phone browser though.

Answer 2

I got this working on a project using trigger.io deploying to a Nexus 7 running Android Jellybean, but the audio only plays if I use absolute URLs at the moment. I'm not sure what the relative path is yet to use audio from within my project, but hopefully this will help somebody out...

(function() {

    var currentSound;
    // I have a div called "page"
    var soundcv = document.body;

    // This only works for one sound for simplicity's sake
    function playSound(sound){

        if (currentSound == null){
            var audio = document.createElement('audio');
            audio.src = sound;
            soundcv.appendChild(audio);
            currentSound = audio;
        }

        currentSound.play();
    }

    // This isn't a real audio file URL - replace it with one of your own
    playSound('http://example.com/example.mp3');
})();

Answer 3

I know this is a hack, but it works everywhere (as far as I know)!

You can use the video element and convert your mp3s into mp4 and ogg files (ogg for firefox on android). You could also style it so it doesn't display any uneccesary default players. See code below:

<video id="audioTest" width="1" height="1" style="top: -100px; left: -100px; position: absolute;" preload >
    <source src="audio.mp4" type="video/mp4">
    <source src="audio.ogv" type="video/ogg">
</video>

You could then play it in your js code using:

var audioTest = document.getElementById("audioTest");
audioTest.addEventListener("ended",onSoundComplete,false);
audioTest.play();

Answer 4

I cannot figure this out either. BUT, this test page created by Apple plays HTML5 audio on the Android: http://www.apple.com/html5/showcase/audio

how did apple do it?

Answer 5

The latest Android browser in FroYo does not yet support the HTML5 audio element. This is not a bug, rather a feature that has yet to be implemented. It may come in Gingerbread.

Update: The Gingerbread browser has the audio element.

Answer 6

Here is link to Google Android bug, which filed for lack of support of AUDIO tag in Android. Please, vote on it.

http://code.google.com/p/android/issues/detail?id=10546

BTW, there is work around, which let you play natively MP3 in Android 1.6 .. 2.2, like that:

<video src="test.mp3" onclick="this.play();"></video>