---
title: "Cordova - Media"  
description: "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 th"  
author: "Anonymous User"  
published: 2017-05-01  
updated: 2018-03-19  
canonical: https://www.mindstick.com/blog/11369/cordova-media  
category: "apache cordova"  
tags: ["mobile development", "apache", "cordova"]  
reading_time: 3 minutes  

---

# Cordova - Media

If you are building an app for a [media website](https://answers.mindstick.com/qa/37740/is-there-any-indian-social-media-website-like-facebook) which has audio or [video files](https://answers.mindstick.com/qa/94829/my-android-doesn-t-open-video-files-what-should-i-do) 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](https://answers.mindstick.com/qa/51716/how-to-make-bootable-pendrive-using-cmd-windows-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](https://www.mindstick.com/forum/159117/how-do-you-handle-events-using-jquery-and-attach-event-listeners-to-elements)**

Now we need to [add event](https://answers.mindstick.com/qa/93763/how-to-add-event-handlers-on-html-elements-by-javascript) 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](https://www.mindstick.com/forum/212/can-be-declare-a-static-function-as-virtual) 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](https://www.mindstick.com/blog/450/parameter-class-in-c-sharp) 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](https://www.mindstick.com/articles/229069/operating-system-development)'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](https://www.mindstick.com/blog/11353/creating-first-application-using-cordova)**

[**Apache Cordova- Storing data through Apps**](https://www.mindstick.com/blog/11354/apache-cordova-storing-data-through-apps)\

---

Original Source: https://www.mindstick.com/blog/11369/cordova-media

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.