2015-09-19 62 views
4

我正在構建一個具有廣泛音頻需求的應用程序,因此我正在使用SoundJS,並且正在使用phonegap編譯該應用程序。獲取SoundJS與Cordova/Phonegap合作

我使用mobile safe approach來構建soundJS應用程序。看起來有不同的audio plugins,包括一個特殊的科爾多瓦音頻插件。所以,我無法在編譯的應用程序上註冊任何這些插件。這是因爲註冊任何插件需要檢查是否支持該插件。在科爾多瓦的情況下,該方法isSupported檢查以下:

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

,當應用程序被編譯這意味着,不存在全局變量稱爲window.cordova或PhoneGap的和沒有全局變量稱爲window.media(I認爲這是需要安裝的媒體插件才能讓soundjs工作,並且我已經將它添加到config.xml中,我正在使用phonegap build。

所以問題是,如何調查什麼是錯誤的,如何知道媒體插件是否安裝不正確(全部來自我們可以使用的javascript變量,因爲我無法使用任何其他調試),或者當我使用phonega編譯時p建立沒有變量cordova或phonegap ..我們可以列出所有全局變量,看看哪些使用?

編輯 感謝傑西繪製我注意有關的PhoneGap這點,所以我建立了一個小的應用程序只是爲了測試deviceready事件,但由於某種原因,它仍然時的PhoneGap構建編譯不起作用:

<!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是行不通的,因爲我沒加科爾多瓦:

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

請訪問以下鏈接http://stackoverflow.com/questions/22515699/play-sound-on -phonegap應用程序內換安卓 – sunil

+0

@hmghaly你知道你的圖書館只使用HTML5音頻的播放源? – MysterX

+0

@MysterX可能是 – hmghaly

回答

2

@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函數 。

The Cordova deviceready事件一旦Cordova完全加載就會觸發。設備啓動後,您可以安全地撥打Cordova功能。

該文檔包含與您的特定移動設備和平臺相關的代碼示例。

祝您好運

+0

Hi @ jesseMonroy650,非常感謝這些技巧PhoneGap的。所以我試着測試關於deviceready的這一點,你能否請檢查原始文章的編輯部分中的代碼,因爲它通過phonegap編譯編譯時不工作? – hmghaly

+0

什麼不起作用?我看到四個測試點。 – JesseMonroy650

+0

嗨,看來我們剛剛缺少科爾多瓦,但即使添加後,仍然存在問題,您能否檢查edit2和賞金聲明? – hmghaly

1

的雖然它不是我目前通過相同問題的工作一個完整的答案,並在完全相同的點突破。

如果(s._capabilities = NULL ||(window.cordova || || window.PhoneGap window.phonegap)|| window.Media !!!){返回;}

確保安裝Cordova之後,下一件重要的事情就是確保實際安裝了cordova-plugin-media。上面一行中的!window.Media位。聽起來很簡單,但如果你只是簡單地添加插件而沒有讀取所有的輸出就可以解開。

媒體插件要求科爾多瓦版本> 5.0。問題在於Cordova是在4.1.1版固定的 - 至少我的是儘管反覆徹底刪除了cordova - 幾次通過npm並手動刪除所有npm緩存。

科爾多瓦硬連線內部安裝一個特定的版本,除非你不告訴它。

因此,請確保您使用的

科爾多瓦平臺添加[email protected]

根據您的版本不只是一個普通的老

科爾多瓦平臺添加的android (BAD)

其中w如果你選擇後者科爾多瓦會很高興,儘管CLI命令

科爾多瓦-v

4.1.1版本建立報告你在以後的版本生病安裝固定版本

- 中我的情況5.4.1

它將然後點擊插件步 - 決定的環境是不適合你的插件 - 吐出了警告,並愉快地與構建繼續 - 減去媒體插件。一切將似乎工作 - 應用程序將運行,除非你深入研究它,你不會注意到你是一個老版本的科爾多瓦。

注:他們剛剛發佈了其向前移動了固定版本的新版本 - 如果你更新到最新版本 - 你應該罰款。

New Cordova Version Released

1

如果使用SoundJS 0.6.2,那麼你不必包括MobileSafe代碼。請參閱Official Doc

我是從相當長的一段時間面臨的問題是當地的聲音文件未在iOS中成功加載。

我發現: 最新的iOS使用WKWebView。它看起來好像他們從遠程服務器來處理本地文件,即使他們是在應用程序本身,而這樣的請求被封鎖。參考Source

最後經過大量的調試和記錄, 以下解決方案的工作對我來說:

  1. 添加Corodova文件插件。

    cordova plugin add cordova-plugin-file

  2. 更改本地文件路徑是:

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