javascript - SoundJS music clips should toggle each other on/off -

i have bunch of sounds on page, similar sound grid example. of these tracks music tracks , i'd treat them differently. of sounds can play on each other , intent, however, no music track should able play on music track. think radio buttons.

i've got woolly code detects if other track playing when clicked , stops track, , switches track's css (play icons , such). now, adding 3rd or 4th track mix becomes unruly.

sounds loaded , stored in hash of reusable sound instances like:

  mysounds["sound1"]= createjs.sound.createinstance("sound1");   ... 

when button in html clicked on (i'm not using data-type attribute, earlier attempt thought might useful):

    <button type="button" class="btn btn-vol btn-sm" data-type="music" data-track="music1" onclick="play(this)">     <span class="glyphicon glyphicon-play bplay"></span></button> 

i do:

function play(target) {      //define stuff html     musictrack = $(target).attr('data-track');     music1 = $('button[data-track="music1"]');     music2 = $('button[data-track="music2"]');     myinstance = mysounds[id] //id defined elsewhere      toggle = $(target).find('span.bplay'); //this have play/pause icons      //for cases, not music find play icon , swap it.     if(toggle.hasclass('glyphicon-play')){ //the sound ready play. if had stop icon mean playing      toggle.removeclass('glyphicon-play');     toggle.addclass('glyphicon-stop')      //special case music tracks     if(musictrack == "music1") { //if clicked on music track 1         if(mysounds[musictrack2].position !=0){ //if isn't 0, it's playing!             music2.find('span.bplay).removeclass('glyphicon-stop');             music2.find('span.bplay').addclass('glyphicon-play');             mysounds[musictrack2].stop();         }         else {             //do nothing because track 2 isn't playing         }      } else if (musictrack=="music2"){ //if clicked on music track 2         if(mysounds[musictrack2].position !=0){             music1.find('span.bplay').removeclass('glyphicon-stop');             music1.find('span.bplay').addclass('glyphicon-play');             mysounds[musictrack1].stop();         }         else {             //do nothing because track 1 isn't playing         }          myinstance.play(); // play clicked on instance       }     else {         //if glyphicon not play (says stop) stop sound etc..         toggle.removeclass('glyphicon-stop');         toggle.addclass('glyphicon-play');         myinstance.stop();     } } 

i haven't checked above syntax copied hand code, keeping relevant bits, works. click on music1, if music 2 isn't playing - plays. if music 2 playing, stops music 2, switches it's stop icon play , plays music 1. actual code tweening of sounds before stops crossfade nicely.

i'm not programmer i'd love able in more efficient/elegant manner. surely there way!

a better way give music buttons different click handling function, , using app / global variable track playing music. use icon determine behavior. you'd need add way playing music, possible variable. this:

var currentmusic;  function playmusic(target) {  //define stuff html musictrack = $(target).attr('data-track'); myinstance = mysounds[id]; //id defined elsewhere  toggle = $(target).find('span.bplay'); //this have play/pause icons  //for cases, not music find play icon , swap it. if(toggle.hasclass('glyphicon-stop')){      toggle.removeclass('glyphicon-stop');     toggle.addclass('glyphicon-play');     currentmusic = null;     myinstance.stop(); } else {     if(currentmusic) {       // current instance , call stop       currentmusic.addclass('glyphicon-play');       currentmusic.removeclass('glyphicon-stop');     }     toggle.removeclass('glyphicon-play');     toggle.addclass('glyphicon-stop');     currentmusic = toggle;     myinstance.play();     } }