文章/答案/技术大牛

发布

社区首页 >问答首页 >让SoundJS与Cordova/Phonegap合作

问让SoundJS与Cordova/Phonegap合作
EN

Stack Overflow用户

提问于 2015-09-19 21:00:25

回答 3查看 1.3K关注 0票数 4

我正在构建一个具有广泛音频需求的应用程序，所以我使用SoundJS来实现它，我正在使用phonegap编译这个应用程序。

我正在使用移动安全进场构建一个soundJS应用程序。似乎有不同的音频插件，包括一个特殊的科多瓦音频插件。因此，我无法在编译后的应用程序上注册任何这些插件。这是因为注册任何插件都需要检查是否支持这个插件。对于cordova，isSupported方法检查以下内容：

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

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

因此，问题是，如何调查什么是错误的，如何知道，例如，媒体插件是否安装不正确(都来自我们可以使用的javascript变量，因为我不能使用任何其他调试)，还是在我使用phonegap编译时，没有cordova或phonegap的变量。我们能列出所有全局变量以查看使用了哪些变量吗？

Edit感谢杰西提请我注意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，我发现这个设备不起作用，因为我没有添加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>

cordova

phonegap-build

soundjs

javascript

回答 3

Stack Overflow用户

发布于 2015-09-19 22:09:04

@hmghaly，

检查Phonegap可用性的一般方法是使用Cordova/Phonegap提供的“deviceready”事件。此外，您还需要等待必需的，直到此事件完成。

您可能希望阅读本文的第4部分FAQ：

Cordova/Phonegap新开发人员犯的最大错误

我将引用重要的部分来源于文件 (您应该阅读)：

这是每个Cordova应用程序都应该使用的非常重要的事件。 Cordova由两个代码库组成:本地代码和JavaScript代码。在加载本机代码时，将显示自定义加载图像。但是，JavaScript只加载一次DOM。这意味着您的web应用程序可以在加载之前调用Cordova JavaScript函数。科多瓦爆炸事件一旦科多瓦满载就会起火。设备启动后，您可以安全地调用Cordova函数。

这些文档包括与您的特定移动设备和平台相关的代码示例。

最好的运气

票数 2

Stack Overflow用户

发布于 2016-01-29 03:26:40

虽然这不是一个完整的答案，但我目前正努力解决完全相同的问题，而且它是在完全相同的点上断裂的。

如果(s._capabilities != null \{返回；}

在你确保cordova被安装之后，下一个重要的事情就是确保你真的安装了cordova插件媒体。上面行中的!window.Media位。听起来很容易，但如果你只是简单地添加插件和构建，而不阅读所有的输出，你可能会失败。

媒体插件要求cordova版本> 5.0。问题是，cordova被固定在4.1.1版--至少我的是，尽管cordova一再被完全移除--几次通过npm和手动完全删除所有npm缓存。

科多瓦是硬内部安装一个特定的版本，除非你告诉它不安装。

所以要确保你用的是

cordova平台添加android@5.X.X

适合您的版本，而不仅仅是一个普通的老版本

cordova平台添加android (坏)

它将安装固定版本。

如果这样做，尽管使用cli命令，后一个cordova将很高兴地使用4.1.1版本进行构建。

科多瓦-v

报告您使用的是更晚的版本--在我的例子中是5.4.1

然后，它将进入插件步骤--决定环境不适合您的插件--发出警告，并愉快地继续进行构建--减去媒体插件。其他一切看起来都很好--应用程序会运行，除非你深入挖掘，否则你不会注意到你在科多瓦的老版本上。

注意:他们刚刚发布了一个新版本，将固定版本向前移动-所以如果你更新到最新版本-你应该没事。

科多瓦新版本发布

票数 1

Stack Overflow用户

发布于 2016-06-25 03:44:05

如果使用的是SoundJS 0.6.2，则不必包含MobileSafe代码。参考官方医生

很长一段时间以来，我面临的问题是本地声音文件没有在iOS中成功加载。

我发现:最新的iOS使用WKWebView。它似乎把本地文件当作是来自远程服务器的文件，即使它们在应用程序本身中，并且这样的请求被阻止。参考来源

最后，经过大量调试和日志记录，以下解决方案对我有效：

添加科洛德瓦文件插件。 cordova plugin add cordova-plugin-file
将本地文件路径更改为： cdvfile://localhost/bundle/www/you_folder_name/file_name.mp3

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32673187

复制

相似问题

问让SoundJS与Cordova/Phonegap合作
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让SoundJS与Cordova/Phonegap合作EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让SoundJS与Cordova/Phonegap合作
EN