Question

我正在尝试为网站创建自定义音乐播放器用户界面。它没有播放任何真正的音频文件，所以我不会使用HTML的音频功能。

它实际上只是在后台播放一些YouTube视频，但我想为它创建自己的音乐播放器界面。

我想知道如何创建自定义跟踪栏，知道用户点击的位置。

例如，如果我的div为20px高，500px宽代表轨迹栏，并且用户点击它的某个部分，我怎样才能获得相对于div的值？< / p>

Youtube附带了一个API，允许您跳到歌曲的某个部分，但我首先必须获取用户点击的位置的值（以像素为单位），然后运行一些简单的数学运算把它转换成时间。

希望我的问题是可以理解的。我可以根据需要提供其他详细信息。

谢谢！

Answer 1

HTML5有一个progress元素，您可以使用(link)。这很容易操纵：

var p = document.querySelector("progress");

p.addEventListener("click", function(event){
    var newVal = Math.round(event.offsetX / p.offsetWidth * 100);
    p.setAttribute('value',newVal);
});

http://jsfiddle.net/6LrzLa6v/

创建自定义音乐播放器UI - 轨迹栏

1 个答案: