How to control audio in Animate CC

[rahimhaji]

Dear Friends,

please tell me the ways to control audio sounds (voice over sink) in Animate CC. Iam converting my flash elearning lessons in to html5 with Animate CC. In my flash lessons I have voice over as stream and animation is sinking with voice over.

Kindly help me to convert this lessons....Thanks in Advance,

Thanks and Regards,

Syed Abdul Rahim

[kglad]

you'll need to play your sound using easeljs, create a loop and use the sound's position property to determine what to display.

[rahimhaji]

Dear Mr.kglad,

Greetings! thks for ur info. Can u pls send me a sample code? is it possible to pause and play a sound in animate CC? here I tried with time line import of audio, in my lesson, sound is finishing fast, animation coming later.. no voice over sync... pls advice me, or send me a sample code.

Thanks and Regards,

Syed Abdul Rahim

[kglad]

yes, you can pause and play (google soundjs api) and here's how to sync your sound and display:

createjs.Sound.addEventListener("fileload", loadedF.bind(this));

createjs.Sound.registerSound("yoursound.mp3", "sound_id");

var prop;

var sound;

function loadedF(e) {

sound = createjs.Sound.play("sound_id");

createjs.Ticker.addEventListener("tick", tickF);

}

function tickF(e) {

// display whatever based on sound.position;

}

[rahimhaji]

Dear Mr.kglad,

Greetings! thks for ur help. its working well. I tried like following:

createjs.Sound.addEventListener("fileload", loadedF.bind(this));

createjs.Sound.registerSound("mysound.mp3", "sound_id");

var prop;
var sound;

function loadedF(e) {

sound = createjs.Sound.play("sound_id");

createjs.Ticker.addEventListener("tick", tickF);

}

this.box1.addEventListener("click",boxclick1);
function boxclick1(e){
sound.play();
}

this.box2.addEventListener("click",boxclick2);
function boxclick2(e){
sound.pause();
}

function tickF(e) {

}

Here play is working pause is not working. I want to sync my vo with my key frame animation. for example when it reaches 100 frame it has to stop of read particular position of sound. Please tell me how can I do this... send me ur sample code...

Thanks in advance,

Syed Abdul Rahim

[kglad]

what's the framerate of your animation that's supposed to sync with your sound?

[rahimhaji]

hi Mr.kglad,

my frame rate is 24 frm.

[kglad]

function tickF(e) {

// display whatever based on sound.position;

your_movieclip.gotoAndStop(ms_to_frameF(sound.position));

}

function ms_to_frameF(ms){

return Math.ceil(24*ms/1000);

}

[rahimhaji]

Thks Mr.kglad,

Please tell me how can I load multiple sounds and play each whenever necessary. My I dear is cut each vo as separate sound, and play whenever it need to play.

Thanks in advance....

Thanks and Regards,

Syed Abdul Rahim

[kglad]

to load multiple sounds:

var path = "./";

var sounds = [{src:"sound1.mp3", id:"sound1_id"},{src:"sound2.mp3", id:"sound2_id"}];

createjs.Sound.addEventListener("fileload", loadedF.bind(this));

createjs.Sound.registerSounds(sounds, path);

function loadedF(e) {

sound1 = createjs.Sound.play("sound1_id");

createjs.Ticker.addEventListener("tick", tickF);

}

function tickF(e) {

// display whatever based on sound.position;

// use sound2 = createjs.Sound.play("sound2_id");  // whenever

}

[rahimhaji]

Thks Mr.kglad,

I want to do play pause or play from a particular position in order to do voice sync.... I followed ur previous reply...

function tickF(e) {

// display whatever based on sound.position;

your_movieclip.gotoAndStop(ms_to_frameF(sound.position));

}

function ms_to_frameF(ms){

return Math.ceil(24*ms/1000);

}

but in a movieclip I put my sound, then made as gotoAndStop(ms_to_frame) but how come it will play a sound, in canvas sound stream has been removed, only event is existing?

