Using Media Plugin takes too much time to load audio from URL in initial

Ionic Framework ionic-v3
1

Ionic Media Plugin is taking too much long time to load the audio from URL.It is taking approx 30 to 40 seconds initially.
Please tell me is there is any way to stream the music properly so that it starts playing after 5 to 10 seconds of delay in start.

This is my code which I am using:-

import {Media , MediaObject } from '@ionic-native/media'; 
@Component({
 selector: 'page-audio',
  templateUrl: 'audiolist.html'
})
export class AudioPage {
 radio: MediaObject ;
 constructor(public navCtrl: NavController,private media: Media) {
 this.tracks = [
            {title: 'Something About You',path:'http://www.noiseaddicts.com/samples_1w72b820/2558.mp3',playing: false, progress: 0},
          {title: 'Run',playing: false, path:'http://www.noiseaddicts.com/samples_1w72b820/2537.mp3',progress: 0},
            {title: 'Breate', playing: false, path:'assets/sounds/audiothree.mp3',progress: 0},
         ];
     }
 async playTrack(track){
       this.radio = new MediaPlugin(track.path);
        this.radio.play();
 }

}
2

I’ve got the same issue with a live stream. First I thought it was an AAC issue but the same behavior with MP3.

3

So any solution for this…?

4

I just made a quick sample using one of the tracks listed here, and they were loaded well under 3seconds. Here’s the code

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Media, MediaObject } from '@ionic-native/media';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  radio: MediaObject;
  constructor(public navCtrl: NavController, public media: Media) {}

  playAudio() {
    this.radio = this.media.create(
      'http://www.noiseaddicts.com/samples_1w72b820/2558.mp3'
    );
    this.radio.play();
  }
}

Important thing to note is that Im using the this.media.create method from Ionic native, not the plugin API itself. This makes sure that when the plugin API is called, it happens within angular change detection, and the updates are registered.

Please try that out.

1 Like
5

Thanks…Let me give it a try…