单击静音按钮时如何将音量滑块上的输入类型范围重置为 0？

Question

我有这个音量滑块：

 <input id="volume-slider" type="range" min="0" max="1" step="0.1" value="0.5"></input>

      $("#volume-slider").on("change", function() {
        audio.volume = this.value;
        if (audio.volume === 0) {
          [... change class to make mute volume icon appear ...]
        } else {
          [... change class to make mute volume icon disappear ...]
        }
      });

此代码运行良好。当滑块转到 0 时，会出现静音扬声器图标。

不过，我也想要相反的东西。

我可以做类似的东西：

$("#speaker-button").on("click", function() {
audio.volume > 0 ? audio.volume = 0 : audio.volume = 0.5;
}

效果很好。但是，当我将音量设置 audio.volume 静音为 0 时，它不会移动输入范围滑块。如果我使用静音按钮将音量静音，我希望范围滑块转到 0。

我怎样才能做到这一点？

Answer 1

设置滑块值并触发更改方法。

下面的基本思想和我添加的代码将取消静音到最后一个已知值而不是将其重置为 0.5。

const audio = { volume : 0 }
let lastVolume
const slider = $("#volume-slider").on("change", function() {
  var val = +this.value;
  audio.volume = val
  if (val) lastVolume = val
  console.log(audio.volume)
}).change();

$("#mute").on("click", function () {
  var val = audio.volume === 0 ? (lastVolume || 0.5) : 0
  slider.val(val).change()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="volume-slider" type="range" min="0" max="1" step="0.1" value="0.5"></input>

<button id="mute" type="button">Mute</button>

单击静音按钮时如何将音量滑块上的输入类型范围重置为 0？

How to reset input type range to 0 on volume slider when clicking on the mute button?

javascript

jquery

html5-audio