带有进度条和标签的音频播放器

Question

我需要使用HTML/CSS和JS制作一个音频播放器。玩家应该是简单的，有播放按钮和进度条。但是，我需要实现一种用户可以在音频文件(进度条上)添加标记的方法。有点像一个来自SoundCloud的玩家。在指定的时间，条形上有一条很小的线，当你将它悬停时，弹出窗口会显示一些信息。

使用HTML5 5的<audio></audio>标记可以使用JavaScript获得毫秒表示吗？

或者最好的方法是创建一个定制的音频播放器？

编辑

我遵循这个示例，-> http://alexkatz.me/posts/building-a-custom-html5-audio-player-with-javascript/

还有一个函数，我正在尝试编辑。所以当我这么做的时候

function moveplayhead(event)
{
    var newMargLeft = event.clientX - getPosition(timeline);
    console.log(newMargLeft);
    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";
    }
}

我得到控制台的秒数。我如何放置小的红色标签(例如)来标记这个区域。然后添加一个弹出窗口..。

Answer 1

您应该能够在您开发的音频播放器上添加一条进行线，其逻辑步骤如下：

• 创建音频播放器函数(javascript)
• 创建一个计时器函数(javascript)
• 指定要“拔出”触发器的空隙，该触发器将指示移动进度线。(javascript)
• 创建过渡滑动。(Javascript或CSS)
• 使用z索引创建堆叠层(这样您就可以将音频播放器放在一个层上，而在音频播放器之上的一层上有一条进展线。)- (CSS)

由于每个步骤之间的交互可能需要相对较快的工作速度，所以您应该尽可能多地使用javascript，而不需要与CSS和HTML进行多次交互。