Cordova - Media

Cordova media plugin is used for recording and playing audio sounds in Cordova apps.

Step 1 - Installing Media Plugin

Media plugin can be installed by running the following code in command prompt window.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media

Step 2 - Add Buttons

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

<button id = "playAudio">PLAY</button>
<button id = "pauseAudio">PAUSE</button>
<button id = "stopAudio">STOP</button>
<button id = "volumeUp">VOLUME UP</button>
<button id = "volumeDown">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("playAudio").addEventListener("click", playAudio);
document.getElementById("pauseAudio").addEventListener("click", pauseAudio);
document.getElementById("stopAudio").addEventListener("click", stopAudio);
document.getElementById("volumeUp").addEventListener("click", volumeUp);
document.getElementById("volumeDown").addEventListener("click", volumeDown);

Step 4A - Play Function

The first function that we are going to add is playAudio. We are defining myMedia outside of the function because we want to use it in functions that are going to be added later (pause, stop, volumeUp and volumeDown). This code is placed in index.js file.

var myMedia = null;
function playAudio() {
   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();
}

We can click PLAY button to start the piano music from the src path.

Step 4B - Pause and Stop Functions

The next functions that we need is pauseAudio and stopAudio.

function pauseAudio() {
   if(myMedia) {
      myMedia.pause();
   }
}

function stopAudio() {
   if(myMedia) {
      myMedia.stop(); 
   }
   myMedia = null;
}

Now we can pause or stop the piano sound by clicking PAUSE or STOP buttons.

Step 4C - Volume Functions

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

var volumeValue = 0.5;
function volumeUp() {
   if(myMedia && volumeValue < 1) {
      myMedia.setVolume(volumeValue += 0.1);
   }
}

function volumeDown() {
   if(myMedia && volumeValue > 0) {
      myMedia.setVolume(volumeValue -= 0.1);
   }
}

Once we press VOLUME UP or VOLUME DOWN we can change the volume value by 0.1.

The following table shows other methods that this plugin provides.