代码之家 › 专栏 › 技术社区 › Marko Savic

停止操作后停止在后台加载无线流

ionic-native ionic2 ionic-framework

Marko Savic · 技术社区 · 8 年前

我正在做一个 互联网无线流应用 具有 ionic-native-media 和 ionic-native-music-controls 插件 .

问题是当我按下 stop 按钮音频停止播放,但在 “网络”选项卡 在…内 chrome开发者工具 流仍在加载。有什么解决方案可以完全停止流媒体吗?

代码:

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开发者工具:

1 回复 | 直到 8 年前

Marko Savic 8 年前

解决方案1:

Ionic Native Media 插件:

之后 this.file.stop(); 需要调用另一个函数 this.file.release();

解决方案2:

目前最好的解决方案

使用 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>

有用链接:

Control Audio Buffering