• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

622

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

Community Beginner , Oct 31, 2023 Oct 31, 2023

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

Votes

Translate

Translate
Community Expert ,
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

Votes

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

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;

Votes

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 31, 2023 Oct 31, 2023

Copy link to clipboard

Copied

LATEST

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

Votes

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