Known Participant

Answered

Audio play, pause, stop button for audio in html5 canvas

Forum|Forum|4 years ago
September 19, 2021
2 replies
4930 views

I want to create a play, pause and stop button to control an audio file. But I don't want to place the file on stage and track the frames ( I can do that). Is there a way to use the "createJS" to control the audio through the linkage, not just stop and play but pause also to continue playing from where it was paused.

I would like to do it with using the audio component. But if it's the only way, I have been getting and erro while trying to add it to my components library.

This topic has been closed for replies.

Correct answer JoãoCésar17023019

OK.

Here is a sample.

Try it:

https://bit.ly/3lVBobE

JS / JavaScript code:

window.root = this;

root.AudioPlayer = function(props)
{
	this.target = props.target;
	this.soundLinkage = props.soundLinkage;
	this.playProps = props.playProps;
	this.target.on("click", this.onClick, this);
};

root.AudioPlayer.prototype.onClick = function(e)
{	
	if (this.target.playPauseButton.contains(e.target))
		this.toggle();
	else if (this.target.stopButton.contains(e.target))
		this.stop();
};

root.AudioPlayer.prototype.toggle = function()
{
	this.target.playPauseButton.gotoAndStop(this.target.playPauseButton.currentFrame + 1);
		
	if (this.target.playPauseButton.currentFrame === 0)
	{
		if (this.sound)
			this.sound.paused = true;
	}
	else
	{
		if (this.sound)
			this.sound.paused = false;
		else
			this.sound = createjs.Sound.play(this.soundLinkage, this.playProps);
	}
};

root.AudioPlayer.prototype.stop = function()
{
	if (this.sound)
	{
		this.sound.stop();
		this.sound = null;
		this.target.playPauseButton.gotoAndStop(0);
	}
};

root.main = function()
{
	document.body.style.backgroundColor = lib.properties.color;
	createjs.Touch.enable(stage);
	
	root.audioPlayer0 = new root.AudioPlayer({ target: root.player0, soundLinkage: "Song0", playProps: { volume: 0.1 } });
	root.audioPlayer1 = new root.AudioPlayer({ target: root.player1, soundLinkage: "Song1" });
	root.audioPlayer2 = new root.AudioPlayer({ target: root.player2, soundLinkage: "Song2" });
};

root.main();

FLA / source / files / download:

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

I hope it helps.

Regards,

JC

JoãoCésar17023019

Correct answer

Community Expert

OK.

Here is a sample.

Try it:

https://bit.ly/3lVBobE

JS / JavaScript code:

window.root = this;

root.AudioPlayer = function(props)
{
	this.target = props.target;
	this.soundLinkage = props.soundLinkage;
	this.playProps = props.playProps;
	this.target.on("click", this.onClick, this);
};

root.AudioPlayer.prototype.onClick = function(e)
{	
	if (this.target.playPauseButton.contains(e.target))
		this.toggle();
	else if (this.target.stopButton.contains(e.target))
		this.stop();
};

root.AudioPlayer.prototype.toggle = function()
{
	this.target.playPauseButton.gotoAndStop(this.target.playPauseButton.currentFrame + 1);
		
	if (this.target.playPauseButton.currentFrame === 0)
	{
		if (this.sound)
			this.sound.paused = true;
	}
	else
	{
		if (this.sound)
			this.sound.paused = false;
		else
			this.sound = createjs.Sound.play(this.soundLinkage, this.playProps);
	}
};

root.AudioPlayer.prototype.stop = function()
{
	if (this.sound)
	{
		this.sound.stop();
		this.sound = null;
		this.target.playPauseButton.gotoAndStop(0);
	}
};

root.main = function()
{
	document.body.style.backgroundColor = lib.properties.color;
	createjs.Touch.enable(stage);
	
	root.audioPlayer0 = new root.AudioPlayer({ target: root.player0, soundLinkage: "Song0", playProps: { volume: 0.1 } });
	root.audioPlayer1 = new root.AudioPlayer({ target: root.player1, soundLinkage: "Song1" });
	root.audioPlayer2 = new root.AudioPlayer({ target: root.player2, soundLinkage: "Song2" });
};

root.main();

FLA / source / files / download:

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

I hope it helps.

Regards,

JC

R

renanmdAuthor

Known Participant

Hi @JoãoCésar17023019 thank you for the reply and sample code. But I tried doing something simpler and my pause button doesn't work. The play and stop are fine. Would you mind helping me out again?

This is my code:

var root = this;

root.stop();

root.btnPlay.addEventListener("click", playSong1);

root.btnPause.addEventListener("click", pauseSong1);

root.btnStop.addEventListener("click", stopSong1);

function playSong1() {

createjs.Sound.play("SongToPlay1")

}

function pauseSong1() {

createjs.Sound.paused = true;

}

function stopSong1() {

createjs.Sound.stop();

}

The second function "pauseSong1" is the one that's not working. I even opened the developer console in the browser to see if there were any errors with no luck.

Nancy OShea

Community Expert

Web browsers natively support the <audio> tag with ordinary HTML code.

Nancy O'Shea— Product User & Community Expert

JoãoCésar17023019

Community Expert

Hi.

This audio component has been created by @Joseph Labrecque. Hopefully he can help you on this.

Components in Animate are not canvas/CreateJS based. They are DOM based and rely on jQuery to work.

Please let me know if you need a canvas/CreateJS based example.

Regards,

JC

R

renanmdAuthor

Known Participant

I don't have to use the audio component I mentioned. I just want to be able to control the audio (play, pause, stop) but not having to put the audio in the time line and use frames numbers to control it. Is there a way of doing this? I would be fine with a canvas/CreateJS based example.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded