javascript - 音量 slider 自动静音

Question

我正在使用 HTML 5、jQuery 和 Amplitude.js 从头开始​​创建响应式音频播放器，用于实时流式传输。

播放器右侧是一个“扬声器图标”，单击该图标可静音，但只需悬停鼠标即可显示垂直音量 slider 。

当音量 slider handle 处于 MouseDown 状态时，音频电平会相应降低或提高。但是，当 handle 进入 MouseUp 状态时选择后， slider handle 会跳到底部，从而有效地将音量静音。

我尝试使用 JavaScript 停用为扬声器图标按钮创建的静音/取消静音切换类，因为音量 slider 是静音/取消静音 div 的子 div 内的范围 slider ，但是我仍然无法停止 slider 从 MouseUp 静音。

请帮忙。

试图禁用 ToggleClass 的代码如下:

$(function volmute() {
$("#amplitude-mute").click(function () {
    $(this).toggleClass("unmute mute").siblings().removeClass("unmute mute");
 });
});

full jsFiddle of player

Answer 1

检查此更新 JSFiddle关联

因为您没有在音量 slider 上添加任何事件。并在卷容器上添加了点击事件 amplitude-mute .因此，每次单击 slider 范围音量都会静音和取消静音。