Html Codes: Audio- A Custom Player with Designed Control Box

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!

<!-- 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>

If you don't know how to use this code or need more information Click here!


	You can leave comments once you sign in/up.

HTML5 Best Codes

Html Codes: Audio- A Custom Player with Designed Control Box

You can leave comments once you sign in/up.

Review

Links