Simple Ionic music player with HTML 5

8th August , 2018

There are several audio plugins available in ionic. Trying with HTML5 audio APIs, this article will explain how to create a very simple and plain ionic music player app with HTML5.

As we proceed to this tutorial, it is assumed that npm, node & cordova are already installed.

If you haven’t install ionic, you can install by using below command

npm install -g cordova ionic

Once you installed ionic, you can start a fresh app with below command

ionic start Ionic Music Player tabs

There are other types of ionic apps you can start with. i.e., blank, tabs, side menu. If you want more clarification on this you can ready Ionic Official documentation.

Now, you completed the initial app setup. To check in the browser with “ionic serve” command. This will open in any of your favorite browsers by using inspect element, you can view as mobile (Chrome and Firefox).

Creating a Player provider:

I have created a provider to set up my basic HTML 5 audio functions like Play, Pause and Stop.

ionic generate provider player

This will create a player folder with a basic class file under providers folder. If you don’t have any providers, don’t worry ionic will create a providers folder also. Along with this, above command will add provider in app.module.ts.

Now you have done setting up the provider. Now, we can add our code in the player provider.

My Player provider code looks like below

Create a new Object for music:

audioObj(song) {

return new Audio(song);



I am expecting a parameter called song (This we can send from ionic page)

play(song) {

if(this.url != undefined && this.url != song){ = 0;

this.currentTime = 0;

this.url = song;

} else {

this.url = song;

}; = this.audioObj(song);

if(this.currentTime > 0){ = this.currentTime;


this.promise = new Promise((resolve,reject) => {‘playing’, () => {



});‘error’, () => {




return this.promise;



pause() {

this.currentTime =;;



stop() {

this.currentTime = 0; = 0;;


To find Duration and current time:

duration() {



currenttime() {



To get streaming information:




Once your player provider is loaded with basic functionalities, you can start implementing your app.

You can clone my basic project for Music Player here.

Happy coding.

All Comments

"Great content", thanks for sharing.

coque iphone 10

28th October , 2019 09:43:17 AM

"Great content", thanks for sharing.

Smart Touch Technologies

21st July , 2019 09:16:42 PM

"Great content", thanks for sharing.


1st May , 2019 10:03:42 AM

"Great content", thanks for sharing.


17th April , 2019 04:59:54 AM

"Great content", thanks for sharing.


23rd January , 2019 02:04:23 AM

"Great content", thanks for sharing.


3rd September , 2018 05:13:26 PM

"Great content", thanks for sharing.


3rd September , 2018 05:13:01 PM

See all comments