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音频播放器将音频静音

1 个答案: