Skip to main content
Inspiring
January 27, 2025
Answered

Previous audio plays along with current audio

  • January 27, 2025
  • 1 reply
  • 704 views

Hi. I'm trying to create a maths game where there are two lots of fish in a tank. You click on a number button to say how many fish there are altogether. The audio says, for example, 'Well done. There are eight'. Then some fish are taken away (from either side) and the player has to click to say how many are left. This continues until all the fish are gone.

The audio is split into three files: 'Well done', 'There are' and 'eight'.

The number of fish is reset elsewhere to the new totals using the variables, var_NumberOfFish1 and var_NumberOfFish2.

I can get this to work the first time, but when some fish are taken away and you try again, when it gets to playing the new number, it plays the correct number and the original number at the same time. This happens every time, so it could end up with three or four numbers being spoken at the same time. Is there a way to reset the audio so it doesn't get played again during that turn?

The code is:

let audioRoot = this

//----------------Set up sounds
function init(){
	
	var assetPath = "sounds/"
	var sounds = [
		{src:"wellDone.wav", id:"wellDone"},		
		{src:"thereIs.wav", id:"thereIs"},		
		{src:"one.wav", id:"one"},		
		{src:"two.wav", id:"two"} etc...
	]	
	
	var preload = new createjs.LoadQueue()
	preload.addEventListener("fileload", handleFileComplete)
	preload.loadFile (assetPath)
	
	function handleFileComplete(event){
		
		createjs.Sound.registerSounds(sounds, assetPath)
		wellDonePlay = createjs.Sound.play("wellDone")
		thereIsPlay = createjs.Sound.play("thereIs")
		onePlay = createjs.Sound.play("one")
		twoPlay = createjs.Sound.play("two") etc...
		
	}

//----------------Button One
	audioRoot.one_btn.addEventListener("click", oneClicked.bind(this))

	function oneClicked () {
			
		if(root.var_ReadyToAnswer){
			if(root.var_NumberOfFish1 + root.var_NumberOfFish2 == 1){
				wellDonePlay.play()
				wellDonePlay.on("complete", function()
					{
						thereIsPlay.play();
					})
				thereIsPlay.on("complete", function()
					{
						onePlay.play();
					})
				onePlay.on("complete", function()
					{
						letsPutPlay.play();
					})
			} else {
				tryAgainPlay.play()
			}
		}
		
	}
}

init()

 

Correct answer kglad

I've attached a screenshot of the browser error. I assume it's the line that starts

audioRoot.onePlay.on

 


that line should be in the previous complete function 

1 reply

kglad
Community Expert
January 27, 2025

why are there play methods in handleFileComplete?

 

you should remove those and use:

 

function oneClicked () {
			
		if(root.var_ReadyToAnswer){
			if(root.var_NumberOfFish1 + root.var_NumberOfFish2 == 1){
				wellDonePlay=createjs.Sound.play("wellDone")
				wellDonePlay.on("complete", function()
					{
						etc
					})
				thereIsPlay.on("complete", function()
					{
						etc
					})
				onePlay.on("complete", function()
					{
						etc
					})
			} else {
				etc
			}
		}
		
	}
}
Inspiring
January 27, 2025

Thanks for the reply. I've changed the code to what you suggested, but now it won't play all three bits of audio. If I use this, for example, it will play, 'There is' and 'one' but then stops. The browser console says, 'undefined is not an object (evaluating audioRoot.onePlay.on).

I've tried different things in front of the variables - 'audioRoot' (defined at the top), 'root' (defined on a different page of code) and 'this', and also without anything, but I get the same error every time. Any thoughts?

{
audioRoot.thereIsPlay = createjs.Sound.play("thereIs")
				audioRoot.thereIsPlay.on("complete", function()
					{
						audioRoot.onePlay = createjs.Sound.play("one")
					})
				audioRoot.onePlay.on("complete", function()
					{
						audioRoot.letsPutPlay = createjs.Sound.play("letsPut");
					})
}

 

kglad
Community Expert
January 27, 2025

pinpoint which is undefined