метод класса запущен без вызова - PullRequest
Новая
       10

метод класса запущен без вызова

1 голос
/ 27 мая 2019

Я определил класс для обработки воспроизводимых аудиофайлов.Я создаю экземпляр класса и вызываю его метод addEventListener(), в это время playSound() запускается без нажатия элемента.Также, когда я звоню getEventListeners(bgMusic.elem) - слушатель больше не подключается. 

class WebAudio {

    constructor(soundFile, elem) {
        this.soundFile = soundFile;
        this.elem = elem;
        this.audio = new Audio('sound/' + this.soundFile);
    }

    addListener() {
        this.elem.addEventListener('touchstart', this.playSound());
    }

    playSound() {
        if (context.state != 'suspended') {
            console.log('playing audio file');
            if (!this.audio.playing) {
                this.audio.play();
            }
        } else {
            console.log("Audio Context locked? " + context.state)
        }
    }

}

var AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
function webAudioTouchUnlock(context) {
    return new Promise( (resolve, reject) => {
        //if AudioContext is suspended, and window has been interacted with
        if (context.state === 'suspended' && 'ontouchstart' in window) {
           console.log(context.state);
           var unlock = () => {
               //resume AudioContext (allow playing sound), remove event listeners
               context.resume().then(() => {
                   console.log("context resumed");
                   document.body.removeEventListener('touchstart', unlock);
                   document.body.removeEventListener('touchend', unlock);
                   resolve(true);
               }, function (reason) {
                 reject(reason);
               });
           };
           document.body.addEventListener('touchstart', unlock, false);
           document.body.addEventListener('touchend', unlock, false);
       } else {
           console.log('context not suspended? Context is ' + context.state);
           resolve(false);
       }
    });
}

webAudioTouchUnlock(context);
let bgMusic = new WebAudio('bensound-clearday.mp3', document.querySelector('#sound_button'));
bgMusic.addListener();

1 Ответ

2 голосов
/ 27 мая 2019

Когда вы добавляете прослушиватель событий, например: 

 this.elem.addEventListener('touchstart', this.playSound());

Вас волнует вызов функции: this.playSound() и добавление результата этой функции (undefined) в качестве слушателя.

Вы просто хотите добавить ссылку на функцию: 

this.elem.addEventListener('touchstart', this.playSound);

чтобы слушатель мог вызвать его, когда ему это тоже нужно.

Также вам, вероятно, потребуется использовать что-то подобное для поддержания правильного this: 

this.elem.addEventListener('touchstart', () => this.playSound());

или 

this.elem.addEventListener('touchstart', this.playSound.bind(this));
...