Question

我正在构建一个具有广泛音频要求的应用程序，所以我正在使用SoundJS，我正在使用phonegap编译应用程序。

我正在使用mobile safe approach构建一个soundJS应用。似乎有不同的audio plugins，包括一个特殊的Cordova音频插件。所以，我无法在已编译的应用程序上注册任何这些插件。这是因为注册任何插件需要检查是否支持此插件。对于cordova，方法isSupported检查以下内容：

if (s._capabilities != null || !(window.cordova || window.PhoneGap || window.phonegap) || !window.Media) { return;}

这意味着当编译应用程序时，没有名为window.cordova或phonegap的全局变量，也没有名为window.media的全局变量（我认为这是需要安装的媒体插件才能使soundjs工作，并且我已将它添加到我用于phonegap构建的config.xml中。

所以问题是，如何调查什么是错的，如何知道例如媒体插件是否安装不正确（所有这些都来自我们可以使用的javascript变量，因为我无法使用任何其他调试）或者是这样的情况，当我使用phonegap构建编译时，没有cordova或phonegap的变量..我们可以列出所有全局变量以查看使用哪些变量？

修改感谢Jesse将我的注意力集中在关于phonegap的这些观点上，所以我构建了一个小应用程序来测试deviceready事件，但由于某些原因，当通过phonegap build编译时它仍然不起作用：

