Phonegap - 音频无法在Android设备上播放

时间:2015-08-12 21:10:24

标签: javascript android cordova phonegap-build

最近我一直在尝试通过我的phonegap构建在我的Android设备上播放音频时遇到了麻烦。我已经看到很多其他人有几个问题(主要与正确的文件路径有关),但我遇到的解决方案都没有导致结果。这是我加载和播放音频的脚本:

<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>

1 个答案:

答案 0 :(得分:0)

@ZyOn(删除之前的评论)
您可以使用我的Media Demo示例来查找您的问题。 Phonegap Demo Apps (core)

The source在github上。它也包含声音样本。如果你需要,我还有其他笔记。

此外,您的app.initialize()应在deviceready事件之后调用。