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!

Solution 1

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.

Solution 2

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>

Solution 3

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?

Solution 4

Have you checked your audio format ?

Solution 5

I was having trouble on my Kindle Fire, and found one small thing which seemed to fix it.

<audio>
  <source src="someclip.mp3" type="audio/mpeg" />
</audio>

I had mistakenly been using "audio/mp3". I'm using a player without its native controls (using HTML5/JS).

View more solutions

Comments

[Anders Sundnes Løvlie]

Yes, I am using the exact same media files in a native app that runs fine on android. 3gp audio, part of the core media files. So unless these for some reason can not be played in the html5 tag, even though they can be in native apps, that should not be the problem?

[Anders Sundnes Løvlie]

Hm, seems you are right though: There may be a difference between what formats android supports in general, and which it supports in the audio tag: w3schools.com/html5/html5_audio.asp

[Jla]

@anderslov Have you tried on different browsers. I don't know android much so I'm not sure what options you have.

[Anders Sundnes Løvlie]

I ended up setting up a test page to find out about the formats, and concluded that support for the audio element in the browser is simply broken. Details here: stackoverflow.com/questions/3100706/…

[Pierre-Antoine LaFayette]

html5test.com shows no support for PCM, MP3, AAC, Ogg Vorbis or WebM audio in my FroYo Browser.

[Anders Sundnes Løvlie]

Thanks for your answer. But if this is not a bug, then the documentation is obviously unclear, to put it mildly - it should state clearly that audio is not supported.

[Pierre-Antoine LaFayette]

How is the documentation unclear? No browser supports html5 100% at the moment. You don't expect them to document everything they don't support that is coming down the w3c pipeline? The audio tag is a new feature that the latest browsers have just begun to adopt. Just because the iPhone supports it doesn't make it a bug on Android.

[Anders Sundnes Løvlie]

I was going to give you a quote from the documentation - but then I remembered that I never really found any documentation at all. So I guess the precise wording should be that the documentation is either non-existing, or very hard to find. Speaking about documentation for the android browser, that is - not the android app platform. However, if you do know where to find that documentation, I would be extremely grateful if you could pass me the link!

[Pierre-Antoine LaFayette]

You can find documentation for the WebKit engine itself but the Android port's code is its documentation. It would be nice to have documentation but sometimes when the code is changing so fast it is a waste of effort to try and maintain docs. It's not like the public interface to the WebView which pretty much has to be well documented.

[Anders Sundnes Løvlie]

well, could be. at least that gives the answer to the question you asked - "how is the documentation unclear?" Personally I think web apps should be the future - rather than native apps - and I would think google looks favorably on that view... if so, they should offer web developers the same level of documentation they offer devs of native apps, in my view.

[jocull]

Droid Does™. If only that were true!

[slf]

generated source: <audio id="" src="http://a1.phobos.apple.com/us/r1000/011/Music/12/14/7f/‌​mzm.ubzkrulq.aac.p.m‌​4a" class="audio" width="1" height="1" autoplay="autoplay" bgcolor="white" audio="true"></audio>

[Judah Gabriel Himango]

Wow. Really, Google? It works if you put it in a video tag. How badly did they screw this up?

[gavD_UK]

Amir from Trigger.io got in touch with me and he solved this issue - if you use createElement('video') then it all works! Take a look at the mobile game Soft Paws, tag 0.1, on my Github which runs in Trigger.io and features sound

[Reinsbrain]

I am running Android 2.3.6 on my Samsung Mini but I still couldn't get my little mp3 to play using the video tag nor the audio tag. I tested it in chrome and it works. Can you confirm video tag work-around? Any other reading you can link to about it? Thanks :)

[gauguerilla]

does the preloading work in this case? my tests seem to indicate that it does not preload the mp3 properly when i use mp3 inside of the video tag