$(function() { var $aud = $("#myAud"), $pp = $('#waktu'), $vol = $('#volume'), $bar = $("#progressbar"), AUDIO= $aud[0]; AUDIO.volume = 0.75; AUDIO.addEventListener("timeupdate", progress, false); function getTime(t) { var m=~~(t/60), s=~~(t % 60); return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s); } function progress() { $bar.slider('value', ~~(100/AUDIO.duration*AUDIO.currentTime)); $pp.text(getTime(AUDIO.currentTime)); } $vol.slider( { value : AUDIO.volume*100, slide : function(ev, ui) { $vol.css({background:"hsla(180,"+ui.value+"%,50%,1)"}); AUDIO.volume = ui.value/100; } }); $bar.slider( { value : AUDIO.currentTime, slide : function(ev, ui) { AUDIO.currentTime = AUDIO.duration/100*ui.value; } }); $pp.click(function() { return AUDIO[AUDIO.paused?'play':'pause'](); }); });
<div class="container" align="center"> <div class="row"> <div class="audioku" align="center"> <audio id="myAud" > <source src="http://sahud.mb.student.pens.ac.id/audio/jason%20mraz%20-%20luck.mp3"> </audio> <br /> <div id="progressbar"></div><br> <div class="row"></div> <button type="button" class="btn btn-info btn-rounded" onclick="document.getElementById('myAud').play()"><i class="fa fa-play"></i> </button> <button type="button" class="btn btn-info btn-rounded" onclick="document.getElementById('myAud').pause()"><i class="fa fa-pause"></i> </button> <button type="button" class="btn btn-info btn-rounded" onclick="document.getElementById('myAud').currentTime=0"> <i class="fa fa-stop"></i></button> <button type="button" class="btn btn-info" id="waktu">00:00</button> <div id="volume"></div><br> </div> </div> </div>
.audioku{ position:relative; margin:100px auto; padding:20px 20px; width:450px; font-family:"Times New Roman", Times, serif; background:#333333 } #volume{ background:#CCCCCC; margin:0 0 5px 5px; width:150px; display:inline-block; } #waktu{ background:#CCCCCC; margin:0 0 5px 5px; width:50px; display:inline-block; } #progressbar{ background: #999999 } .btn-rounded{ background: #CCCCCC; width:50px; height: 50; text-align:center; font-size:15px; border: #666666 solid 5px; }