Adjust the volume of media using JavaScript in PhoneGap
In our previous section, we made our own control buttons using JavaScript. In this section, we will learn how we can adjust the volume using JavaScript in PhoneGap. We will create a volume slider that will control the volume of our media. The volume is the property of our player, which can be easily controlled through the user interface.
These are the following steps used to create a volume slider in PhoneGap:
1) Create index2.html file
We will create another html file index2.html. This file will contain the same code as present in the index.html file. We will make changes in this file so that our index.html file remains unchanged.
2) Create an input tag
Now, we will create slider in user interface using <input></input> tag and set type to range. We will also give an Id to it. We will set the maximum, and minimum value and set the value of step and value.
3) Grab the volume slider
Now, we will grab the volume slider using JQuery notation. We will also use an event slide stop to call the anonymous function. We will get the slider using the document.getElementById. We will set the volume to the console using console.log() and the player volume in the following way:
Complete Project
Output:
