我正在尝试使用 angularjs 创建一个网络音频播放器。 我没有为播放器使用 html5“控件”属性,因为我想要特定的样式。我有播放/暂停/下一个/上一个按钮,但我一直在努力创建一个交互式进度条。我已经阅读了不同的选项来创建显示进度的“静态”进度条(例如使用 Bootstrap ),但用户无法查找并跳转到歌曲的不同部分。我想我错过了一些东西,创建一个可寻找的进度条并不是那么困难。有人知道应该如何做到这一点吗? 谢谢
编辑:其他可能性可能是使用其中一些包装音频元素并添加功能的库。有人使用过这个库吗?
最佳答案
我不太了解 angularjs,但我用一些简单的 js 代码做了类似的东西, 所以你需要获取进度条的左侧(x)位置和鼠标在进度条上单击的左侧位置(x)以及它们之间的差异(clickX - ProgressbarX),你必须除以宽度进度条,这样您将获得跳转到播放器所需的时间(以 float 乘以音频长度),您将获得跳转到的准确时间;
所以是(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>
关于javascript - AngularJS中的音频进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27947243/