讓 SoundJS 與 Cordova/Phonegap 一起工作

Question

我正在構建一個具有廣泛音頻要求的應用程序，因此我為此使用了 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>

所以，當我這樣做時，我能夠初始化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

@hmgaly，
檢查 Phonegap 可用性的一般方法是使用 Cordova/Phonegap 提供的“deviceready”事件。 此外，您需要等到此事件完成。

您將需要閱讀本文常見問題解答的#4：
Cordova/Phonegap 新手開發人員犯的主要錯誤

我將引用文檔中的重要部分（您應該閱讀）：

這是每個 Cordova 應用程序都應該使用的非常重要的事件。

Cordova 由兩個代碼庫組成：本機和 JavaScript。 在加載本機代碼時，會顯示自定義加載圖像。 但是，JavaScript 僅在 DOM 加載后才加載。 這意味着您的 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 version > 5.0 。 問題在於，cordova 被固定在 4.1.1 版本上——至少我的版本是盡管反復完全刪除了cordova——多次通過 npm 和手動完全刪除所有 npm 緩存。

Cordova 在內部硬連線以安裝特定版本，除非您告訴它不要。

所以請確保您正在使用

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

適合您的版本，而不僅僅是普通的舊版本

cordova 平台添加 android (BAD)

這將安裝固定版本

如果你這樣做，盡管使用了 cli 命令，后一種cordova 將很樂意使用4.1.1 版構建

科爾多瓦 -v

報告您使用的是更高版本 - 在我的情況下為 5.4.1

然后它將進入插件步驟 - 確定環境不適合您的插件 - 發出警告並愉快地繼續構建 - 減去媒體插件。 其他一切似乎都可以工作 - 該應用程序將運行，除非您深入研究它，否則您不會注意到您使用的是舊版本的cordova。

注意：他們剛剛發布了一個新版本，將固定版本向前移動 - 所以如果你更新到最新版本 - 你應該沒問題。

新 Cordova 版本發布

Answer 3

如果您使用的是 SoundJS 0.6.2，則不必包含 MobileSafe 代碼。 參考官方文檔

我很長一段時間面臨的問題是本地聲音文件在 iOS 中沒有成功加載。

我的發現：最新的 iOS 使用 WKWebView。 它似乎將本地文件視為來自遠程服務器，即使它們位於應用程序本身中，並且此類請求會被阻止。 參考來源

最后經過大量調試和日志記錄，以下解決方案對我有用：

添加 Corodova 文件插件。
cordova plugin add cordova-plugin-file
將本地文件路徑更改為：
cdvfile://localhost/bundle/www/you_folder_name/file_name.mp3

讓 SoundJS 與 Cordova/Phonegap 一起工作

問題描述

3 個解決方案

解決方案1
2 2015-09-19 22:09:04

解決方案2
1 2016-01-29 03:26:40

解決方案3
1 2016-06-25 03:44:05

讓 SoundJS 與 Cordova/Phonegap 一起工作

問題描述

3 個解決方案

解決方案1 2 2015-09-19 22:09:04

解決方案2 1 2016-01-29 03:26:40

解決方案3 1 2016-06-25 03:44:05

解決方案1
2 2015-09-19 22:09:04

解決方案2
1 2016-01-29 03:26:40

解決方案3
1 2016-06-25 03:44:05