jquery - 使 slider 响应 html5 音频时间更新

Question

我使用 jQuery UI 创建了一个 html5 音频播放器的 slider 。我遇到的问题是 slider 本身不响应轨道本身的时间变化 (timeupdate)。然而，它确实响应拖动 slider ，并且歌曲和时间也通过更改音频的时间来响应。

对我来说，当轨道播放时， slider 似乎受到了其他东西的影响，因为播放时 slider 上有一个恒定的 left: 0% 样式，即使 jQuery 声明这应该改变。当我将 jQuery 设置为 right: pos +'% 时，右侧样式会随音频动态变化，但 left: 0% 样式仍然保留。控制台中没有显示错误，所以我真的不知道发生了什么。

$(song).on('timeupdate', function() {

  var rem = parseInt(song.duration - song.currentTime, 10),
  pos = (song.currentTime / song.duration) * 100,
  mins = Math.floor(rem/60,10),
  secs = rem - mins*60;

  $('.body_container .player .time').text('-' + mins + ':' + (secs > 9 ? secs : '0' + secs));
  if(manualSeek = true){$('.body_container .player .ui-slider-handle').css({left: pos + '%'}); }
  if (loaded = true) {
  loaded = true;

    $('.body_container .player .slider').slider({

      max: song.duration,

      slide: function() {             
        manualSeek = true;
      },
      stop:function(e,ui) {
        manualSeek = false;         
        song.currentTime = ui.value;
      }

    });
   }

});

旁注:只是想我会这么说，因为有人在上一个问题中问过这个问题。 song 已定义，我只是没有包含它，因为不需要它。 song = new Audio(url); 其中 url 是从播放器的数据属性获取的轨道 url。

Answer 1

您是否尝试过使用“bind”而不是“on”？例如:$(song).bind('timeupdate',function(){})

“on”我认为是用于点击事件的事件委托(delegate)。