HowlerJS 步进函数不会在搜索时更新范围输入值

Question

我正在使用Howler.js 创建一个播客播放器。

我有 4 个按钮和一个输入都可以控制播客。

当您点击播放、后退和前进按钮时，在执行它们的操作后，它们会调用一个名为 step 的函数，该函数负责更新范围输入的值。

  function step(){
    var self = this;

    var seek = sound.seek() || 0;
    rangeInput.attr('value', seek);

    //If sound is still playing, continue stepping
    if(sound.playing()){
      requestAnimationFrame(step.bind(self));
    }

  }

当您尝试使用输入来更改您在播客中的位置时，就会出现问题。虽然它确实将音频向前移动，但 step 函数会停止更新范围输入的值。

奇怪的是，如果您在使用范围输入后检查元素，您确实可以看到它的值正在 DOM 中更新。但点永远不会再移动。

我创建了一个小提琴，我在其中重新创建了这个问题。 Link to Fiddle

这是我的全部代码

var sound = new Howl({
    src: ['https://s3.amazonaws.com/ShopTalk/080_rapidfire_19.mp3'],
    onplay:function(){
      requestAnimationFrame(step.bind(this));
    }
  });

  var rangeInput = $('#range');

  sound.once('load', function(){
    $('#loading').hide();
    $('#ready').show();
    $('#controls').show();
    $('#range').attr('max', sound.duration());
    console.log('Podcast Loaded');
  });

  $('#play').on('click', playPodcast);
  $('#pause').on('click', pausePodcast);
  $('#skip-back').on('click', skipBackward);
  $('#skip-forward').on('click', skipForward);
  rangeInput.change(seek);

  function step(){
    var self = this;

    var seek = sound.seek() || 0;
    rangeInput.attr('value', seek);

    //If sound is still playing, continue stepping
    if(sound.playing()){
      requestAnimationFrame(step.bind(self));
    }

  }

  function seek(){

    var seekedTime = $('#range').val();
    sound.seek([seekedTime]);

    step();
  }

  function playPodcast(){
    sound.play();
  }

  function pausePodcast(){
    sound.pause();
  }

  function skipForward(){
    sound.seek([sound.seek() + 5]);
    step();
  }

  function skipBackward(){
    sound.seek([sound.seek() - 5]);
    step();
  }

总结一下，

我正在使用一个名为step() 的函数，只要仍在播放音频文件，它就会不断更新范围输入的值。当您使用范围输入在播客中手动选择一个位置时，它会停止更新该值，即使它正在 DOM 中进行更新，并且播客会准确地寻找其新位置并继续播放。

Answer 1

我认为有多个错误，所以我尝试了不同的逻辑来更好地工作。

基本上防止多个sound.play()在Play，前进和后退。

防止rangeInput在我们试图拖动它时进行设置。

所以不要绑定requestAnimationFrame(step)如果鼠标在rangeInput上

Js fiddle sample

var self = this;
var mousehover = false;


var sound = new Howl({
  src: ['https://s3.amazonaws.com/ShopTalk/080_rapidfire_19.mp3'],
  onplay: function() {
    id = requestAnimationFrame(step);
  }
});

var rangeInput = $('#range');

sound.once('load', function() {
  $('#loading').hide();
  $('#ready').show();
  $('#controls').show();
  $('#range').attr('max', sound.duration());
  console.log('Podcast Loaded');
});

$('#play').on('click', playPodcast);
$('#pause').on('click', pausePodcast);
$('#skip-back').on('click', skipBackward);
$('#skip-forward').on('click', skipForward);
rangeInput.change(seek);
rangeInput.on("mouseenter", () => {
  mousehover = true;
})
rangeInput.on("mouseout", () => {
  mousehover = false;
  step();
})


function step() {
  var seek = sound.seek() || 0;
  rangeInput.val(seek);
  //If sound is still playing, continue stepping
  if (!mousehover && sound.playing()) {
    id = requestAnimationFrame(step);
  }

}



function seek() {

  cancelAnimationFrame(id)
  var seekedTime = $('#range').val();
  sound.seek([seekedTime]);
  sound.play()
}

function playPodcast() {
  if (!sound.playing())
    sound.play();
}

function pausePodcast() {
  if (sound.playing())
    sound.pause();
}

function skipForward() {
  sound.seek([sound.seek() + 5]);
  if (!sound.playing())
    sound.play();
}

function skipBackward() {
  sound.seek([sound.seek() - 5]);
  if (!sound.playing())
    sound.play()
}

body {
  padding: 25px;
}

#ready {
  display: none;
}

#controls {
  display: none;
}

#range {
  -webkit-appearance: none;
  margin-top: 35px;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

#range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #00AEC7;
  cursor: pointer;
}

#range::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #00AEC7;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.2/howler.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<p id="loading">Loading...</p>
<p id="ready">Ready</p>
<hr />
<div id="controls">
  <button id="play">Play</button>
  <button id="pause">Pause</button>
  <button id="skip-back">Back 5 seconds</button>
  <button id="skip-forward">Forward 5 seconds</button>
  <br />
  <input type="range" min="0" max="" value="0" id="range">
</div>

Answer 2

我发现了一个错误。
错误是多播放mp3。
你prevnet玩多个。

添加此代码。

  function playPodcast(){
    if(sound.playing()) {
      return;
    }

    sound.play();
  }

---

这就是你的问题的答案。

  function seek() {
    var seekedTime = $('#range').val();
    sound.pause();
    sound.seek([seekedTime]);
    sound.play();
  }

测试是https://jsfiddle.net/h6b57f4v/5/

[参考]https://github.com/goldfire/howler.js/issues/1156#issuecomment-487292193