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

【问题标题】：Setting input range slider max attribute with js on howler.js project在 howler.js 项目中使用 js 设置输入范围滑块最大属性
【发布时间】：2019-06-21 23:46:28
【问题描述】：

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

我可以设置最大值以匹配 audio.duration()。

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

很好，但是。

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

滑块只反映原始硬编码的 max="100" 是什么。

因此，如果我移动滑块并且音频长度为例如 177.777 秒，则滑块在音频之前结束，换句话说，如果我设置 max="1000，音频的持续时间将不适合，反之亦然" ，在音频结束之前，滑块仅达到 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());


      }
    });

【问题讨论】：

标签： javascript jquery input slider howler.js

【解决方案1】：

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

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

示例：

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

【讨论】：