Ionic 2 – Music app

Hi Friends,

In this post let’s see how to create a simple mobile app that would open an audio file and play it using Ionic 2 framework and some cordova plugins.

Let’s begin.

A screencast of this post.

 

The code for this post is available – here.

Open up a new Ionic 2 app using the below command.

(I would highly recommend you to install the latest version of Ionic CLI as they have made a lot of new updates).

We will be using three cordova plugins in our app. They are

  1. FileChooser – Available in ionic native.
  2. Filepath – https://github.com/hiddentao/cordova-plugin-filepath
  3. Media Plugin – Available in ionic natvie.

Let’s install these three plugins using the command below

Now open up home.html and add the below code between the ion-content tags.

Open up home.ts and add the below code.

Let’s break this down.

Filechooser:

This plugin is used to open a file from our phone’s filesystem. It returns the URI of the file.

Filepath:

This plugin is used to convert the URI into a native path corresponding to the actual location of the file in the phone’s filesystem. In short; it converts the uri of format content://<somevalue> into file:///<pathtoaudiofile>

MediaPlugin:

   This plugin is the one that actually plays the file. It creates a Media object which then comes with various inbuilt functions.

If you notice there is a line like the one shown below

This line is used to trim the filepath and get rid of the file:/// prefix thereby providing a clear path for the Media plugin.

Now just run the app using the below command.

If everything goes fine you would get a app that has a button. Just by clicking that button you could choose a file from your phone and it would start playing.

Let’s spice up things a bit more and add a few more functionalities to our app like pause, stop.

Open up home.html and add the below code in between the <ion-content> tags.

This code would create a fab button on the center which upon clicking will give you four more fabs for opening a file, playing, pausing and stopping respectively.

Let’s write some functions. Go back to home.ts file and add the below code.

As the name suggests you now have play, stop and pause functionalities in your app.

Now run the app. If everything goes fine then you can see a wonderful app that enables you to open the music file of your choice and play.

Point to notice:

Once playback is done kindly use the below line of code to release the file.

If the file is not released then it would be held up by your app and other apps won’t be able to access it.

You could add more features to this app like playlists.. Just by adding the filepaths of various audio files and saving it so that it could be played one by one upon successful completion of the playback of one file.

You could also add a seekbar to our app using the <ion-range> component which again is a wonderful tool to use.

Hope this helped you guys. Thanks for reading. Kindly share it with someone else and help them too.

Peace.:)

 

Liked it? Take a second to support admin on Patreon!
  • az26

    thank you! love your tutorials!!!

  • Karen Di Stefano

    Thank you!

  • Vivek Gautam

    gdwork

  • Vivek Gautam

    i used ion-range but how to show change in range with GetCurrentPosition function.?
    there is problem in getting duration also-: cannot find name position

  • Robin Thomas

    Hi Raja,

    This was a great tutorial. Can you help me in adding the next song and previous song functionality. I am new to ionic and javascript. I can’t seem to fetch the uri of the next and previous files in a folder.

    Thanks.