更改音频播放器的轨道位置

Posted 2023-02-19

【中文标题】更改音频播放器的轨道位置

【英文标题】：Changing the track position of audio player

【发布时间】：2014-10-08 16:50:39

【问题描述】：

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

尽管我的代码与站点演示中的代码相同，但我无法更改音频播放器上的轨道位置。

这是我的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')
.pausebackground: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>

我有几个问题：

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

有人知道我在哪里解决问题吗？感谢您的帮助。

【参考方案1】：

好的，当我从我的 CSS #audioplayer 中删除 position:relative 和 margin-left, margin-right: auto 时，它以某种方式工作。