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

Community Beginner ,
Sep 19, 2021 Sep 19, 2021

Copy link to clipboard

Copied

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.


TOPICS
Code , Download and install , Error , How to , Missing feature

Views

1.3K

Likes

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

Adobe Community Professional , Sep 23, 2021 Sep 23, 2021

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.Audio
...

Likes

Translate

Translate
Adobe Community Professional ,
Sep 20, 2021 Sep 20, 2021

Copy link to clipboard

Copied

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

Likes

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 Beginner ,
Sep 22, 2021 Sep 22, 2021

Copy link to clipboard

Copied

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.

Likes

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
Adobe Community Professional ,
Sep 23, 2021 Sep 23, 2021

Copy link to clipboard

Copied

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

Likes

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 Beginner ,
Oct 03, 2021 Oct 03, 2021

Copy link to clipboard

Copied

Hi @JoãoCésar 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.

Likes

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
Adobe Community Professional ,
Oct 03, 2021 Oct 03, 2021

Copy link to clipboard

Copied

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

 

<audio controls>
<source src="horse.mp3" type="audio/mpeg">
</audio>

 

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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 Beginner ,
Oct 05, 2021 Oct 05, 2021

Copy link to clipboard

Copied

LATEST

But this is JS in html5 canvas.

Likes

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