Participant

Answered

Start / stop toggle button for an audio – HTML5

3 replies
1181 views
Translate

Hello. I'm trying to create a start / stop toggle button for an audio file within adobe animate using html5. I have the audio starting on the down state, but I'm not sure how to have the second click (on the same button) stop the audio. I'm new to animate and I have seen similar threads on how to do this with actions/code snippets but I don't have the knowledge to apply to my project. Any help is appreciated.

Best.

This topic is closed to new replies. Start a new post to keep the conversation going.

A

Andre32352697b9piCorrect answer

Participant

Thank you, this helped me for a current project! xx

kglad

Community Expert

using a toggle/boolean variable is the typical way to solve to problem:

if(!yourbutton.hasEventListener("click")){

this.toggle = false;

yourbutton.addEventListener("click",f.bind(this));

}

function f(){

if(!this.toggle){

// play() your sound

} else {

// stop() your sound - use the same code as your play method but replace play() with stop();

}

this.toggle = !this.toggle; // toggle it

}

p.s. if that's too abstract for you to apply, show the code you're using for play sound button

Translate

christinew70028637Author

Participant

Hi. Thanks for the response! I've been doing some research and watching tutorials to try to understand this but it's a bit over my head. I've pasted the js file that exports when testing. Not sure if this is the code you need? The buttons that I have playing sound are (btnWaterWV) (btnWaterBRButton) and (btnWaterBLButton).

Thanks for the help!

(function (cjs, an) {

var p; // shortcut to reference prototypes
var lib={};var ss={};var img={};
lib.ssMetadata = [
{name:"test_atlas_1", frames: [[0,0,1920,1488]]}
];

(lib.AnMovieClip = function(){
this.actionFrames = [];
this.gotoAndPlay = function(positionOrLabel){
cjs.MovieClip.prototype.gotoAndPlay.call(this,positionOrLabel);
}
this.play = function(){
cjs.MovieClip.prototype.play.call(this);
}
this.gotoAndStop = function(positionOrLabel){
cjs.MovieClip.prototype.gotoAndStop.call(this,positionOrLabel);
}
this.stop = function(){
cjs.MovieClip.prototype.stop.call(this);
}
}).prototype = p = new cjs.MovieClip();
// symbols:

(lib.artworkingallery = function() {
this.initialize(ss["test_atlas_1"]);
this.gotoAndStop(0);
}).prototype = p = new cjs.Sprite();

(lib.btnWaterWV = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = true; }
if (reversed == null) { reversed = false; }
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this,[props]);

// timeline functions:
this.frame_2 = function() {
playSound("Waterwestvan");
}

// actions tween:
this.timeline.addTween(cjs.Tween.get(this).wait(2).call(this.frame_2).wait(1));

// Colour
this.shape = new cjs.Shape();
this.shape.graphics.f("rgba(236,236,236,0.639)").s().p("AiNCNQg6g6AAhTQAAhSA6g7QA7g6BSAAQBTAAA6A6QA7A7AABSQAABTg7A6Qg6A7hTAAQhSAAg7g7g");
this.shape.setTransform(20,20);

this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#FF00CC").s().p("AiNCNQg6g6AAhTQAAhSA6g7QA7g6BSAAQBTAAA6A6QA7A7AABSQAABTg7A6Qg6A7hTAAQhSAAg7g7g");
this.shape_1.setTransform(20,20);

this.shape_2 = new cjs.Shape();
this.shape_2.graphics.f("#66FFFF").s().p("AiNCNQg6g6AAhTQAAhSA6g7QA7g6BSAAQBTAAA6A6QA7A7AABSQAABTg7A6Qg6A7hTAAQhSAAg7g7g");
this.shape_2.setTransform(20,20);

this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape}]}).to({state:[{t:this.shape_1}]},1).to({state:[{t:this.shape_2}]},1).wait(1));

this._renderFirstFrame();

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,40,40);

(lib.btnWaterBRButton = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = true; }
if (reversed == null) { reversed = false; }
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this,[props]);

// timeline functions:
this.frame_2 = function() {
playSound("Waterthirdbeach");
}

