html加jquery实现音量

调节功能

HTML部分：

<audio src="music.mp3" controls></audio>

<div class="volume-container">
  <div class="volume-slider"></div>
  <div class="volume-icon"></div>
</div>

jQuery部分：

$(document).ready(function() {
  var audio = $("audio")[0];
  var volumeSlider = $(".volume-slider");
  var volumeIcon = $(".volume-icon");
  
  // 初始化音量为50%
  audio.volume = 0.5;
  volumeSlider.css("width", audio.volume * 100 + "%");
  
  // 点击音量图标切换静音
  volumeIcon.click(function() {
    if (audio.volume > 0) {
      audio.volume = 0;
      volumeIcon.addClass("mute");
    } else {
      audio.volume = 0.5;
      volumeIcon.removeClass("mute");
    }
    volumeSlider.css("width", audio.volume * 100 + "%");
  });
  
  // 拖动音量条调整音量
  volumeSlider.slider({
    range: "min",
    min: 0,
    max: 1,
    value: audio.volume,
    step: 0.01,
    slide: function(event, ui) {
      audio.volume = ui.value;
      if (audio.volume > 0) {
        volumeIcon.removeClass("mute");
      } else {
        volumeIcon.addClass("mute");
      }
    }
  });
});

CSS部分：

.volume-container {
  position: relative;
  width: 100px;
  height: 10px;
  margin: 10px auto;
  background-color: #ccc;
  border-radius: 5px;
}

.volume-slider {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  background-color: #333;
  border-radius: 5px;
}

.ui-slider-horizontal {
  height: 10px;
  background-color: transparent;
  border: none;
}

.ui-slider-handle {
  width: 16px;
  height: 16px;
  margin-top: -3px;
  background-color: #333;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}

.volume-icon {
  position: absolute;
  top: 50%;
  right: -8px;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  background-image: url(volume.png);
  background-repeat: no-repeat;
}

.volume-icon.mute {
  background-image: url(mute.png);
}

说明：

1. 在HTML中使用`<audio>`标签来播放音频，并添加`controls`属性来显示控制面板。
2. 使用`<div>`标签来创建音量调节器的容器。
3. 使用`.volume-slider`来表示音量调节器的滑块，使用`.volume-icon`来表示音量图标。
4. 在jQuery中获取`<audio>`标签对象和音量调节器的滑块、图标对象。
5. 初始化音量为50%。
6. 点击音量图标可以切换静音和恢复音量，同时更新音量调节器的滑块。
7. 使用jQuery UI的`slider`方法来创建音量调节器的滑块，设置最小值为0，最大值为1，初始值为当前音量，步长为0.01。
8. 在拖动滑块时更新音量，同时判断是否为静音状态并更新音量图标。
9. 根据需要自定义CSS样式，其中`.ui-slider-horizontal`、`.ui-slider-handle`为jQuery UI自动生成的样式。