<!DOCTYPE html>
<html>
  <head>
    <title>Cordova Device Ready Example</title>

    <script type="text/javascript" charset="utf-8" src="js/soundjs-NEXT.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/cordovaaudioplugin-NEXT.min.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Call onDeviceReady when Cordova is loaded.
    //
    // At this point, the document has loaded but cordova-2.3.0.js has not.
    // When Cordova is loaded and talking with the native device,
    // it will call the event `deviceready`.
    //
    function onLoad() {
        document.getElementById("doc_loaded").innerHTML="Document Loaded"
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // Cordova is loaded and it is now safe to make calls Cordova methods
    //
    function onDeviceReady() {
        // Now safe to use the Cordova API\
        document.getElementById("device_loaded").innerHTML="Device Loaded"

        if (window.cordova || window.PhoneGap || window.phonegap){ 
            document.getElementById("phonegap_loaded").innerHTML="Phonegap Loaded"
        }
        if (window.Media){
            document.getElementById("media_loaded").innerHTML="Media Loaded"
        }

    }

    </script>
  </head>
  <body onload="onLoad()">
  Hello Hello, testing phonegap deviceready
  <div id="doc_loaded">Loading Doc</div>
  <div id="device_loaded">Loading Device</div>
  <div id="phonegap_loaded">Detecting Phonegap</div>
  <div id="media_loaded">Detecting Media</div>
  </body>
</html>

你能帮我找一下问题所在吗？

EDIT2 我发现设备已经无法正常工作，因为我没有添加cordova：

<script type="text/javascript" src="cordova.js"></script>

所以，当我这样做时，我能够初始化cordova音频插件。然而，尽管使用移动安全方法，我仍然无法播放声音：

（此代码托管在arbsq.net/h6 /）

<!DOCTYPE html>
<html>
<head>
    <title>SoundJS: Mobile Safe</title>

    <link href="css/shared.css" rel="stylesheet" type="text/css"/>
    <link href="css/examples.css" rel="stylesheet" type="text/css"/>
    <link href="css/soundjs.css" rel="stylesheet" type="text/css"/>
    <script src="js/examples.js"></script>
</head>

<body onload="loading_doc()">

<header  class="SoundJS">
    <h1>Mobile Safe Play</h1>

    <p>This example registers and plays a sound with SoundJS in a way that will
        work on mobile devices.</p>
</header>

<div class="content" id="content" style="height: auto">
    <p id="status">Hello World.</p>
</div>

<div id="error">
    <h2>Sorry!</h2>

    <p>SoundJS is not currently supported in your browser.</p>

    <p>Please <a href="http://github.com/CreateJS/SoundJS/issues" target="_blank">log a bug</a>
        with the device and browser you are using. Thank you.</p>
</div>

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/soundjs-NEXT.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordovaaudioplugin-NEXT.min.js"></script>


<!-- We also provide hosted minified versions of all CreateJS libraries.
    http://code.createjs.com -->

<script id="editable">
    var displayMessage;     // the HTML element we use to display messages to the user
    this.myNameSpace = this.myNameSpace || {};
    function loading_doc() {
         if(( /(ipad|iphone|ipod|android|windows phone)/i.test(navigator.userAgent) )) {
            document.addEventListener('deviceready', init, false);
        } else {
            init();
        }
    }

    function init() {
        // store this off because walking the DOM to get the reference is expensive
        displayMessage = document.getElementById("status");

        // if this is on mobile, sounds need to be played inside of a touch event
        if (createjs.BrowserDetect.isIOS || createjs.BrowserDetect.isAndroid || createjs.BrowserDetect.isBlackberry || createjs.BrowserDetect.isWindowPhone) {
            //document.addEventListener("click", handleTouch, false);   // works on Android, does not work on iOS
            displayMessage.addEventListener("click", handleTouch, false);   // works on Android and iPad
            displayMessage.innerHTML = "Touch to Start";
        }
        else {
            handleTouch(null);
        }
    }

    // launch the app inside of this scope
    function handleTouch(event) {
        displayMessage.removeEventListener("click", handleTouch, false);
        // launch the app by creating it
        var thisApp = new myNameSpace.MyApp();
    }

    // create a namespace for the application


    // this is a function closure
    (function () {
        // the application
        function MyApp() {
            this.init();
        }

        MyApp.prototype = {
            src: null,            // the audio src we are trying to play
            soundInstance: null,  // the soundInstance returned by Sound when we create or play a src
            displayStatus: null,  // the HTML element we use to display messages to the user
            loadProxy: null,

            init: function () {
                // store the DOM element so we do repeatedly pay the cost to look it up
                this.displayStatus = document.getElementById("status");

                // this does two things, it initializes the default plugins, and if that fails the if statement triggers and we display an error
                // NOTE that WebAudioPlugin plays an empty sound when initialized, which activates web audio on iOS if played inside of a function with a touch event in its callstack
                if (!createjs.Sound.initializeDefaultPlugins()) {
                    document.getElementById("error").style.display = "block";
                    document.getElementById("content").style.display = "none";
                    return;
                }

                // Create a single item to load.
                var assetsPath = "audio/";
                this.src = assetsPath + "M-GameBG.ogg";

                this.displayStatus.innerHTML = "Waiting for load to complete.";  // let the user know what's happening
                // NOTE createjs.proxy is used to apply scope so we stay within the touch scope, allowing sound to play on mobile devices
                this.loadProxy = createjs.proxy(this.handleLoad, this);
                createjs.Sound.alternateExtensions = ["mp3"];   // add other extensions to try loading if the src file extension is not supported
                createjs.Sound.addEventListener("fileload", this.loadProxy); // add event listener for when load is completed.
                createjs.Sound.registerSound(this.src);  // register sound, which preloads by default

                return this;
            },

            // play a sound inside
            handleLoad: function (event) {
                this.soundInstance = createjs.Sound.play(event.src);    // start playback and store the soundInstance we are currently playing
                this.displayStatus.innerHTML = "Playing source: " + event.src;  // let the user know what we are playing
                createjs.Sound.removeEventListener("fileload", this.loadProxy); // we only load 1 sound, so remove the listener
            }
        }

        // add MyApp to myNameSpace
        myNameSpace.MyApp = MyApp;
    }());

</script>

</body>
</html>

Answer 1

@hmghaly，
检查Phonegap可用性的一般方法是使用Cordova / Phonegap提供的'deviceready'事件。此外，等待此事件完成后必需。

您需要阅读本文＃4常见问题解答：
Top Mistakes by Developers new to Cordova/Phonegap

我会引用重要的part from the documentation（您应该阅读）：

这是每个Cordova应用程序都应该使用的非常重要的事件。

Cordova由两个代码库组成：native和JavaScript。在加载本机代码时，会显示自定义加载图像。   但是，只有在DOM加载后才会加载JavaScript。这意味着你的   Web应用程序可能会调用Cordova JavaScript函数   在它加载之前。

一旦Cordova完全加载，Cordova deviceready 事件就会触发。设备触发后，您可以安全地调用Cordova功能。

该文档包含与您的特定移动设备和平台相关的代码示例。

最好的运气

Answer 2

虽然这不是一个完整的答案，但我目前正在解决完全相同的问题，并且它正在完全相同的地方打破。

if（s._capabilities！= null ||！（window.cordova || window.PhoneGap || window.phonegap）|| ！window.Media）{return;}

确保安装cordova后，下一件大事就是确保您实际安装了cordova-plugin-media。上面一行中的！window.Media 位。听起来很简单但如果你只是添加插件和构建而不读取所有输出，你可以解开。

媒体插件需要cordova版本＆gt; 5.0。问题是cordova固定在版本4.1.1 - 至少我的是尽管多次完全删除cordova - 几次通过npm和手动完全删除所有npm缓存。

Cordova在内部硬连接以安装特定版本，除非您告诉它不要。

因此请确保您使用

cordova平台添加android@5.X.X

适合您的版本，而不仅仅是普通的

cordova平台添加android（BAD）

将安装固定版本

如果你做了后者，尽管有cli命令

，但仍然可以使用版本4.1.1构建

cordova -v

报告您使用的是更高版本 - 在我的情况下为5.4.1

然后它将点击插件步骤 - 确定环境不适合您的插件 - 吐出警告并快速继续构建 - 减去媒体插件。其他一切似乎都会起作用 - 应用程序会运行，除非你深入了解它，否则你不会注意到你使用旧版的cordova。

注意：他们刚刚发布了一个新版本，可以向前移动固定版本 - 所以如果你更新到最新版本 - 你应该没问题。

New Cordova Version Released

Answer 3

如果您使用的是SoundJS 0.6.2，那么您不必包含MobileSafe代码。请参阅Official Doc

我在很长一段时间内遇到的问题是本地声音文件未在iOS中成功加载。

我找到了什么：最新的iOS使用WKWebView。它似乎将本地文件视为来自远程服务器，即使它们位于应用程序本身，并且此类请求被阻止。参考Source

经过大量的调试和记录，以下解决方案对我有用：

添加Corodova文件插件。

cordova plugin add cordova-plugin-file
将本地文件路径更改为：

cdvfile://localhost/bundle/www/you_folder_name/file_name.mp3

让SoundJS与Cordova / Phonegap一起使用

3 个答案: