Skip to content

Instantly share code, notes, and snippets.

@buddies2705

buddies2705/radio.html

Created December 30, 2018 16:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save buddies2705/4b3cc545efd866eab57d576f7d0ba98a to your computer and use it in GitHub Desktop.
Save buddies2705/4b3cc545efd866eab57d576f7d0ba98a to your computer and use it in GitHub Desktop.
Download ZIP
Radio app
Raw
radio.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no">
<title>Howler.js Radio</title>
<link rel="stylesheet" href="../css/howler.css">
</head>
<body>
<div class="title" style="text-align: center;color: aquamarine;"> Gaurav.fm </div>
<div class="padding"></div>
<div id="station0" class="station">
<div class="title">
<div id="title0" class="subtitle"></div>
<div id="live0" class="live">LIVE</div>
<div id="playing0" class="playing">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
<div id="station1" class="station">
<div class="title">
<div id="title1" class="subtitle"></div>
<div id="live1" class="live">LIVE</div>
<div id="playing1" class="playing">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
<div id="station2" class="station">
<div class="title">
<div id="title2" class="subtitle"></div>
<div id="live2" class="live">LIVE</div>
<div id="playing2" class="playing">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
<div id="station3" class="station">
<div class="title">
<div id="title3" class="subtitle"></div>
<div id="live3" class="live">LIVE</div>
<div id="playing3" class="playing">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
<div id="station4" class="station">
<div class="title">
<div id="title4" class="subtitle"></div>
<div id="live4" class="live">LIVE</div>
<div id="playing4" class="playing">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
<div class="padding"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js"></script>
<script>
var Radio = function(stations) {
var self = this;
self.stations = stations;
self.index = 0;
// Setup the display for each station.
for (var i=0; i<self.stations.length; i++) {
window['title' + i].innerHTML = '<b>' + self.stations[i].freq + '</b> ' + self.stations[i].title;
window['station' + i].addEventListener('click', function(index) {
var isNotPlaying = (self.stations[index].howl && !self.stations[index].howl.playing());
radio.stop();
if (isNotPlaying || !self.stations[index].howl) {
radio.play(index);
}
}.bind(self, i));
}
};
Radio.prototype = {
play: function(index) {
var self = this;
var sound;
index = typeof index === 'number' ? index : self.index;
var data = self.stations[index];
if (data.howl) {
sound = data.howl;
} else {
sound = data.howl = new Howl({
src: data.src,
html5: true,
format: ['mp3', 'aac']
});
}
sound.play();
self.toggleStationDisplay(index, true);
self.index = index;
},
stop: function() {
var self = this;
var sound = self.stations[self.index].howl;
self.toggleStationDisplay(self.index, false);
if (sound) {
sound.stop();
}
},
toggleStationDisplay: function(index, state) {
var self = this;
window['station' + index].style.backgroundColor = state ? 'rgba(255, 255, 255, 0.33)' : '';
window['live' + index].style.opacity = state ? 1 : 0;
window['playing' + index].style.display = state ? 'block' : 'none';
}
};
var radio = new Radio([
{
freq: '91.1',
title: "Radio City",
src: 'http://prclive1.listenon.in:9960/',
howl: null
},
{
freq: '81.4',
title: "BBC Radio 1",
src: 'http://bbcmedia.ic.llnwd.net/stream/bbcmedia_radio1_mf_q',
howl: null
},
{
freq: '89.9',
title: "Hip Hop Hits",
src: 'http://tunein4.streamguys1.com/hhbeafree5',
howl: null
},
{
freq: '98.3',
title: "Radio Mirchi",
src: 'http://peridot.streamguys.com:7150/Mirchi',
howl: null
},
{
freq: '103.3',
title: "80's Hits",
src: 'http://tunein4.streamguys1.com/80shtfree1',
howl: null
}]);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment