If you are building an app for a media website which has audio or video files to play, then you have to include the media player that will play all the multimedia files. Also it will be able to record the videos using native camera.

The media plugin in Cordova allow you to record and play audio sounds in apps built using Cordova.

Step 1 - Installing Media Plugin

Open command prompt window and run the following code to install the Media plugin:

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 = "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.

Method

Details

getCurrentPosition

Returns current position of an audio.

getDuration

Returns duration of an audio.

play

Used for starting or resuming audio.

pause

Used for pausing audio.

release

Releases the underlying operating system's audio resources.

seekTo

Used for changing position of an audio.

setVolume

Used for setting volume for audio.

startRecord

Start recording an audio file.

stopRecord

Stop recording an audio file.

stop

Stop playing an audio file.

 

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

Apache Cordova- Storing data through Apps

  Modified On Mar-19-2018 03:41:46 AM

Leave Comment