简体   繁体   English

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

[英]Phonegap - Audio will not play on Android device

Lately I've been having terrible trouble trying to get audio to play on my android device via my phonegap build. 最近,我一直在尝试通过phonegap版本使音频在android设备上播放时遇到麻烦。 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>

@ZyOn (deleted previous comment) @ZyOn(删除先前的评论)
You can use my Media Demo example to find your issue. 您可以使用我的Media Demo示例来查找问题。 Phonegap Demo Apps (core) Phonegap演示应用程序(核心)

The source is on github. 源码在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. 同样,应在deviceready事件之后将您的app.initialize()调用。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM