Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 229727

Radio player with shoutcast ip

$
0
0

How I can implement an audio player with button pause and play?

i create a radio service in radio.ts file:

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

    constructor() {
        this.url = "http://109.168.100.173:8058/";
        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();
    };

}

my RadioPage.ts is

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform, AlertController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { Diagnostic } from '@ionic-native/diagnostic'
import { RadioPlayer } from '../../radio/radio';

/**
 * Generated class for the Trymap page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@Component({
  selector: 'page-trymap',
  templateUrl: 'trymap.html',
  providers: [RadioPlayer]
})
export class TrymapPage {


  constructor(public navCtrl: NavController, public navParams: NavParams, private diagnostic: Diagnostic, public player: RadioPlayer) {

  }


  play() {
    this.player.play().then(() => {
      console.log('Playing');
    });
  }

  pause() {
    this.player.pause();
    console.log('Pause')
  }

and RadioPage.html is

<ion-header>

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

</ion-header>

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

But return this error when I click on play:

radio.ts:12 Uncaught (in promise) DOMException: The element has no supported sources.

Any solution?


Viewing all articles
Browse latest Browse all 229727

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>