Start / stop toggle button for an audio – HTML5

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;