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?