Не удается отключить звук с помощью аудиопроигрывателя Vue - PullRequest
Новая
       10

Не удается отключить звук с помощью аудиопроигрывателя Vue

0 голосов
/ 19 февраля 2019

Я изо всех сил пытаюсь отключить звук в приложении 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.Любая помощь будет отличной!

1 Ответ

0 голосов
/ 20 февраля 2019

В вашем примере у вас уже есть ссылка 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;
}
...