Javascript HTML音频播放器时间轴功能添加

我正在尝试添加HTML音频播放器。我在那里应用了一个代码播放暂停工作。我需要在这里添加时间轴功能。但我不知道怎么做。这里还有另一个问题，我不知道如何在同一个按钮中应用播放暂停。请帮帮我。下面是我的代码

#音频播放器{
宽度：480px；
高度：60px；
保证金：50px自动；
边框：实心；
}
#按钮{
高度：60px；
宽度：60px；
边界：无；
背景大小：50%50%；
背景重复：无重复；
背景位置：中心；
浮动：左；
大纲：无；
}
.play、.play:hover、.pause:focus{background:url（'https://img.pranavc.in/20') ;}
.pause、.pause:hover、.play:focus{background:url（'https://img.pranavc.in/30') ;}
#时间线{
宽度：400px；
高度：20px；
边缘顶部：20px；
浮动：左；
边界半径：15px；
背景：rgba（0,0,0,3）；
}
#花花公子{
宽度：18px；
高度：18px；
边界半径：50%；
页边顶部：1px；
背景：rgba（0,0,0,1）；
}

---

您需要在页面上添加Javascript代码才能使用此功能。您可以从该代码中提取所需的代码（解释得很好）

---

我使用javascript，并更改dom和css。
您需要学习音频事件和属性


var audio=document.getElementById（“播放器”）；
var btn=document.getElementById（“pButton”）；
btn.addEventListener（“单击”，函数（）{
如果（音频暂停）{
音频播放（）；
btn.classList.remove（“暂停”）；
btn.classList.add（“播放”）；
}否则{
audio.pause（）；
btn.classList.remove（“播放”）；
btn.classList.add（“暂停”）；
}
});
var playhead=document.getElementById（“playhead”）；audio.addEventListener（“timeupdate”，function（）{var duration=this.duration；var currentTime=this.currentTime；var percentage=（currentTime/duration）*100；playhead.style.left=percentage*4+'px'；}）
#音频播放器{
位置：相对位置；
宽度：480px；
高度：60px；
保证金：50px自动；
边框：实心；
}
#按钮{
高度：60px；
宽度：60px；
边界：无；
浮动：左；
大纲：无；
}
#暂停{
背景：url（'https://img.pranavc.in/20")不重复;；
背景尺寸：56px；
背景位置：中心；
}
#按钮，播放{
背景：url（'https://img.pranavc.in/30")不重复;；
背景尺寸：56px；
背景位置：中心；
}
#时间线{
宽度：400px；
高度：20px；
边缘顶部：20px；
浮动：左；
边界半径：15px；
背景：rgba（0,0,0,3）；
位置：相对位置；
}
#花花公子{
宽度：18px；
高度：18px；
边界半径：50%；
页边顶部：1px；
背景：rgba（0,0,0,1）；
位置：绝对位置；
左：0px；
}

我知道这个解决方案。但我需要应用设计，所以我用了不同的方法。谢谢你的回答。谢谢你的回答。我应用了您建议页面中的代码。但在我这边不行。谢谢这是否在播放音乐？试试看，但你必须使用javascript代码，并更改html dom。如果你想播放音乐，你必须单击播放按钮，如果你想在第一时间播放音乐，请更改代码谢谢你的回答。这里我需要更多的工作，只是在播放时增加时间线，在暂停时关闭。var playhead=document.getElementById（“playhead”）；audio.addEventListener（“timeupdate”，function（）{var duration=this.duration；var currentTime=this.currentTime；var percentage=（currentTime/duration）*100；playhead.style.left=percentage*4+'px'；}）；
<audio controls>
    <source src="Link.mp3" type="audio/mpeg">
</audio>