Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
303 views
in Technique[技术] by (71.8m points)

javascript - 使SoundJS与Cordova / Phonegap一起使用(Getting SoundJS to work with Cordova/Phonegap)

I am building an app with extensive audio requirements, so I am using SoundJS for that, and I am compiling the app using phonegap.

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

I am using the mobile safe approach to build a soundJS app.

(我正在使用移动安全方法来构建soundJS应用。)

It seems that there are different audio plugins , including a special Cordova audio plugin.

(似乎有不同的音频插件 ,包括特殊的Cordova音频插件。)

So, I am not able to register any of these plugins on the compiled app.

(因此,我无法在已编译的应用程序中注册任何这些插件。)

This is because registering any plugin requires to check if this plugin is supported or not.

(这是因为注册任何插件都需要检查该插件是否受支持。)

In case of the cordova, the method isSupported checks for the following:

(如果是cordova,则isSupported方法检查以下内容:)

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

This means when the app is compiled, there is no global variable called window.cordova or phonegap and no global variable called window.media (I think this is the media plugin that needs to be installed to get soundjs to work, and I have added it to the config.xml that I'm using for phonegap build.

(这意味着在编译应用程序时,没有名为window.cordova或phonegap的全局变量,也没有名为window.media的全局变量(我认为这是需要安装的媒体插件才能使soundjs正常工作,我已经添加了它到我用于phonegap构建的config.xml中。)

So the question is, how to investigate what is wrong, how to know if for example the media plugin is not installed properly (all from the javascript variables that we can use, as I am not able to use any other debugging), or is it the case that when I compile using phonegap build there is no variables for cordova or phonegap.. can we list all global variables to see which ones are used?

(所以问题是,如何调查出了什么问题,如何知道例如媒体插件安装不正确(全部来自我们可以使用的javascript变量,因为我无法使用任何其他调试功能),或者当我使用phonegap构建进行编译的情况下,cordova或phonegap没有变量..我们能否列出所有全局变量以查看使用了哪些全局变量?)

Edit Thanks Jesse for drawing my attention to these points about phonegap, so I built a small app just to test the deviceready event, but for some reason it still doesn't work when compiled by phonegap build:

(编辑感谢Jesse提请我注意关于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>

Can you please help me locate where can the problem be?

(您能帮我找出问题所在吗?)

EDIT2 I figured out that the deviceready was not working because I didn't add cordova:

(EDIT2我发现该设备无法使用,因为我没有添加cordova:)

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

So, when I did, I was able to initialize the cordova audio plugin.

(这样,当我这样做时,便能够初始化cordova音频插件。)

However, I am still unable to play sound, despite using mobile safe approach:

(但是,尽管使用了移动安全方式,我仍然无法播放声音:)

(this code is hosted on arbsq.net/h6/)

((此代码托管在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>
  ask by hmghaly translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

@hmghaly,

(@hmghaly,)


the general method for checking for the availability of Phonegap is to use the 'deviceready' event that Cordova/Phonegap provide.

(检查Phonegap可用性的一般方法是使用Cordova / Phonegap提供的“ deviceready”事件。)

In addition, it is required that you wait until this event completes.

(此外, 要求您等待此事件完成。)

You will want to read #4 of this article FAQ:

(您将要阅读本文的#4常见问题解答:)


Top Mistakes by Developers new to Cordova/Phonegap

(Cordova / Phonegap新手开发人员的主要错误)

I will quote the important part from the documentation (which your should read):

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


This is a very important event that every Cordova application should use.

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

Cordova consists of two code bases: native and JavaScript.

(Cordova由两个代码库组成:本机代码和JavaScript。)

While the native code is loading, a custom loading image is displayed.

(加载本机代码时,将显示自定义加载图像。)

However, JavaScript is only loaded once the DOM loads.

(但是,仅在DOM加载后才加载JavaScript。)

This means your web application could, potentially, call a Cordova JavaScript function before it is loaded.

(这意味着您的Web应用程序可能会在加载之前调用Cordova JavaScript函数。)

The Cordova deviceready event fires once Cordova has fully loaded.

(一旦Cordova完全加载, 就会触发Cordova deviceready事件。)

After the device has fired, you can safely make calls to Cordova function.

(触发设备后,您可以安全地调用Cordova函数。)

The documentation includes code examples that would relevant to your particular mobile device and platform.

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

Best of Luck

(祝你好运)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...