4

我正在构建一个具有广泛音频要求的应用程序,因此我为此使用 SoundJS,并且正在使用 phonegap 编译该应用程序。

我正在使用移动安全方法来构建 soundJS 应用程序。似乎有不同的音频插件,包括一个特殊的 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 build 进行编译时,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 我发现 deviceready 无法正常工作,因为我没有添加cordova:

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

所以,当我这样做时,我能够初始化科尔多瓦音频插件。但是,尽管使用了移动安全方法,我仍然无法播放声音:

(此代码托管在 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>
4

3 回答 3

2

@hmghaly,
检查 Phonegap 可用性的一般方法是使用 Cordova/Phonegap 提供的 'deviceready' 事件。此外,您需要等到此事件完成。

您将需要阅读本文常见问题解答的第 4 条:
Cordova/Phonegap 新手开发人员的主要错误

我将引用文档中的重要部分(您应该阅读):

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

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

一旦 Cordova 完全加载,就会触发Cordova deviceready事件。设备启动后,您可以安全地调用 Cordova 函数。

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

祝你好运

于 2015-09-19T22:09:04.203 回答
1

如果您使用的是 SoundJS 0.6.2,则不必包含 MobileSafe 代码。参考官方文档

很长一段时间以来我面临的问题是本地声音文件没有在 iOS 中成功加载。

我发现:最新的 iOS 使用 WKWebView。它似乎将本地文件视为来自远程服务器,即使它们位于应用程序本身中,并且此类请求被阻止。参考来源

最后经过大量调试和记录,以下解决方案对我有用:

  1. 添加 Corodova 文件插件。

    cordova plugin add cordova-plugin-file

  2. 将本地文件路径更改为:

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

于 2016-06-25T03:44:05.460 回答
1

虽然这不是一个完整的答案,但我目前正在解决完全相同的问题,并且在完全相同的时间点出现问题。

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

在确保安装了 cordova 之后,下一件大事是确保您确实安装了 cordova-plugin-media。上一行中的 !window.Media位。听起来很简单,但如果您只是添加插件并构建而不读取所有输出,您可能会遇到困难。

媒体插件需要 cordova 版本 > 5.0 。问题在于,cordova 被固定在 4.1.1 版本 - 尽管反复完全删除了 cordova,但至少我的是 - 多次通过 npm 和手动完全删除所有 npm 缓存。

Cordova 在内部硬连线以安装特定版本,除非您告诉它不要这样做。

所以请确保您正在使用

科尔多瓦平台添加android@5.XX

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

科尔多瓦平台添加安卓(坏)

这将安装固定版本

如果您这样做,尽管使用了 cli 命令,但后一种cordova 将愉快地使用 4.1.1 版构建

科尔多瓦-v

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

然后它将进入插件步骤 - 确定环境不适合您的插件 - 发出警告并愉快地继续构建 - 减去媒体插件。其他一切似乎都可以正常工作-该应用程序将运行,除非您深入研究它,否则您不会注意到您使用的是旧版本的cordova。

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

新的 Cordova 版本发布

于 2016-01-29T03:26:40.710 回答