• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to preload sounds without adding it to the timeline and playing ogg with mp3 as fallback?

Explorer ,
Mar 18, 2022 Mar 18, 2022

Copy link to clipboard

Copied

I managed to get sounds to work the way I want, but I'm a bit confused how to preload things. I have 2 sound formats:

sounds/myAudioLoop.ogg
sounds/myAudioLoop.mp3

 

I want to use ogg, but in Animate, I can only insert mp3 to the timeline:

Screen Shot.png

 

In Frame 1, there's a this.stop(); and a play button. When the play button gets pressed, it'll jump to the "start" frame and the sound plays.

 

In Frame 2 labeled "start", I added my preload and sound codes:

// preload
var queue = new createjs.LoadQueue();
createjs.Sound.alternateExtensions = ["m4a"];
queue.installPlugin(createjs.Sound);
queue.on("complete", handleComplete);
queue.loadFile({
	id: "audioLoop",
	src: "sounds/myAudioLoop.ogg"
});


createjs.Sound.on("fileload", handleLoad);
createjs.Sound.alternateExtensions = ["m4a"];
createjs.Sound.registerSound({
	id: "audioLoop",
	src: "sounds/myAudioLoop.ogg"
});

var _this = this;

function handleLoad(event) {
	_this.audioLoopInstance = createjs.Sound.play("audioLoop", {
		interrupt: createjs.Sound.INTERRUPT_ANY,
		loop: -1
	});
};

 

I read that Animate will always preload stuff, so I didn't add the mp3 into the preload code. When I test the movie, and press the play button, both formats play, but the ogg lags. I'm guessing it's because Animate's preload code runs first, plays the mp3 (cause I added it to the timeline), then runs the preload codes when it gets to Frame 2.

 

 I frankensteined the codes, so I'm not really sure how edit it to make it all work properly.

 

Is there a way to preload everything without adding the sound to the timeline in Animate?

And for it to play ogg, with mp3 as the fallback for browsers that don't support ogg?

TOPICS
Code , How to

Views

179

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 19, 2022 Mar 19, 2022

Copy link to clipboard

Copied

This time I changed how I setup the frames in Animate:

Screen Shot_2.png

I removed the sounds from the library and frames,  then unticked the "Include preloader" in the publish settings.


In Frame 1, I put a looping movieclip to act as a throbber and added these codes in the main timeline:

 

this.stop();

// Preloader in Frame 1
var queue = new createjs.LoadQueue();
createjs.Sound.alternateExtensions = ["mp3"];
queue.installPlugin(createjs.Sound);
queue.on("complete", handleComplete);

/*
queue.loadFile({
	id: "audioLoop",
	src: "sounds/myAudioLoop.ogg"
});
*/

queue.loadManifest([{
	id: "audioLoop",
	src: "sounds/myAudioLoop.ogg"
}, {
	id: "audioLoop",
	src: "sounds/myAudioLoop.mp3"
}]);


var _this = this;

function handleComplete(evt) {
	_this.gotoAndStop(1);
};

// For play_btn in Frame 2
this.play_btn.on("click", play_btnClick.bind(this));

function play_btnClick(evt) {
	this.gotoAndStop("start");
};

 

 

and in Frame 3:

 

this.audioLoopInstance = createjs.Sound.play("audioLoop", {
	interrupt: createjs.Sound.INTERRUPT_ANY,
	loop: -1
});

 

 

This seems to do the trick, but leaves me with some questions:

 

a) I used queue.loadManifest to preload the ogg and mp3 files. In my original post, I had a typo for createjs.Sound.alternateExtensions where I typed "m4a" instead of "mp3". If I already have alternateExtensions as "mp3", should I still preload the mp3 file in queue.loadManifest, or just use queue.loadFile to preload only the ogg format?

 

b) If I'd like to use mp3 and m4a alternate extensions of the audio, do I use the code this way?

 

createjs.Sound.alternateExtensions = ["mp3", "m4a"];

 

 

c) I thought I have to register every sound to use them. After I use the queue.loadManifest (or queue.loadFile) to preload the sound and give them id names, do I still need to do createjs.Sound.registerSound?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 19, 2022 Mar 19, 2022

Copy link to clipboard

Copied

The most important question is, WHY do you want to use OGG instead of MP3?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 19, 2022 Mar 19, 2022

Copy link to clipboard

Copied

I did some tests for making seamless sound loops for background music. I found that all the file formats have some sort of silent gap when looping. But ogg and m4a had the least amount of it when I used those.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

LATEST

I found AAC worked well for looping. Also using two identical versions of the sound and playing them alternatively one after the other using a setTimeout function to create a seamless loop. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines