个人中心
gpt4 book ai didi

javascript - 让 SoundJS 与 Cordova/Phonegap 一起工作

转载 作者：塔克拉玛干 更新时间：2023-11-02 20:44:28 24 4
gpt4 key购买 nike

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

我正在使用 mobile safe approach构建一个 soundJS 应用程序。好像有不同的audio plugins ，包括一个特殊的 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 中。

所以问题是，如何调查错误，如何知道例如媒体插件是否未正确安装(全部来 self 们可以使用的 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>

你能帮我找出问题出在哪里吗？

编辑2我发现 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>

最佳答案

@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 - 让 SoundJS 与 Cordova/Phonegap 一起工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32673187/

24 4 0
文章推荐： javascript - AngularJS 在页面上显示 svg 文件
文章推荐： android - 录制的视频方向错误
文章推荐： Android ndk 8b 无法加载库
文章推荐： javascript - 找出两个元素的开始之间有多少像素？
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com