javascript<；音频>；：无法更新当前时间

我试图为我的html5音频播放器制作进度条，并通过点击来改变曲目播放时间。我决定用输入[range]来做，但当我点击栏时，当前播放时间不更新，曲目从一开始就播放：

我的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>

我试着用

$(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

，这将更好地工作。

这应该可以：

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

，这将更好地工作。

这看起来像是范围问题。在

$（currenttrack）.bind（'canplay'，function（）{

）中，

currenttrack

未定义，因为它是在函数中声明的

此外，您还可以使用内联

onchange

调用一个函数……该函数注册一个更改处理程序jQuery way。它是其中之一

试试这个：

var currenttrack = $('.track')[0];
var val = 0;

$('#track-pb').on('input change propertychange', function() {

  val = parseInt($(this).val() * currenttrack.duration / 100, 10)
  $('#track-pb').prop("value", val);
  currenttrack.currentTime = val;
});


currenttrack.on('canplay', function() {
  this.currentTime = val;
});

并从标记中删除

onchange=“PBtap（）”

---

另外…不要使用不推荐使用的

.bind（）

。改用

.on（）

。

这看起来像是范围问题。在

$（currenttrack）中。bind（'canplay'，function（）{

，

currenttrack

未定义，因为它是在函数中声明的

此外，您还可以使用内联

onchange

调用一个函数……该函数注册一个更改处理程序jQuery way。它是其中之一

试试这个：

var currenttrack = $('.track')[0];
var val = 0;

$('#track-pb').on('input change propertychange', function() {

  val = parseInt($(this).val() * currenttrack.duration / 100, 10)
  $('#track-pb').prop("value", val);
  currenttrack.currentTime = val;
});


currenttrack.on('canplay', function() {
  this.currentTime = val;
});

并从标记中删除

onchange=“PBtap（）”

---

另外，不要使用不推荐使用的

.bind（）

。请改用

.on（）

。

您可以发布完整的HTML，包括实际的音频元素吗？（最好是在codepen或JSFIDLE中）。您可能不想要

$（'#track pb'）。on（'input Property Change'，function（）{/code>在
PBtap（）中）
，但我不确定这是否能解决您的问题。我添加了音频元素。其他代码与音频标记不匹配。我无法将其上载到JSFIDLE或codepen，因为我有一些django变量，不确定它是否能在那里工作。您可以发布完整的HTML，包括实际的音频元素吗？（最好是在codepen或JSFIDLE中）。您可能不想要
$（'#track pb'）。在（'input Property Change'，function（）{
内
PBtap（）中）
，但我不确定这是否能解决您的问题。我添加了音频元素。其他代码与音频标记不匹配。我无法将其真正上传到JSFIDLE或codepen，因为我有一些django变量，不确定它是否能在那里正常工作，仍然无法工作。现在，当我点击进度条时，曲目刚刚停止，我无法再次运行它直到页面刷新。好的，仍然不工作。现在，当我点击进度条时，跟踪刚刚停止，我不能再次运行它，直到页面刷新。不幸的是，我已经得到了setInterval函数，但我停止了它，因为我认为Tap函数和它冲突。但看起来问题出在其他方面thing@AndrejVilenskij看看我的密码笔：（我使用了一些随机音频进行演示）。它对我来说似乎很好（在Chrome和Firefox中进行了测试）。如果它仍然对您不起作用，您在控制台中是否有任何错误？请注意（以防您还没有尝试过它），使用
oninput
而不是
onchange
对我来说有很大的不同。现在我只是复制粘贴了你的代码，但它是一样的。从一开始就跟踪，更改后的currentTime值始终=0（使用控制台日志检查）。我改为oninput，但它仍然是一样的。我还尝试禁用所有其他js代码，但即使这样也没有帮助。不幸的是，同样的事情。我已经得到了setInterval函数，但我停止了它，因为我认为Tap函数与它冲突。但看起来问题出在其他方面thing@AndrejVilenskij看看我的密码笔：（我使用了一些随机音频进行演示）。它对我来说似乎很好（在Chrome和Firefox中进行了测试）。如果它仍然对您不起作用，您在控制台中是否有任何错误？请注意（以防您还没有尝试过它），使用
oninput
而不是
onchange
对我来说有很大的不同。现在我只是复制粘贴了你的代码，但它是一样的。从一开始就跟踪，更改后的currentTime值始终=0（使用控制台日志检查）.我改为oninput，但还是一样。我还尝试禁用所有其他js代码，但即使这样也没有帮助。