It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Please check your email for instructions to activate your account.
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!
<!-- 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>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!