Audio- Seekbar for the Music Player

Written by @m_k_amin 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.

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

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

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