Я определил класс для обработки воспроизведения аудиофайлов. Я создаю экземпляр класса и вызываю его метод 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.info('playing audio file');
if (!this.audio.playing) {
this.audio.play();
}
} else {
console.info("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.info(context.state);
var unlock = () => {
//resume AudioContext (allow playing sound), remove event listeners
context.resume().then(() => {
console.info("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.info('context not suspended? Context is ' + context.state);
resolve(false);
}
});
}
webAudioTouchUnlock(context);
let bgMusic = new WebAudio('bensound-clearday.mp3', document.querySelector('#sound_button'));
bgMusic.addListener();
Когда вы добавляете прослушиватель событий, например:
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));