Radio player with shoutcast ip


#1

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?


#2

i resolved it :slight_smile:

just add ;stream.mp3 at and of url!

this.url = "http://109.168.100.173:8058/;stream.mp3";

#3

thanks my friend. Its a big help!!!


#4

you’re welcome :slight_smile:


#5

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?


#6

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


#7

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.


#8

It worked! The streaming is taking about 9 seconds to load. It’s normal?


#9

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 :slight_smile:


#10

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 = "";  
    }
  };

#11

hi filippodicostanzo,

Could you please help me understand where disabled, beforedisabled . and other methods are coming from in the above code?

Thanks in Advance.