Start / stop toggle button for an audio – HTML5

New Here ,
Nov 11, 2020 Nov 11, 2020

Copy link to clipboard

Copied

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. 

Views

98

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 ,
Nov 12, 2020 Nov 12, 2020

Copy link to clipboard

Copied

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

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
New Here ,
Nov 17, 2020 Nov 17, 2020

Copy link to clipboard

Copied

LATEST

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;

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