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.
OK.
Here is a sample.
Try it:
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
...
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
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.
Copy link to clipboard
Copied
OK.
Here is a sample.
Try it:
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
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:
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>
Copy link to clipboard
Copied
But this is JS in html5 canvas.