Question

我正在使用howler.js作为随机音频播放器，看起来很棒，我确信当我学到我需要的东西时，它最终会做我想要的！我也有它的工作和音量滑块（感谢这里的另一篇文章）然而....音量滑块似乎只适用于第一次播放。当它选择下一个文件时，它没有。这是与范围有关还是我正在使用'on end触发函数中的下一个循环的事实; （我认为）

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"              "http://www.w3.org/TR/html4/loose.dtd">
  <html>

  <head>
  <title></title>
   </head>
  <body>
  <script src="howler.core.js"></script>
  <script>

  function createHowl() {
   var number = Math.floor((Math.random() * 14) + 1);
   return new Howl({
    src:      ['audio/' + number + '.wav'],
    autoplay: false,
    loop:     false,
    volume:   1.0,
    onend:    function() {createHowl().play()}
    });
    }

      function showValue(newValue) {
      document.getElementById('range').innerHTML=newValue;
      howl.volume(newValue);
      }

      var howl = createHowl();
      howl.play();

       </script>
       <input type="range" min="0" max="1" value="1" step="0.01"   onchange="showValue(this.value)" oninput="showValue(this.value)"/>
        <span id="range">0</span>   </body>
         </html>

除了音量滑块之外，它似乎都有效。我无法解决这个问题，但认为它与最终有关。但是如果没有它我就无法循环。

干杯

Answer 1

这是因为您正在创建一个新的嚎叫对象。您需要确保howl变量始终指向最新的播放声音。

var currentHowl = null

function createHowl() {
  var number = Math.floor((Math.random() * 14) + 1);
  currentHowl = new Howl({
    src:      ['audio/' + number + '.wav'],
    autoplay: false,
    loop:     false,
    volume:   1.0,
    onend:    function() {createHowl().play()}
  });

  return currentHowl
}

function showValue(newValue) {
  document.getElementById('range').innerHTML=newValue;
  currentHowl.volume(newValue);
}

var howl = createHowl();
howl.play();

第一次播放后，循环中的howler js音量滑块不起作用

1 个答案: