All audio plays at once

[pauls73381349]

Hi. I am making a child's game in Animate on an HTML5 canvas. There are three scenes and each scene has buttons which play audio. This all works fine until I revisit a scene - then all the audio plays at once without any intervention. Why is this happening?

This is an example of the code for the audio:

let audio1Playing = false
let audio2Playing = false
let audio3Playing = false

function init(){
	
	var assetPath = "sounds/";
	var sounds = [
		{src:"audio1.mp3", id:"audio1"},
		{src:"audio2.mp3", id:"audio2"},
		{src:"audio3.mp3", id:"audio3"}
	]	
	
	var preload = new createjs.LoadQueue()
	preload.addEventListener("fileload", handleFileComplete)
	preload.loadFile (assetPath)
	
	function handleFileComplete(event){
		
		createjs.Sound.registerSounds(sounds, assetPath)
		audio1Play = createjs.Sound.play("audio1")
		audio2Play = createjs.Sound.play("audio2")
		audio3Play = createjs.Sound.play("audio3")
		
	}

	root.play_btn.addEventListener("click", playAudio1.bind(this));

	function playAudio1 () {
		
		if(!audio1Playing){
			audio1Play.play()
			audio1Playing = true
		} else {
			audio1Play.stop()
			audio1Playing = false
		}

	}
}

init()

As I say, this works fine one the first pass, but as soon as I navigate back to the initial frame, all the audio starts playing at once. How do I stop this happening, please?

[kglad]

open your developer console and check for errors.  if you don't understand how to use the developer console, watch:

lesson 1 - https://youtu.be/PBDQN9CQSeI

lesson 2 - https://youtu.be/KJEl0OenGUY

[Nicktendo28]

Nice tutorials Kglad!

[kglad]

captivate in action!

[pauls73381349]

Hi. Thanks, but the console is not showing any errors. I think the problem has something to do with the fact that I'm returning to a screen that has already run the code once. Does it need to be reset in some way? I tried putting the code on the second frame and telling the game to gotoAndPlay the first frame, so that it has a run up to it, but that didn't change anything.

[kglad]

@pauls73381349 

for code that you don't want repeated when a frame is re-entered, use

if(!this.alreadyExecuted){

this.alreadyExecuted=true;

// code to execute once only

}

[JoãoCésar]

Hi.

Actually your sounds should all be playing in the beginning, but browsers nowadays prevent audio playback if the user doesn't interact with the tab/page at least once. That's the reason I think you don't get the problem in the first time.

Also I think it's easier if you add the sounds to the Library, give them linkage names and don't worry about loading them manually.

Here is an example.

Try it:

https://bit.ly/42zpZSB

Javascript / code:

function main()
{
	if (!root.frame0Started)
	{
		root.stop();
		root.loop = false;
		root.currentAudio = undefined;
		root.yourButton0.on("click", playAudio, null, false, { libLinkage: "YourSound0", props: { volume: 0.1 } });
		root.yourButton1.on("click", playAudio, null, false, { libLinkage: "YourSound1", props: { volume: 0.2 } });
		root.yourButton2.on("click", playAudio, null, false, { libLinkage: "YourSound2", props: { volume: 0.1 } });
		root.yourButton3.on("click", playAudio, null, false, { libLinkage: "YourSound3", props: { volume: 0.3 } });
		root.yourButton4.on("click", playAudio, null, false, { libLinkage: "YourSound4", props: { volume: 0.1 } });
		root.yourButton5.on("click", playAudio, null, false, { libLinkage: "YourSound5", props: { volume: 0.4 } });
		root.on("click", navigate);
		root.frame0Started = true;
	}
}

function playAudio(e, data)
{
	stopAudio();
	root.currentAudio = createjs.Sound.play(data.libLinkage, data.props);
}

function stopAudio()
{
	if (root.currentAudio)
	{
		root.currentAudio.stop();
		root.currentAudio = null;
	}
}

function navigate(e)
{
	if (e.target.name === "prevButton")
	{
		stopAudio()
		root.gotoAndStop(root.currentFrame - 1);
	}
	else if (e.target.name === "nextButton")
	{
		stopAudio()
		root.gotoAndStop(root.currentFrame + 1);
	}
}

window.root = this;
main();

Download / files / source / FLA:

https://bit.ly/3nBHHpP

I hope it helps.

Regards,

JC

[pauls73381349]

