$cordovaMedia not compatible with ionic version 1.2.13?

Appreciate any feedback. Thanks

The instructions from http://ngcordova.com/docs/plugins/media/ does not seem to be working.

It seems that the Ionic code is throwing the error.

I get the following error

ReferenceError: Media is not defined
at Object.newMedia (http://localhost:8100/js/ng-cordova.min.js:8:10522)
at new (http://localhost:8100/js/app.js:23:27)
at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11994:17)
at extend.instance (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16247:21)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:15502:13
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8155:20)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15501:11)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14887:13)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15526:24)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14887:13)

Just a heads up, 1.2.13 is the CLI version, not ionic.js version.
Also, 1.2.13 is out of date, please update your cli.

npm install -g ionic

Did you install the native plugin as well?
Also, what does your code look like?
Keep in mind that ngCordova isn’t dependent on Ionic, but angular.

I’ve upgraded to ionic 1.3.2, Cordova 4.2.0, reinstalled the plugins and rebuilt the android platform. However, the same issue still persists

This is the code. Appreciate any feedback. I’ve been stuck for several weeks on this.

angular.module('starter', ['ionic','ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller("FirstController", function($scope,$ionicLoading,$cordovaMedia){

$scope.test="hello world";
var media= new Media('js/chime.mp3');

});

So you’re mixing vanilla cordova methods and ngCordova methods.

http://ngcordova.com/docs/plugins/media/

Take a look at the example in the ngCordova docs.

.controller('MyCtrl', function($scope, $cordovaMedia) {

  var src = "/src/audio.mp3";
  var media = $cordovaMedia.newMedia(src).then(function() {
    // success
  }, function () {
    // error
  });


  var iOSPlayOptions = {
    numberOfLoops: 2,
    playAudioWhenScreenIsLocked : false
  }

  media.play(options); // iOS only!
  media.play(); // Android

  media.pause();

  media.stop();

  media.release();

  media.seekTo(5000); // milliseconds value

  media.setVolume(0.5);

  media.startRecord();

  media.stopRecord();
});

I’ve tried this example earlier…and did it again just be sure.

Inside the controller, I have access to the $cordovaMedia object…but on running $cordovaMedia.newMedia()…it cannot instantiate the Media object, I’ve tried it with a local file as well as a public web url.

Could it be something to do with asynchronous loading? or versioning?

Could you let me know which versions of ionic, cordova, and plugins that you are using? that can run the code successfully?

Thanks again

Reinstalled everything to the latest versions as of today

This code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content ng-controller='MyCtrl'>
      <button class="button" ng-click="play()">Play</button>
      </ion-content>
    </ion-pane>
  </body>
</html>

js

angular.module('starter', ['ionic','ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.controller('MyCtrl', function($scope, $cordovaMedia) {

$scope.play=function(){
  var src = "http://www.stephaniequinn.com/Music/Vivaldi%20-%20Spring%20from%20Four%20Seasons.mp3";
  var media = $cordovaMedia.newMedia("http://www.stephaniequinn.com/Music/Vivaldi%20-%20Spring%20from%20Four%20Seasons.mp3").then(function() {
    // success
    alert("success");
      media.play(); 
  }, function () {
    // error
    alert("error")
  });
};
});

gives this error:

ReferenceError: Media is not defined
at Object.newMedia (http://localhost:8100/lib/ngCordova/dist/ng-cordova.js:3490:21)
at Scope.$scope.play (http://localhost:8100/js/app.js:24:29)
at $parseFunctionCall (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20124:18)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:50863:9
at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22178:28)
at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22276:23)
at HTMLButtonElement.<anonymous> (http://localhost:8100/lib/ionic/js/ionic.bundle.js:50862:13)
at HTMLButtonElement.eventHandler (http://localhost:8100/lib/ionic/js/ionic.bundle.js:10823:21)
at triggerMouseEvent (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2811:7)
at tapClick (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2800:3)

Another plugin such as the barcode scanner and vibration is working under the exact setup. So it’s probably the plugin.

Appreciate your kind advice. Thanks

@cys I’m sorry to say but the $cordovaMedia plugin isn’t fully ready for use yet. I’ve experienced many problems in the past where it works sometimes and doesn’t other times.

For now I recommend using the plugin as is (without ngCordova), and I will let you know when it’s production-ready.

Thanks for chiming in on this @pbernasconi

@cys you are sure you test this on a real mobile device?

Hi @cys,

I noticed http://localhost:8100 in your error messages. What happens when you build the binary and install it to your device or simulator rather than trying to use ionic serve or similar?

Also, if you don’t mind using an older version of ngCordova, I didn’t have any problems as demonstrated in my tutorial:

Note the tutorial is using the library from commit 9f907a654b3f27dcf9070d116df1963df297593e of the repository.

Regards,

hi,

Yes, I tested it on the mobile … the localhost was just to show the console.messages. I managed to get it working using the non ng-cordova way ie var media = new Media();

Thanks everyone for your help

P.S. @pbernasconi I’d be happy to donate some programming time if you could use some help for the plugin.

Thanks for your tutorials…I learnt a great deal from them…keep up to good work! :smile:

I can second cys’ issues. It simply doesn’t work :frowning: I’m not even able to make use of the original plugin currently…

Arrghhhh… Just a minute after I have written this comment I found this on the Internet:

The fix provided by Danielcrisp does it for me…

Works…

1 Like