javascript – 让SoundJS与Cordova / Phonegap一起使用
作者：互联网
我正在构建一个具有广泛音频要求的应用程序,所以我正在使用SoundJS,我正在使用phonegap编译应用程序.
我正在使用mobile safe approach构建一个soundJS应用程序.似乎有不同的audio plugins,包括一个特殊的Cordova音频插件.所以,我无法在已编译的应用程序上注册任何这些插件.这是因为注册任何插件需要检查是否支持此插件.如果是cordova,则该方法支持以下检查：
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 onl oad() {
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 onl oad="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 onl oad="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>
解决方法:
@hmghaly,
检查Phonegap可用性的一般方法是使用Cordova / Phonegap提供的’deviceready’事件.此外,您需要等到此事件完成.
您将需要阅读本文#4的常见问题解答：
Top Mistakes by Developers new to Cordova/Phonegap
我将引用重要的part from the documentation(您应该阅读)：
This is a very important event that every Cordova application should use.
Cordova consists of two code bases: native and JavaScript. While the native code is loading, a custom loading image is displayed.
However, JavaScript is only loaded once the DOM loads. This means your
web application could, potentially, call a Cordova JavaScript function
before it is loaded.The Cordova deviceready event fires once Cordova has fully loaded. After the device has fired, you can safely make calls to Cordova function.
该文档包含与您的特定移动设备和平台相关的代码示例.
最好的运气
标签：javascript,cordova,phonegap-build,soundjs 来源： https://codeday.me/bug/20190623/1272304.html