11

Estou desenvolvendo um App, tenho a função abaixo e ela é perfeita para uma rádio online. Gostaria de adicionar outras, mas não estou sabendo como.

Segue a função:

 // 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;
      });

    });

Na verdade, eu preciso tirar a chamada e torna-la universal:

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

E criar, tipo, a função abaixo:

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

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

        return data;
    })

Para depois, quando eu chamar no template, aparecer todas as rádios, exemplo:

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>

2 Respostas 2

2

Como os próprios comentários no código dizem, tu precisas mudar essa linha $scope.radioHost = 'http://192.99.8.192'; para receber o link da rádio que tu deseja.

Mais abaixo tu precisas mudar também:

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

EDIT: Talvez seja necessário mudar a porta ($scope.radioPort)

0
1

Primeiro, como o usuário precisa trocar a rádio, precisamos de um método 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: ''
   }

daí, na view você teria um grid para o usuario selecionar a rádio:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .