Radio Stream with Phonegap

Question

Radio Stream with Phonegap

Navigation

#1 by (2 votes)
#2 by (1 votes)

11

I'm developing an app and I have the function below and it's perfect for an online radio, I'd like to add others but I'm not sure how.

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

});

Actually I need to take the call and make it universal:

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

and create type the function below:

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

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

    return data;
})

Then when I call in the template all the radios will appear, for 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 2
 <a href="#" id="btn-play" ng-click="startRadio()" ng-bind-html="renderHtml(buttonIcon)"><span class="ion-ios-play"></span></a>

javascript ionic apache-cordova streaming

asked by anonymous 10.07.2015 / 14:03

2 answers

How to use FreeTDS with MAMP on Mac OS? How to do a regressive counter with javascript?

score 2 · Answer 1

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

More 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 : You may need to change the port ( $scope.radioPort )

score 1 · Answer 2

First, since 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: ''
   }

From there, 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>