• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

All audio plays at once

Explorer ,
May 05, 2023 May 05, 2023

Copy link to clipboard

Copied

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?

TOPICS
Code , How to , Timeline

Views

822

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , May 09, 2023 May 09, 2023

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

 

Votes

Translate

Translate
Community Expert ,
May 05, 2023 May 05, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 05, 2023 May 05, 2023

Copy link to clipboard

Copied

Nice tutorials Kglad!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 05, 2023 May 05, 2023

Copy link to clipboard

Copied

captivate in action!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 08, 2023 May 08, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 08, 2023 May 08, 2023

Copy link to clipboard

Copied

@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

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 08, 2023 May 08, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 09, 2023 May 09, 2023

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 09, 2023 May 09, 2023

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 10, 2023 May 10, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 11, 2023 May 11, 2023

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines