(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

FileChooser – Available in ionic native.

Filepath – https://github.com/hiddentao/cordova-plugin-filepath

Media Plugin – Available in ionic natvie.

Let’s install these three plugins using the command below

1

2

3

ionic plugin add http://github.com/don/cordova-filechooser.git

ionic plugin add cordova-plugin-media

ionic plugin add cordova-plugin-filepath

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

1

<button ion-button(click)="filechooser()">Click</button>

Open up home.ts and add the below code.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

import{Component}from'@angular/core';

import{NavController}from'ionic-angular';

import{FileChooser,MediaPlugin}from'ionic-native';

@Component({

selector:'page-home',

templateUrl:'home.html'

})

exportclassHomePage{

nativepath:string;

file;

constructor(publicnavCtrl:NavController){

}

filechooser(){

FileChooser.open()

.then(uri=>{

(<any>window).FilePath.resolveNativePath(uri,(result)=>{

this.nativepath=result;

this.audioplay();

},(err)=>{

alert(err);

})

})

.catch(e=>console.log(e));

}

audioplay(){

varpathalone=this.nativepath.substring(8);

this.file=newMediaPlugin(pathalone,(status)=>{

});

this.file.play();

}

}

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

1

varpathalone=this.nativepath.substring(8);

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.

1

ionic run android

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.

1

2

3

4

5

6

7

8

9

10

11

playaudio(){

this.file.play();

}

audiostop(){

this.file.stop();

}

audiopause(){

this.file.pause();

}

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.

1

this.file.release()

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.

Post navigation

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.

Ronaiza Card

How do I list the songs that are in a certain folder?

Ragu Nathan

Hi Raja,

Thank you for the awesome tutorial.

I need to display and play audio in all my pages withot interruption.Is it possible to do app like this?

For Ex. I have 3 pages called page1, page2, page3. I need to display audion player in all 3 pages. Audio continue playing even if I navigate the pages.

Thank you

saif a

cordova-plugin-filepath is for Android only. So This example will not work for IOS..??

I’m trying to fetch tags from mp3 files by using this plugin:https://github.com/aadsm/jsmediatags
but unable to do so.
I get this error:
{type: “xhr”, info: “Unexpected HTTP status 0.”, xhr: XMLHttpRequest}

Do you know of any way to fetch the tags?

Sonali Yadav

how can we run the audio files in background if android device is locked or in sleep mode

Newton Munene

Pleeeeeeeeeeeeeeeeeaaaaaaaaaaaasssssssssseeeeeeeeeee do a Music Player. please please.