possible send me one sample for play pause a sound volume control and voiceover sync options.

Thanks in advance,

Syed Abdul Rahim

[rahimhaji]

Dear Mr.Kglad,

Thks for ur code to load multiple sounds.. I used the following code:

var path = "./assets/";
var sounds = [{ src: "aircraft.mp3", id: "sound1_id"}, { src: "cabin.mp3",id: "sound2_id" }];

createjs.Sound.addEventListener("fileload", loadedF.bind(this));

createjs.Sound.registerSounds(sounds, path);

function loadedF(e) {
alert("sound loaded");
createjs.Sound.play("sound1_id");
createjs.Ticker.addEventListener("tick", tickF);
}

function tickF(e) {
// display whatever based on sound.position;
// use sound2 = createjs.Sound.play("sound2_id");  // whenever
}

It loads only first sound, 2nd sound is not playing.. for example if I give like

createjs.Sound.play("sound2_id");

it wont play sound 2.

please help me to fix this...

Thanks and Regards,

Syed Abdul Rahim

[kglad]

recheck your /assets/cabin.mp3 path/file name.

[rahimhaji]

I checked Mr.kglad, its available, and sound also in good working condition.... when I use above code it plays only 1st sound... 2nd sound is not playing.

even I change the code with exchanging the sound names it plays sound called cabin. pls refer the below code:

var path = "./assets/";
var sounds = [{ src: "cabin.mp3", id: "sound1_id"}, { src: "aircraft.mp3",id: "sound2_id" }];

createjs.Sound.addEventListener("fileload", loadedF.bind(this));

createjs.Sound.registerSounds(sounds, path);

function loadedF(e) {
alert("sound loaded");
createjs.Sound.play("sound1_id");
createjs.Ticker.addEventListener("tick", tickF);
}

function tickF(e) {
// display whatever based on sound.position;
// use sound2 = createjs.Sound.play("sound2_id");  // whenever
}

The above code will pay sound 'cabin' now it wont play 2nd sound 'aircraft'...:)

pls help me to solve this issue...

Thanks and Regards,

Syed Abdul Rahim

[kglad]

show the code that your expect to play aircraft.mp3 and fails.

[rahimhaji]

Not Working

var path = "./assets/";
var sounds = [{
src: "cabin.mp3",
id: "sound1_id"
}, {
src: "aircraft.mp3",
id: "sound2_id"
}];

createjs.Sound.addEventListener("fileload", loadedF.bind(this));

createjs.Sound.registerSounds(sounds, path);

function loadedF(e) {
alert("sound loaded");
createjs.Sound.play("sound2_id");
createjs.Ticker.addEventListener("tick", tickF);
}

function tickF(e) {
// display whatever based on sound.position;
// use sound2 = createjs.Sound.play("sound2_id");  // whenever
}

Working

var path = "./assets/";
var sounds = [{
src: "aircraft.mp3",
id: "sound1_id"
}, {
src: "cabin.mp3",
id: "sound2_id"
}];

createjs.Sound.addEventListener("fileload", loadedF.bind(this));

createjs.Sound.registerSounds(sounds, path);

function loadedF(e) {
alert("sound loaded");
createjs.Sound.play("sound1_id");
createjs.Ticker.addEventListener("tick", tickF);
}

function tickF(e) {
// display whatever based on sound.position;
// use sound2 = createjs.Sound.play("sound2_id");  // whenever
}

Please note that in both the coding 2nd sound is not playing and in both the coding iam getting the alert msg that 'sound loaded'.

Thanks and Regards,

Syed Abdul Rahim

[rahimhaji]

Dear Mr.Kglad,

Iam using new logic to do play pause, please check and tell me this...Here pause is working but the sound is not playing from the place where it has stopped..pls check my code and help me..

var assetsPath = "./assets/";
var snd_start = 0;
var pause = false;

var sounds = [{
src: "objective.mp3",
data: {
  audioSprite: [{
   id: "sound1",
   startTime: snd_start
  }]
}
}];

