如何在 ionic v1 中调用 cordova 插件

How to call cordova plugin in ionic v1

我在 ionic v1 中安装了 cordova-plugin-media 。但是当我在浏览器中运行它时,应用程序没有定义媒体。

ionic.bundle.js:26794 ReferenceError: Media is not defined
at ChildScope.$scope.playPodcast (controllers.js:1405)
at fn (eval at compile (ionic.bundle.js:27638), <anonymous>:4:232)
at ionic.bundle.js:65427
at ChildScope.$eval (ionic.bundle.js:30395)
at ChildScope.$apply (ionic.bundle.js:30495)
at HTMLElement.<anonymous> (ionic.bundle.js:65426)
at defaultHandlerWrapper (ionic.bundle.js:16787)
at HTMLElement.eventHandler (ionic.bundle.js:16775)
at triggerMouseEvent (ionic.bundle.js:2953)
at tapClick (ionic.bundle.js:2942)

这是我的代码

$scope.playPodcast = function($audioId) {
    new Media("http://www.viaviweb.in/envato/cc/online_mp3_app_demo/uploads/40655_Overboard.mp3").play();
}

只需快速搜索该插件的 github 页面即可找到该方法的使用方法。

具体来说,如果你想播放一个媒体文件,这是正确的使用方法。

function playAudio(url) {
    // Play the audio file at url
    var my_media = new Media(url,
        // success callback
        function () { console.log("playAudio():Audio Success"); },
        // error callback
        function (err) { console.log("playAudio():Audio Error: " + err); }
    );

    // Play audio
    my_media.play();

    // Pause after 10 seconds
    setTimeout(function () {
        my_media.pause();
    }, 10000);
}

好的,根据您注入脚本文件的方式,您需要使用以下两种方式之一调用它:

  1. 如果媒体插件作为脚本文件加载到您的 index.html 中,并且它自身附加到全局命名空间,则将以下内容添加到您的 app.js
angular.module('Media', [])
  .factory('Media', function () {
    return window.Media;
});

稍后,在您的 app.js 模块定义中,添加以下内容:

angular.module('myApp',
 [
  'ionic',
  'Media'
  ])
.run(
 [
   'ionicReady',
   'Media',
  function (
  ionicReady,  
  Media, 
) {
  //Media initialization code here
 }

这允许 angular 使用其依赖注入来确保 "Media" 在您的主模块中得到初始化。如果您想在应用程序的其他地方使用它,则必须将其导入其他模块。

  1. 如果您正在使用 NgCordova, which provides angular wrappers for common Cordova plugins, then you'd import it the same way you'd import any other AngularJS library. There's sample code for the media plugin here