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?
1 Like
i resolved it 
just add ;stream.mp3 at and of url!
this.url = "http://109.168.100.173:8058/;stream.mp3";
1 Like
thanks my friend. Its a big help!!!
Dear Filippo, after call this.player.pause(), sound has stoped, but the stream/mp3 still in memory load data, greatly increasing the consumption of the user data packet. I just noticed through the âdev tools -> networkâ.
Do you know how stop the stream?
Hi elialber i had the same issue, so i migrate to a native media audio plugin from ionic.
I paste my code, i think this can be useful to you:
I use the events that i can navigate in others page and the radio stream works together
this is the my functions in appcomponent.ts
you need import this: import { MediaPlugin, MediaObject } from â@ionic-native/mediaâ;
this.events.subscribe('play', () => {
const onStatusUpdate = (status) => console.log(status);
const onSuccess = () => console.log('Action is successful.');
const onError = (error) => console.error(error.message);
this.file = this.media.create('http://109.168.100.173:8058/;stream.mp3', onStatusUpdate, onSuccess, onError);
this.file.play();
this.setButtonColor('play');
this.storage.set('button', 'play');
// user and time are the same arguments passed in `events.publish(user, time)`
console.log('PLAY')
});
this.events.subscribe('pause', () => {
this.file.pause();
this.storage.set('button', 'pause');
this.setButtonColor('pause');
// user and time are the same arguments passed in `events.publish(user, time)`
console.log('PAUSE')
});
this.events.subscribe('stop', () => {
this.file.stop();
this.file.release();
this.storage.set('button', 'stop');
this.setButtonColor('stop');
// user and time are the same arguments passed in `events.publish(user, time)`
console.log('STOP')
});
this is the functions in radio.ts
play() {
this.get_radio_title(false);
this.disabled = true;
this.beforedisabled = false;
this.storage.get('button').then((val) => {
if (val == "play") {
this.disabled = true;
this.beforedisabled = false;
}
this.events.publish('play');
});
this.buttonPause = "primary";
this.buttonStop = "primary";
this.buttonPlay = "red";
this.backgroundMode.enable();
}
pause() {
this.disabled = false;
this.events.publish('pause');
this.buttonPause = "red";
this.buttonStop = "primary";
this.buttonPlay = "primary";
this.backgroundMode.disable();
console.log('Pause')
}
stop() {
//this.radio.pause();
//this.radio.src = "";
this.disabled = false;
this.events.publish('stop');
this.buttonPause = "primary";
this.buttonStop = "red";
this.buttonPlay = "primary";
this.backgroundMode.disable();
console.log('Stop')
}
i used the background mode plugin and the native audio plugin
if you have other questions donât hesitate to contact me
3 Likes
Dear Filippo, i apreciate your availability. I will to apply this solution.
I believe this post will help a lot of others developers.
Thanks a lot.
1 Like
It worked! The streaming is taking about 9 seconds to load. Itâs normal?
1 Like
Hi! Can you post your full app.component.ts, radio.ts and radio.html? Iâm beginner and need some more example code to get this work
AppComponent.ts
this.events.subscribe('play', () => {
this.player.play('http://streaming.livecenter.com.br:9322/;stream.mp3').then(() => {
console.log('Playing');
});
this.storage.set('button', 'play');
});
this.events.subscribe('stop', () => {
this.player.pause();
this.storage.set('button', 'stop');
console.log('STOP')
});
player.ts
play(streamUrl) {
try {
let src = streamUrl + '/;stream.mp3';
this.stream = new Audio(src);
this.stream.play();
this.promise = new Promise((resolve, reject) => {
this.stream.addEventListener('playing', () => {
resolve(true);
});
this.stream.addEventListener('error', () => {
reject(false);
});
});
return this.promise;
} catch (error) {
console.log("erro ao carregar a playlist");
}
};
pause() {
if (this.stream != null) {
this.stream.pause();
this.stream.currentTime = 0;
this.stream.src = "";
}
};
1 Like
hi filippodicostanzo,
Could you please help me understand where disabled, beforedisabled . and other methods are coming from in the above code?
Thanks in Advance.