Skip to main content
SSSSSSBenay
SSSSSSBenay
Known Participant
December 4, 2019
Question

HTML5 Canvas: Method for calling Sound Effects no longer working

  • December 4, 2019
  • 1 reply
  • 2334 views

Hello,

This is my second post within the year about calling simple sound effects from within my Animate HTML5 Canvas project. My work is to create interactive children's lessons which involve a main timeline of 6 frames with navigation buttons allowing the user to cycle through the 6 frames forward and backward. On each of the 6 frames are numerous simple animations and interactive elements such as nested movieclips, buttons, drag and drop with targets, etc. Throughout the program I use very short sound effects which are played when certain frames are reached within my nested movieclips, or when a button is clicked, etc. Currently, I have been importing the .mp3s to my library, giving them a Linkage name in the library (i.e. "SELsound1"), and then using this code on the appropriate frame or in the appropriate function to play the sound effect:

 

createjs.Sound.play("SELsound1", false, 0, 0, 0, 1);

 

This had been working fine until my last update of Animate. (I am now using Animate 20.0). Now when I publish my HTML 5 Canvas document, the sound effects do not play and I get this error over and over: 

 

TypeError: undefined is not an object (evaluating 'd.startTime')

 

I simply do not understand the correct way of calling simple sound effects from my library using code on specific timline frames. After receiving the above error, I am attempting now to call sound effects with this code:

 

createjs.Sound.registerSound("sounds1/SPsound1.mp3", "RegSPsound1");

createjs.Sound.play("RegSPsound1");

 

This works the first time the timeline is cycled through forward, however when I used the navigational arrows to cycle backwards through my main timeline, all the sound effects called within each frame (even those late within the timeline of nested MovieClips on that frame) all play at once.

 

I should say that I have read documentation on SoundJS, I just do not understand it. Most the of examples I see include a function that plays the sound after fileload, but I want to play the sound when a certain frame is reached in a timeline, and perhaps the same sound effects on multiple timeline frames, not just once initially after the file has loaded:

 

createjs.Sound.on("fileload", handleLoad);
function handleLoad(){
createjs.Sound.play("RegSPsound1");
}
 

 This task was so easy to accomplish in Flash/AS3. Any guidance is appreciated. Thanks in advance...

This topic has been closed for replies.

1 reply

C
ClayUUID
Brainiac
December 4, 2019

Animate 2020 switched to CreateJS 1.0.0, which changed the syntax of the play method.

https://createjs.com/docs/soundjs/classes/Sound.html#method_play

 

SSSSSSBenay
SSSSSSBenayAuthor
Known Participant
December 4, 2019

Ok I beleive this is a start. But I am still very confused and not achieving what I'd like. What am I doing incorrectly?

 

I have a main timeline with 6 frames. On frame 1, I have a nested movieclip. On frame 10 of the nested movieclip I have placed this code:

 

createjs.Sound.on("fileload", handleLoad);
createjs.Sound.registerSound("sounds1/SPsound1.mp3", "RegSPsound1", 3);
function handleLoad(event) {
createjs.Sound.play("RegSPsound1");
// store off AbstractSoundInstance for controlling
var myInstance = createjs.Sound.play("RegSPsound1", {interrupt: createjs.Sound.INTERRUPT_ANY, loop:0});
}

 

This works fine the first time frame 10 of the movieclip is reached, however when I want to play a different sound effect on a later frame of that movieclip, I put this code again with a new ID and run into issues:

 

(For example, this code is in frame 50 of the same nested movieclip:)

createjs.Sound.on("fileload", handleLoad2);
createjs.Sound.registerSound("sounds1/SPsound2.mp3", "RegSPsound2", 3);
function handleLoad2(event) {
createjs.Sound.play("RegSPsound2");
// store off AbstractSoundInstance for controlling
var myInstance2 = createjs.Sound.play("RegSPsound2", {interrupt: createjs.Sound.INTERRUPT_ANY, loop:0});
}

 

What happens is BOTH sound effects play at the same time when frame 50 is reached.

 

Another issue: When I advance the main timeline to frame 2, and then return to play frame 1, neither sound effect plays the second time. 

SSSSSSBenay
SSSSSSBenayAuthor
Known Participant
December 4, 2019

.on() adds an event listener. If you only want it to fire once, you have to add true as fourth argument.

https://www.createjs.com/docs/easeljs/classes/EventDispatcher.html#method_on

 


ClayUUID I am not using .on() anywhere.

I am registering the sounds in frame 1 of my main timeline like this:

createjs.Sound.registerSound("sounds1/SPsound1.mp3", "RegSPsound1");
createjs.Sound.registerSound("sounds1/SPsound2.mp3", "RegSPsound2");

 

Then I am calling them from specific frames of a nested movieclip like this:

(Frame 10 within nestest movie clip:)

createjs.Sound.play("RegSPsound1");

 

(Frame 50 within nestest movie clip:)

createjs.Sound.play("RegSPsound2");

 

If the movieclip is only nested one level deep, all sound effects play simultaneously when the main timeline frame where the nested movieclip is located is returned to a second time. Then, each sound effect plays normally when its repsective frame within the nested movieclip is reached.

 

If I use the below code to call sound effects, there are many issues. 1.) It seems I can only call the sound effect one single time– when the file loads. When the user plays the nested movieclip twice, the second time no sound effects play. 2.) I am unable to call the same sound effect again in a different frame-- is this possible? 3.) When I try to add a different sound effect, on a new frame, using this code structure, both sound effects play instead of just the new sound effect-- why is that happening?

 

createjs.Sound.on("fileload", handleLoad);
createjs.Sound.registerSound("sounds1/SPsound5.mp3", "RegSPsound5", true);
function handleLoad(event) {
createjs.Sound.play("RegSPsound5");
// store off AbstractSoundInstance for controlling
var myInstance = createjs.Sound.play("RegSPsound5", {interrupt: createjs.Sound.INTERRUPT_ANY, loop:0});
}

 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices