CODEWITHSUNDEEP
cordovaionic-frameworkcordova-plugins
binarygiant
binarygiant

Reputation: 6422

Ionic Cordova Media Not Found

I'm writing an Ionic app, and I'm trying to play an mp3 file using the Cordova Media (org.apache.cordova.media). But when I use the Media object in JavaScript I get: ReferenceError: Media is not defined

I've used both plain JS and ngCordova and the result is the same.

Plain JS:

var media = new Media('js/components/timer/startBell.mp3');
media.play();

ngCordova flavor:

var startBell source = ('js/components/timer/startBell.mp3');
var mediaSource = $cordovaMedia.newMedia(startBellSrc);
                    var promise = mediaSource.promise;
                    var mediaStatus = mediaSource.mediaStatus;
                    var media = mediaSource.media;
                    $cordovaMedia.play(media);

I'm new to both Cordova and to Ionic, so I'm not sure if I need to add something to the run in the app.js:

angular.module('myApp', [
    'ionic',
    'my.custom.module'
])

.run(function ($ionicPlatform, $cordovaMedia) {
    $ionicPlatform.ready(function () {
        **//add some cordova media plugin initialization code here???**
        // 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();
        }
    });
})

full stack trace:

ReferenceError: Media is not defined
    at Object.newMedia (http://localhost:8100/lib/ngCordova/dist/ng-cordova.js:1817:25)
    at Object.countdown (http://localhost:8100/js/components/timer/timer-service.js:14:53)
    at Scope.$scope.startTimer (http://localhost:8100/js/main/main-controller.js:6:30)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:18227:21
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:42490:9
    at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20089:28)
    at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20187:23)
    at HTMLButtonElement.<anonymous> (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42489:13)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:10381:10
    at Array.forEach (native)

Upvotes: 1

Views: 3603

Answers (2)

ozhanli
ozhanli

Reputation: 1496

As Jeremy stated Media is not running on browser, you should try it on real device. If you are on real device and still have problem then all steps like below:

Add platforms

ionic platform add android
ionic platform add ios

Install Apache Cordova Media Plugin

cordova plugin add cordova-plugin-media

Include ng-cordova.js or ng-cordova.min.js in your index.html file before cordova.js

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

Inject ngCordova as an Angular dependency

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

Inject both $cordovaMedia and $ionicPlatform to your controller and use Media plugin after your platform is ready

.controller('Ctrl', function($scope, $ionicPlatform, $cordovaMedia){
    $ionicPlatform.ready(function() {
        var src = ionic.Platform.isAndroid() ?
                       ? "/android_asset/www/audio/src.mp3"
                       : "audio/src.mp3";

        var src = new Media(crowdSrc, null, null, crowdCallback);
        src.play();
    })
})

I hope this helps.

Upvotes: 2

Jeremy Wilken
Jeremy Wilken

Reputation: 6976

You are using the ionic serve method to preview your app, which isn't able to run Cordova (since its just a browser, not actually a mobile environment). You'll have to try testing by running your app inside of an emulator.

Upvotes: 4

Related Questions