音乐播放进度条

#progressBar {
    position: absolute;
    left: 60px;
    top: 600px;
    width: 1009px;
    height: 10px;
    background-size: 1009px 10px;
    background-image: url(pg_bk.gif);
}


#pgIcon {
    position: absolute;
    height: 10px;
    width: 0px;
}

 

<div id="progressBar">
    <img src="pg.png" id="pgIcon">
</div>

 

var audio = new Audio();
document.body.appendChild(audio);

if (audio != null){
    audio.src = "allofMe.mp3";
    audio.autoplay = true;
    // audio.controls = true;
    setInterval(function () {
        document.getElementById("pgIcon").style.width = Math.floor(1009 * audio.currentTime / audio.duration) + "px";
    }, 1000);
}

 

实现了一个进度条： 长度固定为1009px的黑色背景， 蓝色进度条以1秒钟为单位往前走。

Math.floor(1009 * audio.currentTime / audio.duration)  是1秒钟走的刻度。