Question

我有一个使用howler.js制作的音频播放器我正在使用J查询动态设置输入范围滑块的max属性。

我可以设置最大值以匹配audio.duration（）。

示例：如果音频源为177.777秒，则将max属性设置为该值。我可以看到使用dev inspector的max属性发生了变化。

那很好，但是。

问题是当我更改max属性时，滑块无法反映它。

滑块仅反映原始的硬编码max =“ 100”是什么。

因此，如果我移动滑块并且音频长度为177.777秒，则滑块会在音频之前结束，换句话说，如果我将max =“ 1000”设置为10，则音频的持续时间将不适合，反之亦然“，则滑块只会在音频结束前达到10％。

滑块css宽度设置为100％，那不是问题。

我不确定howler.js实例化咆哮声音对象的方式，还是其他方式，是否还需要重置输入范围值属性？欢迎任何帮助。

下面是一些代码示例：

HTML：<input id="song1" class="songSlider" type="range" value="0" min="0" step="1" max="1000">

JS：

sound[soundid] = new Howl({
      src: ['../audio/' + musicIdentifier],
      volume: 0.8,
      onload: function() {
      $('input[type=range]').attr('max', sound[soundid].duration());


      }
    });

Answer 1

我明白了，希望对遇到同样问题的人有所帮助。

我必须获取范围滑块的当前值，然后将其除以当前的max属性，然后再乘以audio.duration：

示例：

var $max = $('input[type=range]').attr('max');
$songCurrentTime = $(".songSlider").val();
$newCurentTmeValue = ($songCurrentTime / $max) * currentAudioPlaying.duration();

在howler.js项目上使用js设置输入范围滑块的最大属性

1 个答案: