Event listener to detect when sound complete for HTML5 document

[NefJack]

Hi,

I've tried looking around for info on this, but I haven't had much luck. 

Is there an event listener to detect when a sound has completed playing?

To give some context to what I am trying to do.

I'm trying to play a visualizer animation that plays while a sound is playing. But I want the animation to stop when the sound file has completed playing.

Thanks in advance!

[NefJack]

Nevermind, I came across something that seems to be working for me.

Here's what I did, in case anyone else is looking for something similar:

_this.play_btn.on('click', function(){
	if (_this.bgm)
	_this.bgm.play();
	else
		_this.bgm = createjs.Sound.play("soundfile");
		_this.bgm.addEventListener("complete",stopvis.bind(this));
			function stopvis(){
			_this.visualizer.visible = false;
			}
});

[ClayUUID]

If that can execute multiple times, it's going to keep adding more and more event listeners. You have to remove the event listener after it's done its job 

[NefJack]

Thanks for the heads up @ClayUUID 

Will this do the trick?

_this.play_btn.on('click', function(){
	if (_this.bgm)
	_this.bgm.play();
	else
		_this.bgm = createjs.Sound.play("soundfile");
		_this.bgm.addEventListener("complete",stopvis.bind(this));
			function stopvis(){
			_this.visualizer.visible = false;
			}
                _this.bgm.removeEventListener("complete",stopvis.bind(this));

});

[ClayUUID]

No, it absolutely will not, because bind() returns a new function reference every time it's called.

You can use the remove() method of the event object within an event handler to remove its associated listener.

https://createjs.com/docs/easeljs/classes/Event.html#method_remove