Question

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

对于我而言，当播放曲目时，滑块似乎受到其他东西的影响，因为即使jQuery声明这应该改变，滑块在播放时仍有left: 0%样式。当我将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是从播放器的数据属性获取的跟踪网址。

Answer 1

您是否尝试过使用'bind'代替'on'？例如：$(song).bind('timeupdate',function(){})

“on”我认为是针对点击事件的事件委派。

使滑块响应html5音频timeupdate

1 个答案: