How to ensure all media files are fully loaded on start

Ionic Framework ionic-v3
1

Hello Ionic users,

How can I perfectly ensure all media files are fully loaded on start of app & navigation to a different page?

I realized even with loading screen, some big media files are not fully loaded. For example, I have two 1MB audio files which need to be completely loaded before showing app’s first page.
But they aren’t completely loaded because I occasionally hear them playing not in time. It sounds like they’re not in sync every time I load this app…

How do you guys work around this? Is extending app’s loading time the only way?
My smartphone is a quadcore CPU HTC phone. This isn’t a problem of my phone’s performance.

Thanks,

2

Does your audio playback funxtion follow a promise pattern? If so, use that to unhide/show the page

3

Hi, thanks for your reply. Although I don’t understand what you mean by unhide/show page, I’m using Ionic’s native audio plugin. I’m loading all audio files using preload function when my app starts but the files never sound like perfectly loaded… I have up to 7 second loading screen which is good enough to load all media files on my phone. My phone can load a 3D game app in 7 seconds as well.

4

he means your loading page.

1 Like
5

It sounds like they’re suggesting you wrap the logic for loading your data either in platform.ready() or loading.present()
i.e.

let loading = this.loadingCtrl.create({});

loading.present().then(() => {
   /** Load Data */
 })
.then(() => loading.dismiss());

Maybe a combination of the two.

loading.dismiss())
.then(() => this.rootPage = 'HomePage');

That’s what I’m assuming

1 Like
6

Cool, I will try that method.

Let me know if you guys have any other opinion.

Thanks,

7

or something like

platform.ready()
     .then(()=>{  return this.nativeaudio.preloadComplex( blablabal ) })
     .then(()=>{ return this.navctrl.setRoot or this.navctrl.push or hideSplash  })
     .then(()=>{ this.nativeaudio.play(blabla)})

so this should first preload, then show screen and then play audio. If there is too much delay in playing audio, maybe put the play audio in the second row before the return statement

3 Likes
8

Hi Tommertom I seem to be getting the same error. even after preloading is using a simple preload command no longer efficient.

platform.ready().then(() => {
      
      platform.registerBackButtonAction(() => this.myHandlerFunction());

      StatusBar.hide();

      smartAudio.preload('Hammer', 'assets/audio/Stretch.wav');
      smartAudio.preload('baller', 'assets/audio/blowthewhistle.wav');
      smartAudio.preload('pinging', 'assets/audio/onPickUP1.wav');
      smartAudio.preload('bluejay', 'assets/audio/bird.wav');
      smartAudio.preload('tapping', 'assets/audio/dancer.wav');
    });
  }