无法使用vue音频播放器使音频静音

Question

我正在努力让 vue 应用程序中的音频静音。我有一系列歌曲可以播放、暂停、随机播放等，但无法使用静音功能。我在 js 中有以下内容：

mute()
            {
            if (this.muted) {
                return this.volume = this.previousVolume;
            }

            this.previousVolume = this.volume;
            this.volume = 0;
        },

使用此计算方法：

muted() {
        return this.volume / 100 === 0;
}

我试过添加这个：

mutebtn = document.getElementById ("mutebtn")
              mutebtn.addEventListener ("click", mute());

在音乐播放器中使用这个：

<div id="mutebtn">
                  <i class="icon ion-ios-volume-high" title="Mute" v-if="volume" @click="mute()"></i>
                  <i class="icon ion-ios-volume-off" title="Unmute" v-if="muted" @click="volume"></i>
              </div>

这是我第一次尝试制作音乐播放器，我对这一切都很陌生，对 javascript 感到困惑。任何帮助都会很棒！

Answer 1

在您的示例中，您已经有一个参考 this.audioPlayer 来控制播放器的静音状态。

因此您的方法可能如下所示：

methods: {
    mute() {
      this.audioPlayer.muted = !this.audioPlayer.muted
    }
}

请注意 - 这是 Vue 建议您向 HTML 添加点击监听器之类的方式（参见 Vue docs）。您可能不使用 addEventListener 来完成这样的任务。

我在播放按钮旁边添加了一个简单的静音按钮： https://codepen.io/anon/pen/MLxOyj?editors=1111

您的示例的另一个简短提示：你这样设置 this.audioPlayer：

mounted () {
    this.audioPlayer = this.$el.querySelectorAll("audio")[0];
}

vue.js 提供了一种更简洁的方式来引用元素：

<audio src="my.mp3" ref="myAudio"></audio>

mounted () {
    this.audioPlayer = this.$refs.myAudio;
}

无法使用vue音频播放器使音频静音

Can't get audio to mute using vue audio player

javascript

html5-audio

vue.js