Question

我正在尝试学习如何使用CSS3音频播放器site。

事件虽然我的代码是来自网站的代码演示相同，不知何故我不能改变音频播放器上的音轨位置。

这是我的CodePen

有正确的例子：CodePen

以下是代码：

JS：

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";
    }
}

CSS：

#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;
    }

HTML：

<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>

我有几个问题：

我的播放头在时间轴结束后移动
轨道位置不像正确的示例那样工作

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

Answer 1

好的，当我从我的CSS position:relative中删除margin-left, margin-right: auto和#audioplayer时，它在某种程度上有效。

改变音频播放器的音轨位置

1 个答案: