title: How to preload sounds without adding it to the timeline and playing ogg with mp3 as fallback?
body: <p>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:</p>
  <pre><code>sounds/myAudioLoop.ogg
  sounds/myAudioLoop.mp3
  </code></pre>
  <p>I want to use ogg, but in Animate, I can only insert mp3 to the timeline:
  <a href="https://i.stack.imgur.com/0hRLP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0hRLP.png" alt="enter image description here" /></a></p>
  <p>In Frame 1, there's a this.stop(); and a play button. When the play button gets pressed, it'll jump to the &quot;start&quot; frame and the sound plays.</p>
  <p>In Frame 2 labeled &quot;start&quot;, I added my preload and sound codes:</p>
  <pre><code>// preload
  var queue = new createjs.LoadQueue();
  createjs.Sound.alternateExtensions = [&quot;m4a&quot;];
  queue.installPlugin(createjs.Sound);
  queue.on(&quot;complete&quot;, handleComplete);
  queue.loadFile({
      id: &quot;audioLoop&quot;,
      src: &quot;sounds/myAudioLoop.ogg&quot;
  });
  
  
  createjs.Sound.on(&quot;fileload&quot;, handleLoad);
  createjs.Sound.alternateExtensions = [&quot;m4a&quot;];
  createjs.Sound.registerSound({
      id: &quot;audioLoop&quot;,
      src: &quot;sounds/myAudioLoop.ogg&quot;
  });
  
  var _this = this;
  
  function handleLoad(event) {
      _this.audioLoopInstance = createjs.Sound.play(&quot;audioLoop&quot;, {
          interrupt: createjs.Sound.INTERRUPT_ANY,
          loop: -1
      });
  };
  </code></pre>
  <p>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.</p>
  <p>I frankensteined the codes, so I'm not really sure how edit it to make it all work properly.</p>
  <p>Is there a way to preload everything without adding the sound to the timeline in Animate?</p>
  <p>And for it to play ogg, with mp3 as the fallback for browsers that don't support ogg?</p>
  <hr />
  <p><strong>Update:</strong> This time I changed how I setup the frames in Animate:
  <a href="https://i.stack.imgur.com/IOlIx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IOlIx.png" alt="enter image description here" /></a></p>
  <p>I removed the sounds from the library and frames,  then unticked the &quot;Include preloader&quot; in the publish settings.</p>
  <p>In Frame 1, I put a looping movieclip to act as a throbber and added these codes in the main timeline:</p>
  <pre><code>this.stop();
  
  // Preloader in Frame 1
  var queue = new createjs.LoadQueue();
  createjs.Sound.alternateExtensions = [&quot;mp3&quot;];
  queue.installPlugin(createjs.Sound);
  queue.on(&quot;complete&quot;, handleComplete);
  
  /*
  queue.loadFile({
      id: &quot;audioLoop&quot;,
      src: &quot;sounds/myAudioLoop.ogg&quot;
  });
  */
  
  queue.loadManifest([{
      id: &quot;audioLoop&quot;,
      src: &quot;sounds/myAudioLoop.ogg&quot;
  }, {
      id: &quot;audioLoop&quot;,
      src: &quot;sounds/myAudioLoop.mp3&quot;
  }]);
  
  
  var _this = this;
  
  function handleComplete(evt) {
      _this.gotoAndStop(1);
  };
  
  // For play_btn in Frame 2
  this.play_btn.on(&quot;click&quot;, play_btnClick.bind(this));
  
  function play_btnClick(evt) {
      this.gotoAndStop(&quot;start&quot;);
  };
  </code></pre>
  <p>and in Frame 3:</p>
  <pre><code>this.audioLoopInstance = createjs.Sound.play(&quot;audioLoop&quot;, {
      interrupt: createjs.Sound.INTERRUPT_ANY,
      loop: -1
  });
  </code></pre>
  <p>This seems to do the trick, but leaves me with some questions:</p>
  <p>a) I used <strong>queue.loadManifest</strong> to preload the ogg and mp3 files. In my original post, I had a typo for <strong>createjs.Sound.alternateExtensions</strong> where I typed &quot;m4a&quot; instead of &quot;mp3&quot;. If I already have alternateExtensions as &quot;mp3&quot;, should I still preload the mp3 file in <strong>queue.loadManifest</strong>, or just use <strong>queue.loadFile</strong> to preload only the ogg format?</p>
  <p>b) If I'd like to use mp3 and m4a alternate extensions of the audio, do I use the code this way?</p>
  <pre><code>createjs.Sound.alternateExtensions = [&quot;mp3&quot;, &quot;m4a&quot;];
  </code></pre>
  <p>c) I thought I have to register every sound to use them. After I use the <strong>queue.loadManifest</strong> (or <strong>queue.loadFile</strong>) to preload the sound and give them id names, do I still need to do <strong>createjs.Sound.registerSound</strong>?</p>
  <hr />
  <p><strong>Update 2:</strong> After doing other tests and reading up more about SoundJS and PreloadJS, I gained a little more understanding on how to use them. For my questions:</p>
  <p>a) I should only preload the preferred extension. SoundJS will handle the fallback stuff automatically. <strong>queue.loadFile</strong> is only to preload 1 file. <strong>queue.loadManifest</strong> can preload 1 or multiple files.</p>
  <p>b) This seems like how I've seen people do it. Also a lot more supported extensions are listed <a href="https://createjs.com/docs/soundjs/files/soundjs_Sound.js.html#l363" rel="nofollow noreferrer">here</a>.</p>
  <p>c) <a href="https://createjs.com/tutorials/SoundJS%20and%20PreloadJS/index.html" rel="nofollow noreferrer">This SoundJS, PreloadJS tutorial page</a> mentions that PreloadJS uses SoundJS for audio stuff, and are automatically registered. So I think I won't have to use <strong>createjs.Sound.registerSound</strong>.</p>