Stop loading radio stream in background after stop action

Question

I'm working on an Internet Radio Stream Application with ionic-native-media and ionic-native-music-controls plugins.

The problem is when i press stop button audio stops playing but in network tab inside chrome developer tools stream is still loading. Is there any solution to completely stop streaming?

Code :

export class RadioPage {
  file: MediaObject;
  constructor(
    public musicControls: MusicControls,
    public media: Media,
    public navCtrl: NavController
  ) { }

  settingMusicControl() {
    this.musicControls.destroy();
    this.musicControls.create({
      track: 'Radio', 
      artist: 'Live Stream', 
      cover: '',   
      isPlaying: true,
      dismissable: true,
      hasPrev: false, 
      hasNext: false,
      hasClose: true,
      hasSkipForward: false,
      hasSkipBackward: false,
      skipForwardInterval: 15,
      skipBackwardInterval: 15,
      album: 'Test Album',
      duration: 0,
      elapsed: 0,
      ticker: 'Ticker'
    });
    this.musicControls.subscribe().subscribe(action => {
      const message = JSON.parse(action).message;
      console.log('message', message);
      switch (message) {
        case 'music-controls-next':
          break;
        case 'music-controls-previous':
          break;
        case 'music-controls-pause':
          this.file.stop();
          this.musicControls.listen();
          this.musicControls.updateIsPlaying(false);
          break;
        case 'music-controls-play':
          this.file.play();
          this.musicControls.listen();
          this.musicControls.updateIsPlaying(true);
          break;
        case 'music-controls-destroy':
          break;
        case 'music-controls-toggle-play-pause':
          break;
        case 'music-controls-seek-to':
          break;
        case 'music-controls-skip-forward':
          break;
        case 'music-controls-skip-backward':
          break;
        case 'music-controls-media-button':
          break;
        case 'music-controls-headset-unplugged':
          break;
        case 'music-controls-headset-plugged':
          break;
        default:
          break;
      }
    });
    this.musicControls.listen();
    this.musicControls.updateIsPlaying(true);
  }

  play() {
    this.file = this.media.create('http://streaming.tdiradio.com:8000/house.mp3');
    this.file.play();
    this.settingMusicControl();
  }

  stop() {
    this.file.stop();
    this.musicControls.listen();
    this.musicControls.updateIsPlaying(false);
  }

}

Chrome Developer Tools:

Answer 1

Solution 1:

Ionic Native Media plugin:

After this.file.stop(); is necessary to call another function this.file.release();

Solution 2:

The best solution at this moment

Using HTML5 Audio Object:

var url = 'http://streaming.tdiradio.com:8000/house.mp3';
var stream = new Audio(url);
stream.preload = 'none';

function play() {
  stream.play();
}

function pause() {
  stream.pause();
  stream.src = ''
  stream.load();
  
  stream = null;
  
  stream = new Audio();
  stream.src = url;
  stream.preload = 'none';
}

<button onclick='play()'>Play</button>
<button onclick='pause()'>Pause</button>

Helpful link:

Control Audio Buffering