Vue 音量控制实现 - 解决 `<audio>` 音量调节问题

这段 Vue 代码中的音量无法调节的问题可以通过修改<audio> 标签的volume 属性来解决。具体步骤如下：

1. 在data 中添加一个volume 属性，用于存储音量值，默认为 80（根据需求可以修改）。

data() {
  return {
    volume: 80,
    // ...
  };
},

2. 在<audio> 标签上绑定volume 属性。

<audio class="music-element" ref="music" :volume="volume">
  <source src="@/assets/videos/南辰Music - 病变(纯音乐).mp3">
</audio>

3. 修改handleVolumeDown 和handleVolumeUp 方法，通过修改this.$refs.music.volume 来改变音量值。

handleVolumeDown() {
  this.volume = Math.max(this.volume - 20, 0);
  this.$refs.music.volume = this.volume / 100;
},
handleVolumeUp() {
  this.volume = Math.min(this.volume + 20, 100);
  this.$refs.music.volume = this.volume / 100;
},

这样就可以通过调节滑动条来改变音量了。