Playing Audio Feedback In Ionic Apps Using Native Audio Plugin

There are times when you to play an audio file when something happens in your app. Be it a new message arriving or be it countdown ending, in this tutorial we will take a look at how you can play a short audio file in your Ionic app with cordova.

We will be creating a basic app in Ionic that will play an audio file when a button is clicked. A thing to note here is that the audio file that we will be playing will be inside our app and not played from the user’s file system. Here you have to be careful and supply only an audio file that you have the right to use, be aware of copyright laws. Also, keep in mind that as we are adding the audio file to our app, the size of our app will increase as well. With that in mind let’s get started.

Step 1)

We will start off by creating a new Ionic app with the blank templet. We do that by running the following command.

Step 2)

Note here that I am also adding the Ionic Native wrapper for the plugin as well. After adding the plugin and the native wrapper we will need to add the plugin to the app.module.ts file as follows.

app/app.module.ts

1

2

3

4

5

6

7

8

9

10

11

12

import{NativeAudio}from'@ionic-native/native-audio';

...

@NgModule({

...

providers:[

...

NativeAudio

...

]

...

})

exportclassAppModule{}

Step 3)

Before we code anything let’s first place the audio file that we want to use in our app in the proper place. Let’s say we have an audio file with the name ding.mp3 (because it makes a ding sound). Place it inside the app\assets\audio folder. You will need to create the audio.

Step 4)

Now we will start to code our app. We will need to create a button, so open up src\pages\home\home.html and code it as follows.

src\pages\home\home.html

1

2

3

4

5

6

7

8

9

10

11

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button(click)="play()">play</button>

</ion-content>

Here we have a button which when clicked will execute the play() function in our component.

Step 5)

It’s now time to code up our component. Open up src\pages\home\home.ts and code it as follows.

Here we are first importing the NativeAudio class and injecting it in the constructor. Inside the constructor we are preloading the audio by using this.nativeAudio.preloadSimple(). Here we are passing two arguments the first is an id with which we will reference the audio file, which can be anything you want. The second argument is the path to the audio file.

Note here that we are preloading the sample inside the platform.ready() function.

Next, we have our play() function, which plays the audio file. We are playing the audio file by using nativeAudio.play() and passing the id that we created when we preloaded the audio.

Here I am preloading the audio file in the constructor, but you can use any of the Ionic Life Cycle events for this as well.

Step 6)

As we are using Native plugins, this will not work in the browser. We will need to add a platform to our app and then run our app. We can add Android and iOS platforms to our app with the following commands.

1

2

ionic cordova platform add android

ionic cordova platform add ios

Now you can test your app on a connected device which has developer mode enabled by running the following command.

1

2

ionic cordova run android-lc

ionic cordova run ios-lc

Conclusion

Giving use a short audio feedback on some activity that has occurred is a great way to increase use engagement. I showed you how to do a similar thing with vibration in my previous tutorial. Make sure that you do not go overboard with playing audio files on every tap of each button and reserve this for important activities.

Download Code:

Code Will Be Sent Via Email

Your Name (required)

Your Email (required)

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @uncutAcademy