// actions tween:
this.timeline.addTween(cjs.Tween.get(this).wait(2).call(this.frame_2).wait(1));

// Colour
this.shape = new cjs.Shape();
this.shape.graphics.f("rgba(236,236,236,0.639)").s().p("AiNCNQg6g6AAhTQAAhSA6g7QA7g6BSAAQBTAAA6A6QA7A7AABSQAABTg7A6Qg6A7hTAAQhSAAg7g7g");
this.shape.setTransform(20,20);

this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#FF00CC").s().p("AiNCNQg6g6AAhTQAAhSA6g7QA7g6BSAAQBTAAA6A6QA7A7AABSQAABTg7A6Qg6A7hTAAQhSAAg7g7g");
this.shape_1.setTransform(20,20);

this.shape_2 = new cjs.Shape();
this.shape_2.graphics.f("#66FFFF").s().p("AiNCNQg6g6AAhTQAAhSA6g7QA7g6BSAAQBTAAA6A6QA7A7AABSQAABTg7A6Qg6A7hTAAQhSAAg7g7g");
this.shape_2.setTransform(20,20);

this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape}]}).to({state:[{t:this.shape_1}]},1).to({state:[{t:this.shape_2}]},1).wait(1));

this._renderFirstFrame();

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,40,40);

(lib.btnWaterBLButton = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = true; }
if (reversed == null) { reversed = false; }
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this,[props]);

// timeline functions:
this.frame_2 = function() {
playSound("Waterthirdbeachdrums");
}

// actions tween:
this.timeline.addTween(cjs.Tween.get(this).wait(2).call(this.frame_2).wait(1));

// Colour
this.shape = new cjs.Shape();
this.shape.graphics.f("rgba(236,236,236,0.639)").s().p("AiNCNQg6g6AAhTQAAhSA6g7QA7g6BSAAQBTAAA6A6QA7A7AABSQAABTg7A6Qg6A7hTAAQhSAAg7g7g");
this.shape.setTransform(20,20);

this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#FF00CC").s().p("AiNCNQg6g6AAhTQAAhSA6g7QA7g6BSAAQBTAAA6A6QA7A7AABSQAABTg7A6Qg6A7hTAAQhSAAg7g7g");
this.shape_1.setTransform(20,20);

this.shape_2 = new cjs.Shape();
this.shape_2.graphics.f("#66FFFF").s().p("AiNCNQg6g6AAhTQAAhSA6g7QA7g6BSAAQBTAAA6A6QA7A7AABSQAABTg7A6Qg6A7hTAAQhSAAg7g7g");
this.shape_2.setTransform(20,20);

this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape}]}).to({state:[{t:this.shape_1}]},1).to({state:[{t:this.shape_2}]},1).wait(1));

this._renderFirstFrame();

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,40,40);

// stage content:
(lib.test = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = true; }
if (reversed == null) { reversed = false; }
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this,[props]);

this.actionFrames = [0];
this.isSingleFrame = false;
// timeline functions:
this.frame_0 = function() {
if(this.isSingleFrame) {
return;
}
if(this.totalFrames == 1) {
this.isSingleFrame = true;
}
if(!btnWaterDrums.hasEventListener("click")){

this.toggle = false;

btnWaterDrums.addEventListener("click",f.bind(this));

}

function f(){

if(!this.toggle){

// play() your sound

} else {

// stop() your sound - use the same code as your play method but replace play() with stop();

}

this.toggle = !this.toggle; // toggle it

}
}

// actions tween:
this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(1));

// Watter_WV
this.instance = new lib.btnWaterWV();
this.instance.setTransform(335,191.95);
new cjs.ButtonHelper(this.instance, 0, 1, 2);

this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

// Water_TB2
this.btnWaterDrums = new lib.btnWaterBLButton();
this.btnWaterDrums.name = "btnWaterDrums";
this.btnWaterDrums.setTransform(279,487.35);
new cjs.ButtonHelper(this.btnWaterDrums, 0, 1, 2);

this.timeline.addTween(cjs.Tween.get(this.btnWaterDrums).wait(1));

