html5 audio on apache cordova android native app

Question

Do audio tag works on an android native app?
I've been searching a while now, but I can't find a post that tells me if it is supported or not, or what do I have to do to make it work.

<audio id="Multimedia1" controls="controls" width="100%" height="30px">
<source src="file:///android_asset/www/Resources/audio.mp3">
Your browser does not support audio.
</audio>

It doesn't load the audio. I've tried different paths, such as:

Resources/audio.mp3  
www/Resources/audio.mp3  
file:///android_asset/www/Resources/audio.mp3

If I browse the index.html with the browser (no native app), the audio plays fine with a relative path.

But I just can't make it work it with an apache cordova app.

Any ideas? Thanks in advance!

Answer 1

I had the same issue with audio tags from HTML5 in Cordova 2.3.0. What I ended up doing was to just play them using JavaScript:

Here's the audio.js I put in the js folder:

function playAudio(src) {
    src = '/android_asset/www/' + src;
    var media = new Media(src, success, errorThrown);
    media.play();
}

function success() {}
function errorThrown(e) {
    alert('Error while playing the sound!');
}

And then in your HTML code you do:

<script src="js/audio.js"></script>

And to play the sound add this in a <script> block:

playAudio("media/your_sound.wav");

Answer 2

Same problem: I found the issue is that in order to be able to use the .play() function in HTML5 audio it must run within an user interface event handler (eg click) as detailed here:

https://code.google.com/p/chromium/issues/detail?id=178297

This is common policy in mobile browsers to attempt to avoid sites that would autoplay stuff and burn through data it seems. One can use this https://gist.github.com/blairvanderhoof/9380545 to set the webview used by the app to get around this. I am working on making a plugin that when installed will change this behaviour.

-Mike