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
The defaults are not always interesting. The HTML5 music player has default buttons and seek bar, but its shape may not be suitable for your site. The following code shows how you can made your own seek bar for the HTML5 audio element. There exist a robust connection between the element default seek bar and our made one; when you change one of them, it will be applied to the other one. Note that some browsers may not support 'range' input type and just show a textbox as the seek bar.
<!-- this script is provided by https://www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<audio id="aud" controls autoplay
preload="metadata" onloadedmetadata="mDur()" ontimeupdate="mPlay()">
<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><br><br>
<input id="dur" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet()" style="width: 248px">
<script>
var aud= document.getElementById('aud')
var dur= document.getElementById('dur')
function mDur(){dur.max= aud.duration}
function mPlay(){dur.value=aud.currentTime}
function mSet(){aud.currentTime=dur.value}
</script>
<div style="text-align: left"><br><font face="Tahoma"><br><a target="_blank" href="https://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!