音量滑块自动静音

Question

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

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

当音量滑块手柄处于 MouseDown 状态时，音频电平会相应降低或提高。然而，当手柄进入 MouseUp 状态时选择后，滑块手柄会跳到底部，从而有效地静音。

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

请帮忙。

为了禁用 ToggleClass 而编写的代码如下：

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

full jsFiddle of player

Answer 1

查看此更新的JSFiddle 链接

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