Audio Player

by XTREME104

HTML

<audio id="audio" onpause="pausefunc()" onplay="playfunc()" onended="this.pause()" ondurationchange="seekbar.min = this.startTime; seekbar.max = this.startTime + this.duration" ontimeupdate="seekbar.value = this.currentTime; updateElapsed()">
    <source src="http://mediaelementjs.com//media/AirReview-Landmarks-02-ChasingCorporate.mp3" type="audio/mp3"/>
</audio>
<div id="player">
        <button id="playpause"></button><div><input type="range" id="seekbar" onchange="audio.currentTime = this.value" step="any"></input></div><!--<div><input type="range" id="volumebar" onchange="audio.volume = this.value" step="any" min="0" max="1" value="1"</input></div>-->
   </div>

<script>
    var audio = document.getElementById("audio");
    var playpause = document.getElementById("playpause");
    var elapsed = document.getElementById("elapsed");
    var seekbar = document.getElementById("seekbar");
    var volumebar = document.getElementById("volumebar");
    
    playpause.innerHTML = "&#x25BA";
    playpause.title = "Play";
    
    playpause.onclick = function () { audio.play(); };
    playpause.innerHTML = "&#x25BA";
    playpause.title = "Play";
    
    seekbar.value = audio.currentTime;
    
    function pausefunc () {
    playpause.onclick = function () { audio.play(); };
    playpause.innerHTML = "&#x25BA";
    playpause.title = "Play";
    }
    
    function playfunc () {
    playpause.onclick = function () { audio.pause(); };
    playpause.innerHTML = "&#x2590&#x2590";
    playpause.title = "Pause";
    }
</script>

CSS

body {
    background: #e6e6e6;
    padding: 20px;
}

div#player {
    background: #333333; /* Old browsers */
    background: -moz-linear-gradient(top, #222222 0%, #333333 50%,  #333333 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(50%,#333333),  color-stop(100%,#333333)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #444444 0%, #666666 47%, #333333 53%, #333333 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #222222 0%,#333333 50%,#333333 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #222222 0%,#333333 50%,#333333 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dff0f7', endColorstr='#cedbe3',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #222222 0%,#333333 50%,#333333 100%); /* W3C */
    border-radius: 0.4em;
    width: 200px;
}

div#player * /* Anything within the player */ {
    color: #dddddd;
}

div#player *:not([type="range"]) /* Anything inside the player except the sliders */ {
    background: transparent; /* Old browsers */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3f0f6', endColorstr='#deebf1',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #e3f0f6 0%,#deebf1 100%); /* W3C */
    height: 30px;
    width: 30px;
    border: 1px solid #333333;
    box-shadow: inset 1px 1px 0 #666666;
    display: inline;
}

div#player *:not([type="range"]):first-child /* First element needs the left border radius */ {
    border-top-left-radius: 0.4em;
    border-bottom-left-radius: 0.4em;
}

button#playpause { 
    letter-spacing: -3px;
}

div#player *:not([type="range"]):last-child /* Last element needs the right border radius */ {
    border-top-right-radius: 0.4em;
    border-bottom-right-radius: 0.4em;
}

div#player div {
    padding:  4px 8px 5px 8px;
}

p#elapsed {
    padding:  7px 8px 6px 8px;
    font-size:...