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 中更新。 但是这个点再也不会移动了。

我创建了一个小提琴，在那里我重新创建了这个问题。 链接到小提琴

这是我的全部代码

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()在播放，向前和向后。

防止rangeInput在我们只是尝试拖动它时设置。

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

Js小提琴样本

 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