In this tutorial we will create simple audio player. Let's create buttons that we need in index.html.

<button id = "Audioplay">PLAY</button>

<button id = "Audiopause">PAUSE</button>

<button id = "Audiostop">STOP</button>

<button id = "Upvolume">VOLUME UP</button>

<button id = "Downvolume">VOLUME DOWN</button>

Step 3 - Add Event Listeners

Now we need to add event listeners for our buttons inside onDeviceReady function inside index.js.

document.getElementById("Audioplay").addEventListener("click", Audioplay);

document.getElementById("Audiopause").addEventListener("click", Audiopause);

document.getElementById("Audiostop").addEventListener("click", Audiostop);

document.getElementById("Upvolume").addEventListener("click", Upvolume);

document.getElementById("Downvolume").addEventListener("click", Downvolume);
 

Step 4A - Play Function

The first function that we are going to add is Audioplay. We are defining myMedia outside of the function as we want to use it in functions that will be added later. This code is placed in index.js file.

var myMedia = null;

function Audioplay () {

   var src = "/android_asset/www/audio/piano.mp3";

   if(myMedia === null) {

      myMedia = new Media(src, onSuccess, onError);

      function onSuccess() {

         console.log("playAudio Success");

      }

      function onError(error) {

         console.log("playAudio Error: " + error.code);

      }

   }

   myMedia.play();

}

When we click PLAY button the piano music will be played from the src path.

Step 4B - Pause and Stop Functions

The next functions that we need is Audiopause and Audiostop.

function Audiopause () {

   if(myMedia) {

      myMedia.pause();

   }

}

function Audiostop () {

   if(myMedia) {

      myMedia.stop();

   }

   myMedia = null;

}

Now you will be able to pause or stop the piano sound by clicking PAUSE or STOP buttons.

Step 4C - Volume Functions

To set the volume, we can use Volumeset method. This method takes parameter with values from 0 to 1. We will set starting value to 0.5.

var volumeofValue = 0.5;

function Upvolume ()
{

   if(myMedia && volumeofValue < 1) {

      myMedia.setVolume(volumeofValue += 0.1);

   }

}

function Downvolume ()
{

   if(myMedia && volumeofValue > 0) {

      myMedia.setVolume(volumeofValue -= 0.1);

   }

}

 On pressing VOLUME UP or VOLUME DOWN button, we can change the volume value by 0.1 unit. 

The following table shows other methods that this plugin provides.

Read our previous posts on Cordova: Creating first application using Cordova

Apache Cordova- Storing data through Apps