index.ts
if(audio.paused) {
audio.play()
audio.addEventListener('timeupdate', (e) => handleAudioPlayer(<HTMLAudioElement>e.target,
<HTMLDivElement>audio.parentElement), true);
}
else {
audio.pause()
audio.removeEventListener('timeupdate', () => handleAudioPlayer, true);
}
Basically I have a handleAudioPlayer function that takes 2 arguments, when the audio is playing the event listener is added, and when its paused it should get removed, but here the eventListeners are getting duplicated which is bad, any help is appreciated!
You're trying to remove a different function than you added in the first place. Instead, try to add and remove the same handler.
const handler = (e) => handleAudioPlayer(<HTMLAudioElement>e.target,
<HTMLDivElement>audio.parentElement)
audio.addEventListener('timeupdate', handler, true)
audio.removeEventListener('timeupdate', handler, true)
In your case you should declare your function to a variable. Then you can remove the eventListener.
if(audio.paused) {
audio.play()
audio.addEventListener('timeupdate', handleAudioPlayer, true);
}
else {
audio.pause()
audio.removeEventListener('timeupdate', handleAudioPlayer, true);
}
let handleAudioPlayer = (evt) => {
// do something
};