我正在尝试为我的 html5 音频播放器制作进度条,并制作通过点击来更改轨道播放时间的功能。我决定使用输入[范围]来完成此操作,但是当我点击栏时,当前播放时间不会更新,轨道只是从头开始播放:
我的html:
<audio controls='controls' class="track">
<source src="{{ user_lib.audio_file.url }}" type="audio/mpeg">
<source src="{{ user_lib.audio_file.url }}" type='audio/ogg; codecs=vorbis' />
<p>Your user agent does not support the HTML5 Audio element.</p>
</audio>
<div class="progress-bar">
<input type="range" min="0" max="100" value="0" step="1" class="track-pb"
onchange="PBtap()" id="track-pb"/>
</div>
我的js:
function PBtap() {
$('#track-pb').on('input propertychange', function() {
var currenttrack = $('.track')[0];
var val = parseInt($(this).val() * currenttrack.duration / 100, 10)
$('#track-pb').prop("value", val);
currenttrack.currentTime = val;
})
}
我尝试使用
$(currenttrack).bind('canplay', function() {
this.currentTime = val;
});
我做错了什么?
最佳答案
这应该有效:
function PBtap(trackpb) {
var currenttrack = $('.track')[0];
var val = parseInt($(trackpb).val() * currenttrack.duration / 100, 10)
currenttrack.currentTime = val;
}
在 HTML 中,将 onchange="PBtap()"
更改为 onchange="PBtap(this)"
。这样使用onchange时,默认是无法访问this
的。
您还可以添加以下内容来更改音频播放时的范围值:
setInterval(function () {
var track = $(".track")[0];
$("#track-pb")[0].value = track.currentTime / track.duration * 100;
}, 100);
如果将 HTML 中的 onchange
更改为 oninput
,效果会更好。
关于javascript <音频> : cant update currentTime,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52907477/