Thanks - this has been really helpful. I can now navigate back to the original frame without everything playing. However, in my game, the audio plays when I click the play button, the play button changes from the 'play' triangle to the 'stop' square, and the audio stops and resets when I click the 'stop' square (i.e. re-click the play button). The 'play' triangle and the 'stop' square are two different frames in a single movieclip called play_btn, which in turn is inside a different box for each character.

So, for example, one of the boxes is called doctorTextbox_mc and the play button is doctorTextbox_mc.play_btn.

At the moment, using the code you gave me (edited for my movieclips and audio), the button starts the audio and changes to the 'stop' square, but clicking again just restarts the audio and the button doesn't return to the 'play' triangle.

In my original code, once I'd declared all the audio, I had a different eventlistener for each button that did this:

root.doctorTextbox_mc.play_btn.addEventListener("click", doctorAudio.bind(this));

function doctorAudio () {
		
	if(!doctorPlaying){
		doctorPlay.play()
		root.doctorTextbox_mc.play_btn.gotoAndStop(4)
		doctorPlaying = true
	} else {
		doctorPlay.stop()
		root.doctorTextbox_mc.play_btn.gotoAndStop(0)
		doctorPlaying = false
	}

}

In yours, one function is used for all the play buttons. Is there a way to do stop the audio and change the play button when clicked again, please?

[JoãoCésar · Accepted solution]

Hi.

I'm glad that worked!

Please check out these examples of how to deal with sound channels/properties and toggle behavior for buttons.

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/narrated_story
https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/toggle_animation

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/simple_sound_controls

Please let us know if you need further assistance.

Regards,

JC

[pauls73381349]

This has mostly worked, thanks. I've adapted the code from the third link and I've got it working in my game for the first screen (six audio files), but when I go to the second screen (five audio files), only one of the files plays.

For the second screen, I just copied and pasted the code from the first screen and replaced the file names with the new names, so it should work exactly the same. I'm assuming there isn't a maximum of seven files allowed?

I've imported all the audio files and given them linkage names, so I'm a bit confused. Here's the code for the audio - I've had to adapt it a bit for my purposes:

root.audioPlayer = function(props)
{
	this.target = props.target;
	this.soundLinkage = props.soundLinkage;
	this.playProps = props.playProps;
	this.target.on("click", this.onClick1, this);
	this.target.on("click", this.onClick2, this);
};

root.audioPlayer.prototype.onClick1 = function(e)
{	
	if (this.target.play_btn.contains(e.target))
		this.toggle();
};

root.audioPlayer.prototype.onClick2 = function(e)
{	
	if (this.target.close_btn.contains(e.target))
		this.closeTextbox();
};

root.audioPlayer.prototype.toggle = function()
{
	this.target.play_btn.gotoAndStop(this.target.play_btn.currentFrame + 1);
		
	if (this.target.play_btn.currentFrame === 0)
	{
		if (this.sound)
			this.sound.stop();
			this.sound = null;
			this.target.play_btn.gotoAndStop(0);
	}
	else
	{
		this.sound = createjs.Sound.play(this.soundLinkage, this.playProps);
	}
};

root.audioPlayer.prototype.closeTextbox = function()
{
	this.target.visible = false
	root.transparency_mc.visible = false
	if (this.sound)
		this.sound.stop();
		this.sound = null;
		this.target.play_btn.gotoAndStop(0);
}

root.main = function()
{
	document.body.style.backgroundColor = lib.properties.color;
	createjs.Touch.enable(stage);
	
	root.teacherPlay = new root.audioPlayer({ target: root.teacherTextbox_mc, soundLinkage: "teacher" });
	root.vicarPlay = new root.audioPlayer({ target: root.vicarTextbox_mc, soundLinkage: "vicar" });
	root.farmerPlay = new root.audioPlayer({ target: root.farmerTextbox_mc, soundLinkage: "farmer" });
	root.lifeguardPlay = new root.audioPlayer({ target: root.lifeguardTextbox_mc, soundLinkage: "lifeguard" });
	root.mechanicPlay = new root.audioPlayer({ target: root.mechanicTextbox_mc, soundLinkage: "mechanic" });
};

root.main();

The lifeguard audio works as expected, but none of the others. Any ideas what's going on? Thanks again, for your help.

[pauls73381349]

Never mind, I've sorted it. For some reason, it didn't like half of the linkage names. When I put a '1' at the end of each one, they all worked. Maybe it's a bug?

The game's finished now - thanks for all your help.