Audio- A Custom Player with Designed Control Box

Written by @m_k_amin 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 https://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='https://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>

Example:

About @m_k_amin

This user is pending a biography.

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300