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>