Phonegap - Audio will not play on Android device

Question

Lately I've been having terrible trouble trying to get audio to play on my android device via my phonegap build. I've seen many others have had several issues (mainly pertaining to the correct file path) but none of the solutions I've come across have led to a result. Here is my script for loading and playing the audio:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <title>Audio</title>
</head>
<body>

    <div class="container-fluid">
        <div class="col-xs-12 col-md-12">
            <div class="s-it">Tap Here</div>
        </div>
        <div class="row">
            <div class="col-xs-4 col-md-4"></div>
            <div class="col-xs-4 col-md-4">
                <div class="container">
                    <span style="display:none;" id="vX"></span>
                    <span style="display:none;" id="vY"></span>
                    <span style="display:none;" id="vZ"></span>
                </div>
                <div class="row">
                    <div class="col-md-12 col-xs-12">
                        <div id="sbell">
                            <img src="img/bell.png">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 col-xs-12">
                        <div class="s-text">Test</div>
                    </div>
                    <div class="col-md-12 col-xs-12">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-12"><br><br></div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-12"><br><br></div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-12">
                <div class="well">
                    <span class="sts">
                        <img src="img/shake-banner.png">
                    </span>
                </div>
            </div>
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
    <script type="text/javascript">

    var myMedia1 = null;
    var myMedia2 = null;
    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady () {

        var src1 = '';
        var src2 = '';

        if (device.platform == 'Android') {
            src1 = '/android_asset/www/audiomp3/audio1.mp3';
            src2 = '/android_asset/www/audiomp3/audio2.mp3';
        }

        myMedia1 = new Media(src1, onSuccess, onError);

        myMedia2 = new Media(sec2, onSuccess, onError);

        myMedia1.addEventListener('ended', function () {
            setTimeout(function () {
                $('#sbell').removeClass('animate-bell');
            }, 2000);
            setTimeout(function () {
                $('.s-text').fadeOut(200);
            }, 500);
        }, false);
    }

    function onSuccess () {
        alert("Audio Loaded");
    }

    function onError (e) {
        alert(e.message);
    }

    window.ondevicemotion = function (event) {
        var accX = event.accelerationIncludingGravity.x;
        var accY = event.accelerationIncludingGravity.y;
        var accZ = event.accelerationIncludingGravity.z;

        if (accX >= 8 || accX <= -8) {
            myMedia2.play();
        }

        document.getElementById('vX').innerHTML = accX;
        document.getElementById('vY').innerHTML = accY;
        document.getElementById('vZ').innerHTML = accZ;

    };

    $(document).ready(function () {
        $('#sbell').click(function(event){ 
            $(this).addClass('animate-bell');
            $('.s-text').css('color', 'red').fadeIn(300);
            myMedia1.play();
        });
    });

    </script>
</body>

Answer 1

@ZyOn (deleted previous comment)
You can use my Media Demo example to find your issue. Phonegap Demo Apps (core)

The source is on github. It contains sound samples too. I have additional notes, if you need them.

Also, your app.initialize() should be called AFTER the deviceready event.

Phonegap - Audio will not play on Android device

Question

1 answers

solution1
0 ACCPTED 2015-08-13 00:36:08

Phonegap - Audio will not play on Android device

Question

1 answers

solution1 0 ACCPTED 2015-08-13 00:36:08

solution1
0 ACCPTED 2015-08-13 00:36:08