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');
});
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?
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.
@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.
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:
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.