Javascript 让SoundJS与Cordova/Phonegap合作
我正在构建一个具有广泛音频需求的应用程序，因此我使用SoundJS实现这一点，并使用phonegap编译该应用程序 我正在使用构建soundJS应用程序。这似乎是不同的，包括一个特殊的科尔多瓦音频插件。因此，我无法在编译后的应用程序上注册这些插件。这是因为注册任何插件都需要检查该插件是否受支持。对于cordova，方法Javascript 让SoundJS与Cordova/Phonegap合作,javascript,cordova,phonegap-build,soundjs,Javascript,Cordova,Phonegap Build,Soundjs,我正在构建一个具有广泛音频需求的应用程序，因此我使用SoundJS实现这一点，并使用phonegap编译该应用程序 我正在使用构建soundJS应用程序。这似乎是不同的，包括一个特殊的科尔多瓦音频插件。因此，我无法在编译后的应用程序上注册这些插件。这是因为注册任何插件都需要检查该插件是否受支持。对于cordova，方法isSupported检查以下各项： if (s._capabilities != null || !(window.cordova || window.PhoneGap || w
isSupportedif (s._capabilities != null || !(window.cordova || window.PhoneGap || window.phonegap) || !window.Media) { return;}
<!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>
Cordova设备就绪示例
//加载Cordova后调用onDeviceReady。
//
//此时，文档已加载，但cordova-2.3.0.js尚未加载。
//加载Cordova并与本机设备通话时，
//它将调用事件“DeviceRady”。
//
函数onLoad（）{
document.getElementById（“加载的文档”）.innerHTML=“加载的文档”
文件。添加的监听器（“deviceready”，OnDeviceraddy，false）；
}
//Cordova已加载，现在可以安全地调用Cordova方法
//
函数ondevicerady（）{
//现在可以安全地使用Cordova API了\
document.getElementById（“设备已加载”）.innerHTML=“设备已加载”
if（window.cordova | | | window.PhoneGap | | | window.PhoneGap）{
document.getElementById（“phonegap_-loaded”）.innerHTML=“phonegap-loaded”
}
if（window.Media）{
document.getElementById（“媒体加载”）.innerHTML=“媒体加载”
}
}
您好，正在测试phonegap DeviceRady
装货单据
装载装置
检测电话间隙
检测介质
<script type="text/javascript" src="cordova.js"></script>
SoundJS：移动安全
移动安全游戏
本例使用SoundJS注册并播放声音，其方式将
在移动设备上工作
你好，世界
很抱歉
您的浏览器当前不支持SoundJS
请
使用您正在使用的设备和浏览器。谢谢
var displayMessage；//用于向用户显示消息的HTML元素
this.myNameSpace=this.myNameSpace | |{}；
函数加载_doc（）{
if（/（ipad | iphone | ipod | android | windows phone）/i.test（navigator.userAgent）））{
文件。添加的监听器（'DeviceRady'，init，false）；
}否则{
init（）；
}
}
函数init（）{
//将其保存下来，因为遍历DOM以获取引用非常昂贵
displayMessage=document.getElementById（“状态”）；
//如果是在手机上，则需要在触摸事件中播放声音
if（createjs.BrowserDetect.isIOS | | createjs.BrowserDetect.isAndroid | | | createjs.BrowserDetect.isBlackberry | | createjs.BrowserDetect.isWindowPhone）{
//document.addEventListener（“click”，handleTouch，false）；//适用于Android，不适用于iOS
displayMessage.addEventListener（“click”，handleTouch，false）；//适用于Android和iPad
displayMessage.innerHTML=“触按启动”；
}
否则{
handleTouch（空）；
}
}
//在此范围内启动应用程序
功能handleTouch（事件）{
displayMessage.removeEventListener（“单击”，HandletTouch，false）；
//通过创建应用程序来启动应用程序
var thisApp=new myNameSpace.MyApp（）；
}
//为应用程序创建命名空间
//这是一个函数闭包
（功能（）{
//应用程序
函数MyApp（）{
this.init（）；
}
MyApp.prototype={
src:null，//我们试图播放的音频src
soundInstance:null，//创建或播放src时声音返回的soundInstance
displayStatus:null，//用于向用户显示消息的HTML元素
loadProxy:null，
init：函数（）{
//存储DOM元素，这样我们就可以反复支付查找它的费用
this.displayStatus=document.getElementById（“状态”）；
//这做了两件事，它初始化默认插件，如果失败，if语句将触发，我们将显示一个错误
//请注意，WebAudioPlugin在初始化时播放空声音，如果在调用堆栈中包含触摸事件的函数内播放，则会激活iOS上的web音频
如果（！createjs.Sound.initializeDefaultPlugins（））{
document.getElementById（“错误”）.style.display=“块”；
document.getElementById（“内容”）。
<!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>