Phonegap Android HTML5 Audio Player Delayed

Question

I'm trying to develop an app through Phonegap for both Android and iOS. The app is a radio station and the stream coming from the streaming company is an AAC stream. I have developed an HTML5 audio player and it works just fine on iOS Apple tablet v1 that I have tested with, but when I tried testing on a Toshiba Android tablet, Motorola Androidphones, and Samsung Androidphones, after pressing play, the audio can take up to 30 seconds sometimes before it starts playing. When I tried testing on an LG Androidphone, the player played instantly like it should. All these devices were operating on the same wifi connection.

I'm at a loss as to why this is occuring. In theory it should work across all devices the same seeing as how it's HTML, but I have no idea. Any thoughts?

<audio 
    src="http://aac.stream" 
    type="audio/aac" 
    controls="true" 
    id="the_player"
    preload="auto"
></audio>

Answer 1

AAC decoding is device dependent in Android market. It means some devices will do it easily, some will struggle, some won't read it at all. You can read here for reference.

A couple of things to consider:

You can test for device capabilities to playback AAC audio:

var a = document.createElement('audio');
var aacSupport = a.canPlayType('audio/mp4; codecs="mp4a.40.2"');
console.log(aacSupport);

If aacSupport returns probably it is ok to use AAC. If it returns an empty string it is not ok. Otherwise you could use mp3 which has larger support amongst device. Try it in your case and see if the devices struggling with the AAC playback can play mp3 fine.

Also you can remove the type attribute in your audio tag it is only useful in a child source tag. Not sure audio/aac is a valid MIME/TYPE anyway.