HTML5 base64 encoded audio on mobile devices

Question

I'm writing a platform with an audio playback component. Audio is uploaded to the server as an wav/mp3/ogg file, and then (like the rest of our media), converted to base64 and stored within our redis database.

To play the audio back at the client side we make an AJAX request to the server for the base64 encoded audio. We have a desktop version that compliments the mobile application, at the moment audio playback works like this:

recording.sound = new Audio("data:audio/ogg;base64," + recording.audio);
recording.sound.play(); // this works

Today we started our tests on mobile devices, and have so far been unable to get it working, even on mobile browsers that apparently support HTML5 audio.

Any ideas? Or if this is not possible, is there a different approach we can take? Ideally there should be a mobile compatible version of the web app, and there has to be a phonegap version.

score 1 · Answer 1 · edited May 23 '17 at 12:14

1

But „audio/wav“ doesn't exist. See spec here: http://www.iana.org/assignments/media-types/audio You should use „audio/vnd.dts“ for .wav file, „audio/mpeg“ for .mp3 file and „audio/ogg“ for .ogg file...

OK, try StackOverflow search, see:
https://stackoverflow.com/search?q=audio+codec+support+mobile+devices+html5
or https://stackoverflow.com/search?q=audio+codec+support+mobile+devices+html
or try Google
Some search results, that might be useful:
In search for a library that knows to detect support for specific Audio Video format files
or html5 vs flash - full comparison chart anywhere?

edited May 23 '17 at 12:14

Community

1
1

answered Nov 10 '13 at 19:30

user2976885

95
7

Tried it with audio/ogg and ogg files and got the same results. – Dan Prince Nov 10 '13 at 19:43
Then I think if the mobile device has an built in codec for ogg and the code hasn't bugs (try to put it through jshint.com), then it should work. – user2976885 Nov 10 '13 at 19:53
Is there a decent reference that I can use to check which mobile browsers support which codecs? – Dan Prince Nov 10 '13 at 20:14
I think this could be best for you: http://caniuse.com/#search=video There are all of the most used codecs and formats and their support tables across the browsers ;-) – user2976885 Dec 12 '13 at 20:04

score 1 · Accepted Answer · answered Dec 13 '13 at 20:27

The reason might not be a technical one here, from Apple developer site:

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

same applies to Android devices.

read more here: Safari HTML5 Audio and Video Guide

HTML5 base64 encoded audio on mobile devices

2 Answers2