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="background">
    <div id="player">
        <div id="inside">
            <button id="playpause"></button><p id="elapsed">0:00</p><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>
    </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 () {
    audio.pause();
    playpause.onclick = function () { playfunc(); };
    playpause.innerHTML = "&#x25BA";
    playpause.title = "Play";
    }
    
    function playfunc () {
    audio.play();
    playpause.onclick = function () { pausefunc(); };
    playpause.innerHTML = "&#x2590&#x2590";
    playpause.title = "Pause";
    }
    
    function updateElapsed () {
    if (audio.currentTime > 60) { elapsed.innerHTML = Math.floor(audio.currentTime / 60) + ":" + getSeconds(); } else { elapsed.innerHTML = "0:" + getSeconds(); }
    
    function getSeconds () { if (audio.currentTime % 60 > 10) { return Math.floor(audio.currentTime % 60); } else { return "0" +...

CSS

div#background {
    background: #e4f1f7; /* Old browsers */
    background: -moz-linear-gradient(top, #e4f1f7 0%, #edf7f9 50%, #e4f1f7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, from(#e4f1f7), color-stop(50%,#edf7f9), to(#e4f1f7)); /* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #e4f1f7 0%,#edf7f9 50%,#e4f1f7 100%); /* Chrome10+, Safari5.1+ */
    background: -o-linear-gradient(top, #e4f1f7 0%,#edf7f9 50%,#e4f1f7 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #e4f1f7 0%,#edf7f9 50%,#e4f1f7 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1f7', endColorstr='#e4f1f7',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #e4f1f7 0%,#edf7f9 50%,#e4f1f7 100%); /* W3C */
    padding: 20px;
}

div#player /* Darker blue background div */ {
    background: #dff0f7; /* Old browsers */
    background: -moz-linear-gradient(top, #dff0f7 0%, #cedbe3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dff0f7), color-stop(100%,#cedbe3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #dff0f7 0%,#cedbe3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #dff0f7 0%,#cedbe3 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #dff0f7 0%,#cedbe3 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dff0f7', endColorstr='#cedbe3',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #dff0f7 0%,#cedbe3 100%); /* W3C */
    padding: 12px;
    border: 1px solid #D2E3EA;
    border-radius: 0.5em;
    box-shadow: inset 0 1px white;
}

div#player * /* Anything within darker blue background div */ {
    color: #72A3B1;
}

div#player *:not(#playpause) {
    font-style: italic;
}

div#player > div#inside /* Lighter blue div */ {
    background: #e3f0f6; /* Old browsers */
    background:...