2017-08-31 20 views
1

(任意の助けをアムは、音楽が再生されます私のionic3プロジェクトに以下のコードを統合しようとしているが、皮膚の画像が表示されません。)私のイオン3プロジェクト

ノートに私のミューズのJSを統合する方法: I muse javascript APIを使用している私のionic 3アプリにライブストリーミングfmステーションを追加したいですか?

<pre> 
    <script type="text/javascript" src="https://hosted.muses.org/mrp.js"> 
      </script> 
      <script type="text/javascript"> 
      MRP.insert({ 
      'url':'http://104.247.79.188:8000/kapitalfm929', 
      'lang':'en', 
      'codec':'mp3', 
      'volume':100, 
      'autoplay':true, 
      'jsevents':true, 
      'buffering':0, 
      'title':'KFM', 
      'welcome':'Station', 
      'wmode':'transparent', 
      'skin':'repvku-100', 
      'width':100, 
      'height':25 
      }); 
      </script> 

<pre> 
+0

あなたのユースケースの詳細を教えていただけますか? – Sampath

+0

これは、イオニック3アプリを実行する恐ろしい方法です。あなたが何をする必要があるか教えてください。それを行うための適切な方法をお勧めします。 – Sampath

+0

OK、muse javascript API "https://hosted.muses.org/mrp.js"を使用して、私のionic 3アプリにライブストリーミングfmステーションを追加したい –

答えて

0

下図のようにあなたはplaypauseボタンでラジオプレーヤーの基本的なデモを作成することができます。

無線player.ts

export class RadioPlayer { 
    url:string; 
    stream:any; 
    promise:any; 

constructor() { 
    this.url = "http://akalmultimedia.net:8000/GDNSLDH"; 
    this.stream = new Audio(this.url); 
}; 

play() { 
    this.stream.play(); 
    this.promise = new Promise((resolve,reject) => { 
    this.stream.addEventListener('playing',() => { 
     resolve(true); 
    }); 

    this.stream.addEventListener('error',() => { 
     reject(false); 
    }); 
    }); 

    return this.promise; 
}; 

pause() { 
    this.stream.pause(); 
}; 

} 

.htmlを

<ion-navbar *navbar> 
    <ion-title> Radio Player </ion-title> 
</ion-navbar> 

<ion-content class="home"> 
    <button dark (click)="play()"> 
    <ion-icon name="play"></ion-icon> 
    </button> 
    <button dark (click)="pause()"> 
    <ion-icon name="pause"></ion-icon> 
    </button> 
</ion-content> 

あなたはapp.SoはあなたIonic 3アプリ上で適切にそれを使用Ionic 2たこと.But this hereについての詳細を読むことができます。

+0

このプラグインをIonicに使用してください3+ [https://ionicframework.com/docs/native/streaming-media/] –

+1

ありがとうございました –

関連する問題