Cordova Media

The Cordova media plug-in is used to record and play audio sounds in the Cordova application.

Step 1 - Install the media plug-in

You can install the Media plug-in by running the following code in the command prompt window.

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

Step 2 - Add a button

In this tutorial, we'll create a simple audio player. /b10> Let's .html button we need in index.

<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 an event listener

Now we need to .js event listener to our buttons in the onDeviceReady function within the index code.

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 we're going to add is playAudio. /b10> We define myMedia outside of the function because we want to use it in functions that we add later (pause, stop, volumeUp, and volumeDown). /b11> This code is placed in the 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 start piano music from the src path by clicking the Play button.

Step 4B - Pause and stop functions

The next features we need are 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 tone by clicking the Pause or Stop button.

Step 4C - Volume function

To set the volume, we can use the setVolume method. /b10> This method takes parameters with values from 0 to 1. /b11> We'll set the 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 press 0.1 to change the volume value.

The following table shows other methods provided by this plug-in.