How To Add Sound Effects To Your Ionic App With Native Audio

6 September 2015Ionic, Cordova, HTML5 Audio, Web Audio API, Native Audio

If you want to play sound effects in your Ionic app, you have the choice between using HTML5 Audio, Web Audio API or Cordova plugins.

In this tutorial we'll have a look at how to use the Cordova Native Audio plugin to play sound effects and after that I'll explain why you should use Native Audio over HTML5 Audio.

###Installation

Let's start by adding the Native Audio plugin to our Ionic project.

$ cordova plugin add cordova-plugin-nativeaudio

The Native Audio plugin is supported by ngCordova, so let's install that.

$ bower install ngCordova --save

In index.html we need to reference the ngCordova JavaScript file, after the Ionic bundle and before the Cordova script.

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

In app.js we'll add ngCordova as a dependency to our app module.

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

###Let's play some sound! If you have a look in the directory plugins/cordova-plugin-nativeaudio/examples, you'll find a drumpad example. We are going to use the same example and build it out as an Ionic app.

In index.html we'll add 4 buttons for playing the sounds:

<body ng-app="starter">
	<ion-pane>
	  <ion-header-bar>
	    <h1 class="title">Native Audio</h1>
	  </ion-header-bar>
	  <ion-content ng-controller="SoundController as vm">
        <p><button ng-click="vm.play('bass')" class="button icon-left ion-play button-assertive">Play Bass</button></p>
        <p><button ng-click="vm.play('hi-hat')" class="button icon-left ion-play button-balanced">Play Hi-Hat</button></p>
        <p><button ng-click="vm.play('snare')" class="button icon-left ion-play button-energized">Play Snare</button></p>
        <p><button ng-click="vm.play('bongo')" class="button icon-left ion-play button-positive">Play Bongo</button></p>
	  </ion-content>
	</ion-pane>
</body>

In our SoundController we'll load the audio files and add the methods to play the sounds:

angular.module('starter').controller('SoundController', ['$ionicPlatform', '$timeout',  '$cordovaNativeAudio', SoundController]);

function SoundController($ionicPlatform, $timeout, $cordovaNativeAudio) {
	var vm = this;

	$ionicPlatform.ready(function() {

		// all calls to $cordovaNativeAudio return promises

		$cordovaNativeAudio.preloadSimple('snare', 'audio/snare.mp3');
		$cordovaNativeAudio.preloadSimple('hi-hat', 'audio/highhat.mp3');
		$cordovaNativeAudio.preloadSimple('bass', 'audio/bass.mp3');
		$cordovaNativeAudio.preloadSimple('bongo', 'audio/bongo.mp3');
	});

	vm.play = function(sound) {
		$cordovaNativeAudio.play(sound);
	};

	return vm;
}

Note: All calls to $cordovaNativeAudio return promises, so you should check if errors have occurred on all calls. I've left them out of the example above to keep it easy to follow, but check the source code for a complete example.

Don't forget to add the audio files in the audio directory and reference SoundController in index.html.

Now, if you run the app on an Android or iOS device you should hear the sounds playing as expected.

###Caveats I'm only using preloadSimple in this example, but there is also a preloadComplex function that you need to use if you want to loop the sounds. However, it doesn't seem to load the audio files correctly on iOS and I'm not sure what the problem is, but I'll put an update here once I've figured out how to make it work.

Also on iOS, the volume of the sounds is controlled by the setting for the Ringer and not the Volume.

And one more thing: I don't think you can test this on the simulators, you'll need actual devices.

So, now we know how to play sounds with the Native Audio plugin, keep reading if you want to know why you shouldn't use HTML5 Audio.

###What is the difference between HTML5 Audio and Web Audio API? You can use HTML5 Audio for simple playback of sounds. HTML5 Audio is supported by all browsers.

The Web Audio API gives you more control over the playback of audio.

The Web Audio API provides a powerful and versatile system for controlling audio on the Web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.

Web Audio API is still in Working Draft, but is supported by the latest versions of most browsers.

###Problems with HTML5 Audio So in the case of playing our simple sound effects we should be able to just use HTML5 Audio, right?

Well, I tried using it and it seemed to work fine on iOS, but there was no sound on Android (tested on 4.2). I had to add Crosswalk, instead of the default WebView on Android, to hear the sound.

I also tried looping the sound and that gave a very inconsistent playback.

Another annoying thing was that if I was playing music in the background from another app and my app would play the sound effect with HTML5 audio, it would completely stop the background music.

So, I would not recommend HTML5 Audio for Ionic apps.

###What about Web Audio API? To be honest, after I tried HTML5 Audio, I wasn't very hopeful Web Audio API would give better results, so I didn't even try it. If you'd prefer to use that instead of a Cordova plugin, here is a great tutorial for it.