Question

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

HTML5的<audio></audio>标签是否可以使用JavaScript获得毫秒表示？

或者最好的想法是创建一个自定义音频播放器？

修改

我正在关注这个例子 - ＆gt; 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进行多次交互。

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

1 个答案: