Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Playing Audio In Your Android And iOS Ionic Framework App

TwitterFacebookRedditLinkedInHacker News

One of my Twitter followers recently asked me to do a post regarding audio and Ionic Framework. Being the fiddler that I am, I decided to meet this request.

Using Ionic Framework, the Apache Cordova Media plugin, and ngCordova, we are going to make a very simple application with basic media controls.

Let’s start things off by creating a fresh Ionic project with Android and iOS support:

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

Remember, if you aren’t developing on a Mac, you cannot add and build for iOS.

Even though we will be using the AngularJS extension set, ngCordova, we still need to install the base Apache Cordova plugin. Install the plugin by running the following from the root of your project:

cordova plugin add org.apache.cordova.media

With the plugin installed, lets go ahead and start setting up ngCordova. Download and copy ng-cordova.min.js into your project’s www/js directory. You’ll notice the version of ngCordova I referenced is not the latest, but instead from repository commit 9f907a65. Since ngCordova is still alpha / beta, it is constantly changing and could introduce breaking changes. This is the version I used when writing this tutorial. Even though it is older, it still accomplishes the job no problem. With the library file in place, open your index.html file and make it look similar to the following:

<!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">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">

It is important to note that ng-cordova.min.js must come before cordova.js in your script includes. Your project will not work correctly if it comes after.

One more thing must happen before we can start using the media plugin. We must inject ngCordova into the AngularJS module dependencies. Open your app.js file and make your angular.module look like the following:

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

At this point we can start using audio functionality in our application.

Let’s create a new controller like the following:

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

    $scope.play = function(src) {
        var media = new Media(src, null, null, mediaStatusCallback);
        $cordovaMedia.play(media);
    }

    var mediaStatusCallback = function(status) {
        if(status == 1) {
            $ionicLoading.show({template: 'Loading...'});
        } else {
            $ionicLoading.hide();
        }
    }

});

In the above controller you’ll notice a few things. In the $scope.play function you’ll notice that I am not loading the media like ngCordova recommends. I am instead loading the media like Apache Cordova recommends. I decided to do it this way because it gives me very easy access to the status callback. The ngCordova way returns a media status, but I found it would have been trickier to monitor.

In the status callback, you’ll notice that I show a loading notification if the status is Media.MEDIA_STARTING. When the status is anything else like running or stopped, I hide the notification. This is useful if you’re playing audio from the internet, where there could be long load times. Below is a list of all the current media statuses:

StatusValue
Media.MEDIA_NONE0
Media.MEDIA_STARTING1
Media.MEDIA_RUNNING2
Media.MEDIA_PAUSED3
Media.MEDIA_STOPPED4

So how do we actually use the $scope.play function? You can do something very simple like the following in your index.html file:

<ion-content ng-controller="ExampleController">
    <button class="button" ng-click="play('http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2013.mp3')">Play from internet</button>
</ion-content>

Please note that the MP3 in this example is just a random one I found publically on the internet.

So what happens if you don’t want to play audio from the internet? Using our same $scope.play function, lets do the following in our index.html file:

<ion-content ng-controller="ExampleController">
    <button class="button" ng-click="play('www/mp3/song.mp3')">Play from file system</button>
</ion-content>

The above snippet will try to play a song from the file system. For example, if you’re on an Android device it will try to play /storage/emulated/0/www/mp3/song.mp3 where /storage/emulated/0 is your public storage accessible from any application. On Android, if you’d like to play audio bundled with your application you would need to include /android_asset/ at the beginning of your path. For example, /android_asset/www/mp3/song.mp3 would play a song found in your Ionic www/mp3 directory.

There are plenty of other cool things you can do with the media plugin. You can find more on the subject via the official ngCordova or Apache Cordova Media documentation.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site