离子流媒体插件问题答案

【问题标题】：Ionic streaming media plugin issue离子流媒体插件问题
【发布时间】：2026-01-29 12:15:02
【问题描述】：

我正在尝试构建一个 ionic 应用来流式传输音频。

这是我目前所拥有的......

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { StreamingMedia } from '@ionic-native/streaming-media';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    StreamingMedia,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { StreamingMedia, StreamingAudioOptions } from '@ionic-native/streaming-media';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private streamingMedia: StreamingMedia) {

  }

    playStream() {

        let options: StreamingAudioOptions = {
            bgColor: 'red',
            successCallback: () => { console.log('Audio played') },
            errorCallback: (e) => { console.log('Error streaming') }
        };

        this.streamingMedia.playAudio('http://listen.radionomy.com:80/NewYorkClassicRock');

    }

}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>

  <button ion-button large (click)="playStream()">Start the Stream!</button>
</ion-content>

使用离子视图，在 android 或 ios 中单击按钮不会执行任何操作。

我做错了什么或错过了什么？

谢谢！

【问题讨论】：

使用离子视图..插件不适用于ionic serve，因为没有加载cordova..你必须使用设备/模拟器..也可以在plaform.ready中调用插件
我使用了相同的代码。对我来说很好。认为音频流链接是错误的，但它对我来说非常好。

标签： ionic-framework ionic3

【解决方案1】：

它在离子视图中不起作用。使用以下命令在物理设备上运行它：

cordova 运行 android --debug

在您的应用文件夹中！

【讨论】：

【解决方案2】：

一个小观察，您正在设置选项但没有将其传递给streamingMedia。您可能想要这样做：

this.streamingMedia.playAudio('http://listen.radionomy.com:80/NewYorkClassicRock',options);

【讨论】：