All audio plays at once

Forum|Forum|2 years ago
May 5, 2023
2 replies
1635 views

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?

This topic has been closed for replies.

Correct answer JoãoCésar17023019

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

JoãoCésar17023019

Community Expert

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

P

pauls73381349Author

Inspiring

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?