android phonegap audio weird issue

Question

i am trying to insert background audio on my first page on a phonegap app. Currently i am testing this on Android 2.2 (on actual phone) but final app is intended for iOS as well

I have used various methods, the only one that had some success is through javascript. I get a very weird behavior (for me at least). Audio plays only if i click on the button and not on page load even though both(button and ready function) call the same function (playAudio) and when the page loads i do get the alert which means that the playAudio function has been successfully called.

1) Do i do something wrong? How can i fix this please? any ideas?

2) why does the < embed > not work on Android (it works just fine as it should on the desktop browser btw). (i have used 2 embeds for testing purposes with different paths, none works on Android) This should be the easiest way to do background audio..

My intention is of course to get rid of the button and have the music to play automatically on page load.

thank you

Here is my code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script>
    $(document).ready(function(){
        alert('ready');
        playAudio('intro.mp3')
    });

    function playAudio(src) {
        alert('func::playAudio(src)');
        if (device.platform == 'Android') {
            src = '/android_asset/www/' + src;
        }
        var media = new Media(src, success, error_error);
        media.play();
    }
    function success() { 
        // ignore 
    }
    function error_error(e) {
        alert('great error');
        alert(e.message);
    }
</script>
</head>

<body>
<div class="container-fluid">
<button id="button" onclick="playAudio('intro.mp3')"></button>
<embed name="introAudio" src="intro.mp3" loop="false" hidden="true" autostart="true">
<embed name="introAudio2" src="/android_asset/www/intro.mp3" loop="false" hidden="true" autostart="true">
</div>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();
</script>
</body>

</html>

MBillau MBillau · Accepted Answer · 2013-05-22T17:18:34

I was able to use your code and get the audio to play when the page loads without clicking a button. I tested on Android 4.2 and on Android 2.2 and did not have any problems, beside having to remove the alert call in your playAudio function, since the alert() blocks JS execution and stops the call to play media until the dialog is dismissed.

document.addEventListener('deviceready', onDeviceReady, false);

 function onDeviceReady(){
        console.log("Device is ready.");
        playAudio('intro.mp3');
}
function playAudio(src) {
        if (device.platform == 'Android') {
            src = '/android_asset/www/' + src;
        }
        var media = new Media(src, success, error_error);
        media.play();
    }
function success() { console.log("working");} // in your question above,
          // you have a comment that causes a missing '}'

function error_error(e) {
    alert('great error');
    alert(e.message);
}

This code works fine on both devices. As I pointed out above, in the code that you have in the question, your success method is invalid, because the comment hides the closing brace: function success() { // ignore } If you were to do function success() { } then it will work.

Edit: also, the <embed> seemed to work fine for me on both..at least, I guess it did, since the audio was there. What do you mean "it doesn't work?" Do you expect some sort of UI controls or something?

android phonegap audio weird issue

1 Answers