Radio stream with Phonegap

Question

I’m developing a App, I have the function below and it is perfect for an online radio. I would like to add others but am not sure how.

Follows the function:

 // Radio Controller
    var radio = null;
    var isPlaying = false;

    app.controller('radioController', function($scope, $sce, ngAudio){

      $scope.radioHost = 'http://192.99.8.192'; // Replace this with your own radio stream URL
      $scope.radioPort = '3536'; // Replace this with the port of your Radio Stream
      $scope.lastFMKey = 'ab68e9a71c1bb15efaa9c706b646dee4';
      $scope.lastFM = 'http://ws.audioscrobbler.com/2.0/?method=track.search&format=json&limit=1&api_key='+$scope.lastFMKey+'&track=';

      $scope.radioURL = $scope.radioHost+':'+$scope.radioPort+'/;';
      $scope.buttonIcon = '<span class="ion-ios-play"></span>';

      $scope.radioOptions = {
        albumArt: 'images/radio/cover.png',
        songName: ''
      }

      // Let's start the Shoutcast plugin to get the Song Name
      $.SHOUTcast({
         host : '192.99.8.192', // Replace this with your own radio stream URL but remove the http
         port : $scope.radioPort,
         interval : 40000, // Refresh interval in miliseconds is equal to 40 seconds.
         stream: 1, // Replace with your stream, default is 1.
         stats : function(){
            var songTitle = this.get('songtitle');
            var albumArt = '';

            $.getJSON( $scope.lastFM+encodeURIComponent(songTitle), function( data ) {
              if(data.error){
                //console.log(data.message);
                albumArt = 'images/radio/cover.png';    
              } else {
                //console.log(data); // delete this for production
                if( data.results!== undefined ){
                  if(data.results.trackmatches !="\n" ){
                    if(data.results.trackmatches.track.image !== undefined){
                      albumArt = data.results.trackmatches.track.image[3]['#text'];
                    } else {
                      albumArt = 'images/radio/cover.png';
                    }                  
                  } else {
                    albumArt = 'images/radio/cover.png'; 
                  }
                }
              }

              $scope.$apply(function(){
                $scope.radioOptions.albumArt = albumArt;
              });

            });

            $scope.$apply(function(){
              $scope.radioOptions.songName = songTitle;
            });
         }

      }).startStats();

      if (radio!==null) {   
          $scope.radio = radio;

          if(isPlaying){
            $scope.buttonIcon = '<span class="ion-ios-pause"></span>';
          } else {
            $scope.buttonIcon = '<span class="ion-ios-play"></span>';
          }
      } else {

        isPlaying = false;
          $scope.radio = ngAudio.load($scope.radioURL);
          radio = $scope.radio;
      }

      $scope.renderHtml = function (htmlCode) {
            return $sce.trustAsHtml(htmlCode);
        };

        $scope.startRadio = function(){

          if(!isPlaying){
            // Let's play it
            isPlaying = true;
          $scope.radio.play();

          $scope.buttonIcon = '<span class="ion-ios-pause"></span>';
          $scope.isFetching = true;

          } else {
            // Let's pause it
            isPlaying = false;
          $scope.radio.pause();
          $scope.buttonIcon = '<span class="ion-ios-play"></span>';

          }

        }

        // Check if is Offline
      document.addEventListener("offline", function(){

        isPlaying = false;
        $scope.radio.stop();
        $scope.buttonIcon = '<span class="ion-ios-play"></span>';
        $scope.radio = null;
        modal.show();
        setTimeout('modal.hide()', 8000);       

      }, false);

      document.addEventListener("online", function(){
        $scope.radio = ngAudio.load($scope.radioURL);
        radio = $scope.radio;
      });

    });

In fact, I need to take the call and make it universal:

    $scope.radioHost = 'http://192.99.8.192'; 
    $scope.radioPort = '3536';

And create, like, the function below:

.factory('Radios', function(){
        var data = {};

        data.items = [
            { 
                radionome: '',
                host: '',
                port:'',
            },
            { 
                radionome: '',
                host: '',
                port:'',
            },
            { 
                radionome: '',
                host: '',
                port:'',
            },
        ]; 

        return data;
    })

For later, when I call in the template, appear all radios, example:

radio 1
     <a href="#" id="btn-play" ng-click="startRadio()" ng-bind-html="renderHtml(buttonIcon)"><span class="ion-ios-play"></span></a>

     radio 2
     <a href="#" id="btn-play" ng-click="startRadio()" ng-bind-html="renderHtml(buttonIcon)"><span class="ion-ios-play"></span></a>

     radio 3
     <a href="#" id="btn-play" ng-click="startRadio()" ng-bind-html="renderHtml(buttonIcon)"><span class="ion-ios-play"></span></a>

Answer 1

As the comments in the code themselves say, you need to change that line $scope.radioHost = 'http://192.99.8.192'; to receive the radio link you want.

Down below you need to change too:

$.SHOUTcast({
     host : '192.99.8.192', // Mude essa linha para receber o link da sua rádio, sem o 'http://'
     port : $scope.radioPort

EDIT: It may be necessary to change the door ($scope.radioPort)

Answer 2

First, as the user needs to change the radio, we need a method setRadio

$scope.setRadio = function (radio) {
   $scope.radioHost = radio.host;
   $scope.radioPort = radio.port;
   $scope.lastFMKey = radio.lastFMKey;
   $scope.lastFM = radio.lastFM;

   $scope.radioURL = $scope.radioHost+':'+$scope.radioPort+'/;';  
   $scope.radioOptions = {
     albumArt: 'images/radio/cover.png',
     songName: ''
   }

then in the view you would have a grid for the user to select the radio:

  <div ng-repeat="radio in radios">
    <span>{{radio.name}}</span>
    <button ng-click="setRadio(radio)"> Play </button>
  </div>