Skip to main content
Known Participant
August 21, 2022
Answered

Problem Play and Stop sound - Canvas

  • August 21, 2022
  • 1 reply
  • 889 views

Hi,

I don't quite understand something.

I have 2 sounds in a different frame. I would like my sound1 in the first frame to loop and starts automatically from the beginning.

My sound2 is in frame2. When you click on a button to go to frame2, sound2 starts.

When I go back to frame1 and mute the sound2, the sound1 also cuts out. 

While I would just like to mute the sound 2.

var sound1 = createjs.Sound.createInstance("music");
sound1.addEventListener("complete",completeF);
sound1.play();

function completeF(){
sound1.play();
}

var sound2 = createjs.Sound.createInstance("music2");
sound2.addEventListener("complete",completeF);
sound2.play();

function completeF(){
sound1.play();
}

this.closebutton.addEventListener("click", son);
function son () {
	createjs.Sound.stop("music2");
}

I also tried that :

var sound1 = createjs.Sound.createInstance("music");
sound1.addEventListener("complete",completeF);
sound1.play();

function completeF(){
sound1.play();
}

var sound2 = createjs.Sound.createInstance("music2");
sound2.addEventListener("complete",completeF);
sound2.play();

function completeF(){
sound2.play();
}
this.closebutton.addEventListener("click", son);
function son () {
	createjs.Sound.stop("music2");
}

but it does not change anything, sound1 cuts out too and I can't loop the sound1.

 

Thank you for your help.

    This topic has been closed for replies.
    Correct answer kglad

    I just tried but it doesn't work anymore.
    Nothing happens when button1 is clicked. It no longer goes to frame2.


     

    // frame 0 code:

    this.stop();

    //declaration sound1 and button1


    if(!this.defined1){
    this.sound1=createjs.Sound.createInstance("musique");
    this.sound1.addEventListener("complete",complete1F.bind(this));
    this.defined1=true;

    }

    function complete1F(){
    this.sound1.play();
    }

    this.un.addEventListener("click", fl_ClickToGoToAndStopAtFrame_3.bind(this));
    function fl_ClickToGoToAndStopAtFrame_3()
    {
    this.gotoAndStop(1);
    this.sound1.play();
    }

     

     

    // frame 1 code

    //return frame 0 and stop sound1

    this.deux.addEventListener("click", son.bind(this));
    function son () {
    this.sound2.stop();
    this.gotoAndStop(0);

    }

    //declaration sound2

    if(!this.defined2){
    this.sound2=createjs.Sound.createInstance("coeur");
    this.sound2.addEventListener("complete",complete2F.bind(this));
    this.defined2=true;

    }

    function complete2F(){
    this.sound2.play();

    }

    //button 3 and play sound2 frame2

    this.trois.addEventListener("click", fl_ClickToGoToAndStopAtFrame_5.bind(this));
    function fl_ClickToGoToAndStopAtFrame_5()
    {
    this.gotoAndStop(2);
    this.sound2.play();
    }

    1 reply

    kglad
    Community Expert
    Community Expert
    August 22, 2022

    1. in browsers, sounds/video can't start without user interaction (eg, a mouse click).  that's a browser setting (thankfully).

    2. anything prefixed with var (eg, sound1 and sound2) exists in the frame it is defined and not in other frames

    3. use this.sound1 and this.sound2 if you want those objects to exist in other frames

    4. if frames replay, you want to be careful not to overwrite variables (eg, this.sound1,this.sound2). eg, use:

     

    if(!this.defined){

    this.sound1=createjs.Sound.createInstance("music");

    this.defined=true;

    }

    5. if frames replay, you want to be careful to not duplicate listeners. eg:

     

    if(!this.defined){

    this.sound1=createjs.Sound.createInstance("music");

     

    sound1.addEventListener("complete",complete1F.bind(this));

     

    this.defined=true;

    }

     

    function complete1F(){
    this.sound1.play();
    }

     

    6. use different functions names for different functions. eg, complete1F() and complete2F().

     

    or use the same function but reference the object that has the listener:

     

    this.sound1.addEventListener("complete",completeF);

    this.sound2.addEventListener("complete",completeF);

     

    function complete(e){

    e.currentTarget.play();

    }

    kglad
    Community Expert
    Community Expert
    August 22, 2022

    and to mute this.sound2:

     

    this.closebutton.addEventListener("click", son.bind(this));
    function son () {
    	this.sound2.stop();
    }

     

    createjs.Sound.stop() is a static global function. ie, it stops all sounds.

     

    p.s. use the documentation to understand what you're doing, CreateJS | Docs

    Known Participant
    August 24, 2022

    Hello,

    thank you very much for your answer.

    When I go to frame 1 the sound is playing, it cuts out fine when returning to frame 0.
    But it does not play on a loop.
    And when we go to frame 2 the sound2 does not start, yet my function is different, isn't it ?

    this.stop();
    
    //declaration sound1 and button1
    
    if(!this.defined){
    this.sound1=createjs.Sound.createInstance("sound");
    this.defined=true;
    
    }
    
    function complete1F(){
    this.sound1.play();
    }
    
    this.button1.addEventListener("click", fl_ClickToGoToAndStopAtFrame_3.bind(this));
    function fl_ClickToGoToAndStopAtFrame_3()
    {
    	this.gotoAndStop(1);
    	this.sound1.play();
    }
    
    //return frame 0 and stop sound1
    
    this.button2.addEventListener("click", son.bind(this));
    function son () {
    	this.sound1.stop();
    	this.gotoAndStop(0);
    }
    
    //declaration sound2
    
    if(!this.defined){
    this.sound2=createjs.Sound.createInstance("sound2");
    this.defined=true;
    
    }
    
    function complete2F(){
    this.sound2.play();
    }
    
    //button 3 and play sound2 frame2
    
    this.button3.addEventListener("click", fl_ClickToGoToAndStopAtFrame_5.bind(this));
    function fl_ClickToGoToAndStopAtFrame_5()
    {
    	this.gotoAndStop(2);
    	this.sound2.play();
    }