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

Question

我需要使用 HTML/CSS 和 JS 制作一个音频播放器。播放器应该很简单，有播放按钮和进度条。但是，我需要实现一种用户可以在音频文件(在进度条上)上添加标签的方法。有点像 SoundCloud 的播放器。在指定时间栏上有一条细线的地方，当您悬停它时，会出现一个弹出窗口，其中包含一些消息。

HTML5 的 <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-index 创建堆叠层(这样您就可以将音频播放器放在一层上，并将进度线放在音频播放器之上的一层上。)- (CSS)

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