javascript - AngularJS中的音频进度条

标签 javascript angularjs html

我正在尝试使用 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/

相关文章:

angularjs - 错误 : [$resource:badcfg] Error in resource configuration. 预期响应包含数组,但获得了对象?

html - 如何? CSS "Position:Absolute"恒定边距顶部?可能的?

javascript - 使用无法在页面上工作的书签注入(inject) jQuery

javascript - 如何更改默认工具提示的位置和标题

javascript - 如何更改 Bootstrap 本地化?

javascript - 删除使用 javascript 创建的 html 节点

javascript - reloadOnSearch :false 时返回按钮

angularjs - AngularUI UI 可排序索引更新问题

javascript - Angular 1 - 解析 $http 响应

html - 使用 flexbox 的响应式两列布局