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

[Trial10]

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:

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?

[Trial10]

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

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?

[ClayUUID]

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

[Trial10]

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.

[dc257]

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.