// Water_TB
this.instance_1 = new lib.btnWaterBRButton();
this.instance_1.setTransform(697.2,409.15,1,1,0,0,0,20,20);
new cjs.ButtonHelper(this.instance_1, 0, 1, 2);

this.timeline.addTween(cjs.Tween.get(this.instance_1).wait(1));

// Artwork
this.instance_2 = new lib.artworkingallery();
this.instance_2.setTransform(-92,-116,0.6212,0.6212);

this.timeline.addTween(cjs.Tween.get(this.instance_2).wait(1));

this._renderFirstFrame();

}).prototype = p = new lib.AnMovieClip();
p.nominalBounds = new cjs.Rectangle(420,268,680.7,540.4);
// library properties:
lib.properties = {
id: 'E862467D82E242A18B99C9ADE6964F6B',
width: 1024,
height: 768,
fps: 24,
color: "#FFFFFF",
opacity: 1.00,
manifest: [
{src:"images/test_atlas_1.png?1605679842905", id:"test_atlas_1"},
{src:"sounds/Waterthirdbeachdrums.mp3?1605679842929", id:"Waterthirdbeachdrums"},
{src:"sounds/Waterthirdbeach.mp3?1605679842929", id:"Waterthirdbeach"},
{src:"sounds/Waterwestvan.mp3?1605679842929", id:"Waterwestvan"}
],
preloads: []
};

// bootstrap callback support:

(lib.Stage = function(canvas) {
createjs.Stage.call(this, canvas);
}).prototype = p = new createjs.Stage();

p.setAutoPlay = function(autoPlay) {
this.tickEnabled = autoPlay;
}
p.play = function() { this.tickEnabled = true; this.getChildAt(0).gotoAndPlay(this.getTimelinePosition()) }
p.stop = function(ms) { if(ms) this.seek(ms); this.tickEnabled = false; }
p.seek = function(ms) { this.tickEnabled = true; this.getChildAt(0).gotoAndStop(lib.properties.fps * ms / 1000); }
p.getDuration = function() { return this.getChildAt(0).totalFrames / lib.properties.fps * 1000; }

p.getTimelinePosition = function() { return this.getChildAt(0).currentFrame / lib.properties.fps * 1000; }

an.bootcompsLoaded = an.bootcompsLoaded || [];
if(!an.bootstrapListeners) {
an.bootstrapListeners=[];
}

an.bootstrapCallback=function(fnCallback) {
an.bootstrapListeners.push(fnCallback);
if(an.bootcompsLoaded.length > 0) {
for(var i=0; i<an.bootcompsLoaded.length; ++i) {
fnCallback(an.bootcompsLoaded[i]);
}
}
};

an.compositions = an.compositions || {};
an.compositions['E862467D82E242A18B99C9ADE6964F6B'] = {
getStage: function() { return exportRoot.stage; },
getLibrary: function() { return lib; },
getSpriteSheet: function() { return ss; },
getImages: function() { return img; }
};

an.compositionLoaded = function(id) {
an.bootcompsLoaded.push(id);
for(var j=0; j<an.bootstrapListeners.length; j++) {
an.bootstrapListeners[j](id);
}
}

an.getComposition = function(id) {
return an.compositions[id];
}

an.makeResponsive = function(isResp, respDim, isScale, scaleType, domContainers) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
domContainers[0].width = w * pRatio * sRatio;
domContainers[0].height = h * pRatio * sRatio;
domContainers.forEach(function(container) {
container.style.width = w * sRatio + 'px';
container.style.height = h * sRatio + 'px';
});
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
stage.tickOnUpdate = false;
stage.update();
stage.tickOnUpdate = true;
}
}
an.handleSoundStreamOnTick = function(event) {
if(!event.paused){
var stageChild = stage.getChildAt(0);
if(!stageChild.paused){
stageChild.syncStreamSounds();
}
}
}

})(createjs = createjs||{}, AdobeAn = AdobeAn||{});
var createjs, AdobeAn;

Translate

A

Andre32352697b9piCorrect answer

Participant

Thank you, this helped me for a current project! xx

Translate

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.