createjs.Sound.alternateExtensions = ["mp3"];
createjs.Sound.on("fileload", loadSound);
createjs.Sound.registerSounds(sounds, assetsPath);

// after load is complete
function loadSound(e) {
}

_this = this;
this.pause_but.addEventListener("click", pause_click);
function pause_click(event) {
if (pause) {
  snd_start = _this.currentFrame * 24;
  _this.play();
  createjs.Sound.play("sound1");
  pause = false;
} else {
  createjs.Sound.stop();
  _this.stop();
  pause = true;
}
}

Please check my above code and correct me if I made any mistake. The logic here I used is I have store the sopping position and multiplying it by frame rate 24 and trying to play the audio from that position by keeping a variable snd_start (sound start time).

Thanks in advance,

Syed Abdul Rahim

[kglad]

i have no idea why you're not using the code i suggested but you're free to do that.

[rahimhaji]

dear Mr.kglad,

Greetings! this one is my another doubt to do play pause.. That one is separate I need to load more than one sound too... see I have send u two different replies... pls check and answer me both..

Thanks in advance,

Syed Abdul Rahim

[kglad]

does this play your aircraft.mp3?

var path = "./assets/";
var sounds = [{ src: "cabin.mp3", id: "sound1_id"}, { src: "aircraft.mp3",id: "sound2_id" }];

createjs.Sound.addEventListener("fileload", loadedF.bind(this));

createjs.Sound.registerSounds(sounds, path);

function loadedF(e) {
alert("sound loaded");
createjs.Sound.play("sound2_id");
createjs.Ticker.addEventListener("tick", tickF);
}

function tickF(e) {
// display whatever based on sound.position;
// use sound2 = createjs.Sound.play("sound2_id");  // whenever
}

[rahimhaji]

Dear Mr.Kglad,

the above code is not working... it wil play only cabin.mp3......

if I make like..

var sounds = [{ src: "aircraft.mp3", id: "sound1_id"}, { src: "cabin.mp3",id: "sound2_id" }];

createjs.Sound.play("sound1_id");

it will work.. I mean only first sound name will work always...

[kglad]

did you copy and paste my code?

[rahimhaji]

S, I copy and pasted ur code as follows:

var path = "./assets/";
var sounds = [{src:"sound1.mp3", id:"sound1_id"},{src:"sound2.mp3", id:"sound2_id"}];

createjs.Sound.addEventListener("fileload", loadedF.bind(this));
createjs.Sound.registerSounds(sounds, path);

function loadedF(e) {
sound1 = createjs.Sound.play("sound1_id");
createjs.Ticker.addEventListener("tick", tickF);
}

function tickF(e) {
// display whatever based on sound.position;
// use sound2 = createjs.Sound.play("sound2_id");  // whenever
}

above code playing 2 different sounds.. but its exchanging both.. if I give sound1.play it  is playing sound2.. if I give sound2.play it plays sound1...:)

[kglad]

again, does this play aircraft.mp3?

var path = "./assets/";
var sounds = [{ src: "cabin.mp3", id: "sound1_id"}, { src: "aircraft.mp3",id: "sound2_id" }];

createjs.Sound.addEventListener("fileload", loadedF.bind(this));

createjs.Sound.registerSounds(sounds, path);

function loadedF(e) {
alert("sound loaded");
createjs.Sound.play("sound2_id");
createjs.Ticker.addEventListener("tick", tickF);
}

function tickF(e) {
// display whatever based on sound.position;
// use sound2 = createjs.Sound.play("sound2_id");  // whenever
}

[rahimhaji]

Thanks for the answer Mr.kglad, but again same issue, its not working..... if I change the line

createjs.Sound.play("sound1_id"); instead of createjs.Sound.play("sound2_id"); it is playing aircraft.mp3. So as I told u earlier, it plays only first sound not playing second sound.

Thanks and Regards,

Syed Abdul Rahim