Question

我正在尝试使用angularjs创建一个网络音频播放器。我没有使用html5＆＃34;控件＆＃34;因为我想要一个特定的风格，所以该播放器属性。我有播放/暂停/下一个/上一个按钮，但我一直在努力创建一个交互式进度条。我已经阅读了不同的选项来创建＆＃34;静态＆＃34;进度条（例如使用引导程序）显示进度，但用户无法搜索并跳转到歌曲的不同部分。我想我错过了一些东西，创建一个可寻找的进度条可能会很困难。有没有人知道应该怎么做？感谢

编辑：其他可能性是使用其中一些包装音频元素并添加功能的库。有人使用过这些库吗？

Answer 1

我不太了解angularjs，但我用一些简单的js代码做了类似的东西，因此，您需要获取进度条的左（x）位置和鼠标在进度条上单击的左侧位置（x）以及它们之间的差异（clickX - progressbarX），您将不得不通过进度条的宽度，这样你就可以得到你需要在浮点数上跳过播放器的时间乘以音频长度，你就可以得到跳转到的确切时间;

所以它是（clickX - progressbarX）/ progressbarWidth * audioLength

这是我使用的功能

`

function setCurrentTime(event){

    var posX = event.clientX;
    var aud = document.getElementById('player');
    rect = aud.getBoundingClientRect();
    aud.currentTime = parseInt((((posX-rect.x)/600)*v.duration));

}

`

和html代码

<progress onclick="setCurrentTime(event)" value="0" max="1"></progress>

angularjs中的音频进度条

1 个答案: