Audio- A Custom Player with Designed Control Box
Written by 6 June 2013
HTML5 default audio player box has not complete options and buttons while it supports them in general; so the developers themselves must make a Control Box for their desired audio player. In fact, if you are not satisfied with the default control box, you can make your own! This code, which uses both HTML5 and JavaScript, is an example of control box with desired buttons for the HTML5 audio element. It has six buttons in order to play, pause, volume up, volume down, playback speed (playback rate) up and down. There are also some textboxes for showing the status of each option. Note that the volume and playback rate can vary in a fixed predefined range, but the step of changing is up to you. Enjoy!
Code Snippet:
<!-- this script is provided by www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<br>
<audio id="aud" autoplay>
<source src="http://www.html5freecode.com/files/skylander.ogg" type="audio/ogg">
<source src="http://www.html5freecode.com/files/skylander.mp3" type="audio/mpeg">
</audio>
<div style="width: 298px; border-style: double; border-width: medium; padding: 1px 4px; text-align: center; height: 144px;">
<span style="font-size: 16pt; color: #262AD5"><strong>Player Control Box</strong></span><strong><br style="font-size: 16pt; color: #262AD5">
</strong>
<br>
<button onclick="Ply('play')" style="width: 90px">Play</button>
<button onclick="Ply('pause')" style="width: 90px">Pause</button>
<input name="txt1" id="ply" disabled="disabled" style="height: 23px; width: 75px; text-align:center; font-style: italic" value="Playing"><br>
<button onclick="Vol('up')" style="width: 90px">Volume +</button>
<button onclick="Vol('down')" style="width: 90px">Volume -</button>
<input name="txt2" id="vol" disabled="disabled" type="text" style="height: 23px; width: 75px; text-align:center; font-style: italic" value="100"><br>
<button onclick="Rate('up')" style="width: 90px">Speed +</button>
<button onclick="Rate('down')" style="width: 90px">Speed -</button>
<input name="txt3" id="rt" disabled="disabled" type="text" style="height: 23px; width: 75px; text-align:center; font-style: italic" value="100"><br>
</div>
<script>
function Ply(str){
if (str=="play"){
document.getElementById('aud').play()
document.getElementById('ply').value = "Playing"
}
else{
document.getElementById('aud').pause()
document.getElementById('ply').value = "Paused"
}
}
function Vol(str){
var vl= document.getElementById('vol').value
if (str=="up" && vl<100){
document.getElementById('aud').volume += 0.2
document.getElementById('vol').value = parseInt(vl) + 20
}
if (str=="down" && vl>0){
document.getElementById('aud').volume -= 0.2
document.getElementById('vol').value = parseInt(vl) - 20
}
}
function Rate(str){
var rt= document.getElementById('rt').value
if (str=="up"){
document.getElementById('aud').playbackRate += 0.1
document.getElementById('rt').value = parseInt(rt) + 10
}
if (str=="down" && rt>50){
document.getElementById('aud').playbackRate -= 0.1
document.getElementById('rt').value = parseInt(rt) - 10
}
}
</script>
<div style="text-align: left"><br><font face="Tahoma"><br><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div><a target='_blank' href='www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!