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
  • 2335 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

Update:

I have tried using this code on the nested movieclip frames 10 and 50 with some success:

 

(Frame 10:)

var props = new createjs.PlayPropsConfig().set({interrupt: createjs.Sound.INTERRUPT_ANY, loop: 0, startTime: 0, duration: 2000})
createjs.Sound.play("SPsound1", props);

 

(Frame 50:)

var props = new createjs.PlayPropsConfig().set({interrupt: createjs.Sound.INTERRUPT_ANY, loop: 0, startTime: 0, duration: 2000})
createjs.Sound.play("SPsound2", props);

 

Each sound effect plays once when its respected frame is reached within the nested movieclip, HOWEVER, when I navigate within the main timeline, from frame 1 (where the nested movieclip is located) to frame 2, and then back to frame 1, both sound effects play instantly upon returning to frame 1 of the main timeline. Then, they play correctly as the nested movieclip plays (when frames 10 and 50 are reached within the nested movieclip). This is the same issue I was having with previous code attempts-- why are the sound effects playing instantly before their respective frames are reached within the nested movieclip? (Note, the nested movieclip is not even set play automatically– I have a button triggering its start.)

 

 

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