Css 更改音频播放器的曲目位置

下面我将学习如何使用CSS3音频播放器

虽然我的代码与网站演示的代码相同，但不知何故，我无法更改音频播放器上的曲目位置

这是我的

有一个正确的例子：

代码如下：

JS:

HTML:

我有两个问题：

我的playhead在时间线结束后移动

轨迹位置并不像正确示例中那样工作

---

有人知道我在哪里出了问题吗？谢谢你的帮助。

好的，当我从我的CSS

\audioplayer

中删除

位置：相对

和

左边距，右边距：自动

时，它不知怎么起作用了

var music = document.getElementById('music');    
var duration;        
var pButton = document.getElementById('pButton');    
var playHead = document.getElementById('playHead');    
var timeline = document.getElementById('timeline');    
var timelineWidth = timeline.offsetWidth - playHead.offsetWidth;    
music.addEventListener("canplaythrough", function(){
    duration = music.duration;},false);

//play and pause
function play(){
    if(music.paused){
        music.play();
        pButton.className = "";
        pButton.className = "pause";
    }else{
        music.pause();
        pButton.className = "";
        pButton.className = "play"; 
         }
} 

//timeupdate  
music.addEventListener("timeupdate", timeUpdate, false);

function timeUpdate(){
    var playPercent = timelineWidth * (music.currentTime / duration);
    playHead.style.marginLeft = playPercent + "%";
}

//clickable dragable

timeline.addEventListener("click", function(event){
    movePlayHead(event);
    music.currentTime = duration * clickPercent(event);
    }, false);

function clickPercent(e){
    return (event.pageX - timeline.offsetLeft) / timelineWidth;
}

playHead.addEventListener("mousedown", mouseDown, false);
window.addEventListener("mouseup",mouseUp,false);

var onPlayHead = false;

function mouseDown(){
    onPlayHead = true;
    window.addEventListener("mousemove", movePlayHead, true);
    music.removeEventListener("timeupdate", timeUpdate, false);
}

function mouseUp(){
    if(onPlayHead == true){
        window.removeEventListener("mousemove", movePlayHead, true);
        music.currentTime = duration * clickPercent();
        music.addEventListener("timeupdate",timeUpdate,false);
    }
}

function movePlayHead(e){
    var newMargLeft = event.pageX - timeline.offsetLeft;
    if(newMargLeft >= 0 && newMargLeft <= timelineWidth){
        playHead.style.marginLeft = newMargLeft + "px";
    } 
    if(newMargLeft < 0 ){
        playHead.style.marginLeft = "0px";
    }
    if(newMargLeft > timelineWidth){
        playHead.style.marginLeft = timelineWidth + "px";
    }
}

#audioPlayer {
    width:600px;
    height:100px;
    border:3px dashed black;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    top:10px;    
}

#pButton {
    position:absolute;
    left:30px;
    width:50px;
    height:50px;
    border:none;
    top:25px;
    background-repeat:none;
    background-size:100% 100%;
    }


.play {background:url('http://www.alexkatz.me/codepen/images/play.png')}
.pause{background:url('http://www.alexkatz.me/codepen/images/pause.png')} 


#timeline {
    position:absolute;
    left:100px;
    width:450px;
    height:20px;
    border:none;
    background-color:#B0B0B0 ;
    top:40px;
    border-radius:18px;
    float: left;
    }

#playHead {

    width:20px;
    height: 20px;
    border-radius:50%;
    background-color:black;
    } 

<audio id="music" preload="true">
    <source src="http://www.alexkatz.me/codepen/music/interlude.mp3" type="audio/mpeg">
</audio>


<div id="audioPlayer">
    <button id="pButton" class="play" onclick="play()"></button>
    <div id="timeline">
        <div id="playHead"></div>
    </div>
</div>