Stream Radio Script
Today I have prepared another really great tutorial for you. Recently I have started development of my own radio software (as module for Dolphin CMS) and got interesting results. So, I would like to share you with some results about it. It will be nice looking (CSS3) radio script. It consists from three main elements: header (with nice animated search bar and integrated radio player), left side (with list of categories and subcategories) and right side (which will contains list of recent/ or filtered stations).
Here are our demo and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download our source files and lets start coding !
Step 1. HTML Markup
This is markup of the one of used template files. This is template of our main (index) page. Here it is:
templates/main_page.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Stream Radio Script | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/radio.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.7.1");
</script>
<script src="js/script.js"></script>
</head>
<body>
<header>
<h2>Stream Radio Script</h2>
<a href="https://script-tutorials.com/stream-radio-script/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="container">
<form method="get" class="header" action="javascript:void(0)" onsubmit="get_stations_by_keyword(); return false;">
<input type="text" id="search" value="Search" name="s">
<span>
<div id="rplayer">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="191" height="46" bgcolor="#FFFFFF">
<param name="movie" value="player/ffmp3-config.swf" />
<param name="flashvars" value="url=http://scfire-dtc-aa04.stream.aol.com:80/stream/1013/&lang=en&codec=mp3&volume=100&introurl=media/welcome.mp3&autoplay=true&traking=false&jsevents=false&buffering=5&skin=player/def/skin.xml&title=SKY.FM 80s" />
<param name="wmode" value="opaque" />
<param name="allowscriptaccess" value="always" />
<param name="scale" value="noscale" />
<embed src="player/ffmp3-config.swf" flashvars="url=http://scfire-dtc-aa04.stream.aol.com:80/stream/1013/&lang=en&codec=mp3&volume=100&introurl=media/welcome.mp3&autoplay=true&traking=false&jsevents=false&buffering=5&skin=player/def/skin.xml&title=SKY.FM 80s" width="191" scale="noscale" height="46" wmode="opaque" bgcolor="#FFFFFF" allowscriptaccess="always" type="application/x-shockwave-flash" />
</object>
</div>
</span>
</form>
<div class="clear"></div>
<div class="genres_par">
<ul class="genres">
<li id="1" val="Alternative"><a href="javascript:void(0)">Alternative</a>
<ul>
<li id="11" val="Classic+Alternative"><a href="javascript:void(0)">Classic Alternative</a></li>
<li id="12" val="Industrial"><a href="javascript:void(0)">Industrial</a></li>
<li id="13" val="New+Wave"><a href="javascript:void(0)">New Wave</a></li>
<li id="14" val="Punk"><a href="javascript:void(0)">Punk</a></li>
</ul>
</li>
<li id="2" val="Classical"><a href="javascript:void(0)">Classical</a>
<ul>
<li id="21" val="Modern"><a href="javascript:void(0)">Modern</a></li>
<li id="22" val="Opera"><a href="javascript:void(0)">Opera</a></li>
<li id="23" val="Piano"><a href="javascript:void(0)">Piano</a></li>
<li id="24" val="Romantic"><a href="javascript:void(0)">Romantic</a></li>
<li id="25" val="Symphony"><a href="javascript:void(0)">Symphony</a></li>
</ul>
</li>
<li id="3" val="Electronic"><a href="javascript:void(0)">Electronic</a>
<ul>
<li id="31" val="Breakbeat"><a href="javascript:void(0)">Breakbeat</a></li>
<li id="32" val="Dance"><a href="javascript:void(0)">Dance</a></li>
<li id="33" val="Electro"><a href="javascript:void(0)">Electro</a></li>
<li id="34" val="House"><a href="javascript:void(0)">House</a></li>
<li id="35" val="Techno"><a href="javascript:void(0)">Techno</a></li>
<li id="36" val="Trance"><a href="javascript:void(0)">Trance</a></li>
</ul>
</li>
<li id="4" val="Metal"><a href="javascript:void(0)">Metal</a>
<ul>
<li id="41" val="Classic+Metal"><a href="javascript:void(0)">Classic Metal</a></li>
<li id="42" val="Heavy+Metal"><a href="javascript:void(0)">Heavy Metal</a></li>
<li id="43" val="Metalcore"><a href="javascript:void(0)">Metalcore</a></li>
<li id="44" val="Power+Metal"><a href="javascript:void(0)">Power Metal</a></li>
</ul>
</li>
<li id="5" val="Pop"><a href="javascript:void(0)">Pop</a>
<ul>
<li id="51" val="Dance+Pop"><a href="javascript:void(0)">Dance Pop</a></li>
<li id="52" val="Oldies"><a href="javascript:void(0)">Oldies</a></li>
<li id="53" val="Top+40"><a href="javascript:void(0)">Top 40</a></li>
<li id="54" val="World+Pop"><a href="javascript:void(0)">World Pop</a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="stlist">__stations__</div>
<div class="clear"></div>
<div class="cred">Powered by <a href="https://script-tutorials.com/">Script Tutorials</a></div>
</div>
</body>
</html>
First – pay attention how script loads jquery library from google. This can be pretty useful if you don’t like to keep this file directly at your host. Our header element contain nice search bar with embedded jasl player. I have used great FFMp3 Live Stream Player for our result. You can read about this player here: http://ffmp3.sourceforge.net/. It allows us play audio streams without any problems. Next – at left side (under the header) we have UL-LI based list of categories (with subcategories). And right side will contain list of last stations and, when we search or select category – right side will be filtered Ajaxy. For now – it cantain __stations__ key (template key) which we will replace to actual value with PHP. Our next template file – template of our radio player:
templates/radio.html
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="191" height="46" bgcolor="#FFFFFF"> <param name="movie" value="player/ffmp3-config.swf" /> <param name="flashvars" value="url=__stream__&lang=en&codec=mp3&volume=100&introurl=&autoplay=true&traking=false&jsevents=false&buffering=5&skin=player/def/skin.xml&title=__title__" /> <param name="wmode" value="opaque" /> <param name="allowscriptaccess" value="always" /> <param name="scale" value="noscale" /> <embed src="player/ffmp3-config.swf" flashvars="url=__stream__&lang=en&codec=mp3&volume=100&introurl=&autoplay=true&traking=false&jsevents=false&buffering=5&skin=player/def/skin.xml&title=__title__" width="191" scale="noscale" height="46" wmode="opaque" bgcolor="#FFFFFF" allowscriptaccess="always" type="application/x-shockwave-flash" /> </object>
Of course, it contains own template keys (__title__ and __stream__) which we will use after.
Step 2. CSS
Here are our stylesheets files:
css/main.css
First one just contains styles of our test page (this file always available in our package)
css/radio.css
/* header area */
.header {
height:62px;
}
.header input {
background:#aaa url(../images/search.png) no-repeat 5px center;
border:1px solid #888;
border-radius:10px;
float:right;
margin:14px 10px 0 0;
outline:none;
padding-left:20px;
width:200px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.header input:focus {
background-color:#eee;
width:300px;
}
.header > span {
display:block;
float:left;
line-height:40px;
padding:7px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
/* stations list */
.stlist {
float:right;
margin-right:1%;
width:71%;
}
.stlist ul {
list-style:none outside none;
margin:0;
padding:0;
}
.stlist ul li {
border-bottom:1px dotted #444;
overflow:hidden;
padding:10px;
}
.stlist ul li > a > img {
border:1px solid #CCC;
float:left;
height:85px;
margin-right:15px;
padding:1px;
width:85px;
}
.stlist ul li > div {
float:right;
margin-left:15px;
margin-top:-5px;
}
.stlist ul li > p.label,.stlist ul li > p.track {
font-size:11px;
font-weight:700;
}
.stlist ul li > p.label {
color:#888;
}
.stlist ul li > p.channel {
font-size:14px;
font-weight:700;
margin-bottom:17px;
}
/* genres list */
.genres_par {
border-right:1px solid #ccc;
float:left;
width:26%;
}
ul.genres,ul.genres ul {
list-style-type:none;
margin:0;
padding:0;
}
ul.genres ul {
display:none;
overflow:hidden;
padding:0 15px;
}
ul.genres ul li {
margin:3px;
}
ul.genres a {
color:#333;
display:block;
font-size:18px;
padding:4px 0;
text-align:center;
text-decoration:none;
}
ul.genres ul a {
font-size:12px;
text-align:left;
}
ul.genres li {
border-bottom:1px solid #CCC;
margin:0;
}
ul.genres li ul li a {
background:none repeat scroll 0 0 #5bb951;
border-radius:2px;
color:#FFF;
font-size:12px;
padding:6px;
}
ul.genres li ul li a:hover {
background-color:#53854E;
}
Step 3. JS
js/script.js
$(document).ready(function(){
$('#search').blur(function() {
if ('' == $('#search').val()) $('#search').val('Search');
});
$('#search').focus(function() {
if ('Search' == $('#search').val()) $('#search').val('');
});
$('ul.genres li a').click( // category slider
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('.genres li ul').slideUp(150);
$(this).next().slideToggle(150);
}
}
);
$('ul.genres ul li a').click( // get stations by category
function() {
$.ajax({
type: 'GET',
url: 'index.php',
data: 'action=get_genre_stations&id=' + $(this).parent().attr('id') + '&name=' + $(this).parent().attr('val'),
success: function(data){
$('.stlist').fadeOut(400, function () {
$('.stlist').html(data);
$('.stlist').fadeIn(400);
});
}
});
}
);
});
function play(id) { // play function
$('#rplayer').load('index.php?action=play&id=' + id, function() {});
return false;
}
function get_stations_by_keyword() { // get stations by keyword
var keyword = $('#search').val().replace(/ /g,"+");
$.ajax({
type: 'GET',
url: 'index.php',
data: 'action=get_keyword_stations&key=' + keyword,
success: function(data){
$('.stlist').fadeOut(400, function () {
$('.stlist').html(data);
$('.stlist').fadeIn(400);
});
}
});
}
As you see – nothing is difficult there. Just several event handlers, and two new functions (to play radio station and so search for stations by keyword).
Step 4. PHP
index.php
<?php
// set error reporting level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
$aStations = array(
0 => array(
'category' => 31,
'name' => 'EuroDance',
'desc' => 'The newest and best of Eurodance hits',
'url' => 'http://www.di.fm/eurodance',
'br' => 96,
'stream' => 'http://scfire-mtc-aa06.stream.aol.com:80/stream/1024'
),
1 => array (
'category' => 34,
'name' => 'House',
'desc' => 'Silky sexy deep house music direct from New York city!',
'url' => 'http://www.di.fm/house',
'br' => 96,
'stream' => 'http://scfire-ntc-aa04.stream.aol.com:80/stream/1007'
),
2 => array (
'category' => 13,
'name' => 'Trance',
'desc' => 'The hottest, freshest trance music from around the globe!',
'url' => 'http://www.di.fm/trance',
'br' => 96,
'stream' => 'http://scfire-ntc-aa04.stream.aol.com:80/stream/1003'
),
3 => array (
'category' => 51,
'name' => 'Electro House',
'desc' => 'An eclectic mix of electro and dirty house',
'url' => 'http://www.di.fm/electro',
'br' => 96,
'stream' => 'http://scfire-ntc-aa04.stream.aol.com:80/stream/1025'
)
);
function searchByCat($iCat, $aStations) {
$aRes = array();
foreach ($aStations as $i => $aInfo) {
if ($aInfo['category'] == $iCat) {
$aRes[$i] = $aInfo;
}
}
return $aRes;
}
function searchByKeyword($sKey, $aStations) {
$aRes = array();
foreach ($aStations as $i => $aInfo) {
if (false !== strpos($aInfo['name'], $sKey) || false !== strpos($aInfo['desc'], $sKey)) {
$aRes[$i] = $aInfo;
}
}
return $aRes;
}
function parseStationList($aData) {
$sStations = '';
if (is_array($aData) && count($aData) > 0) {
foreach ($aData as $i => $a) {
$sStationId = $i;
$sStationBr = (int)$a['br'];
$sStationName = $a['name'];
$sStationDesc = $a['desc'];
$sStationUrl = $a['url'];
$sThumb = 'media/'.($sStationId+1).'.png';
$sStations .= <<<EOF
<li>
<a href="{$sStationId}" onclick="return play('{$sStationId}'); return false;"><img alt="{$sStationName}" src="{$sThumb}" title="{$sStationName}"></a>
<div class="i">
<p>Bitrate: {$sStationBr}</p>
</div>
<p class="channel"><a href="{$sStationId}" onclick="return play('{$sStationId}'); return false;">{$sStationName}</a></p>
<p class="track">{$sStationDesc}</p>
<p class="label">{$sStationUrl}</p>
</li>
EOF;
}
}
$sStations = ($sStations == '') ? '<li>Nothing found</li>' : $sStations;
return '<ul>' . $sStations . '</ul>';
}
switch ($_GET['action']) {
case 'play':
$i = (int)$_GET['id'];
$aInfo = $aStations[$i];
$aVars = array (
'__stream__' => $aInfo['stream'],
'__title__' => $aInfo['name']
);
echo strtr(file_get_contents('templates/radio.html'), $aVars); exit;
break;
case 'get_genre_stations':
$i = (int)$_GET['id'];
$aSearch = searchByCat($i, $aStations);
$sStations = parseStationList($aSearch);
header('Content-Type: text/html; charset=utf-8');
echo $sStations; exit;
break;
case 'get_keyword_stations':
$sKey = $_GET['key'];
$aSearch = searchByKeyword($sKey, $aStations);
$sStations = parseStationList($aSearch);
header('Content-Type: text/html; charset=utf-8');
echo $sStations; exit;
break;
}
$sLastStations = parseStationList($aStations);
echo strtr(file_get_contents('templates/main_page.html'), array('__stations__' => $sLastStations));
At the beginning, I have prepared list of our radio stations (4 stations total). Then – two search functions: ‘searchByCat’ and ‘searchByKeyword’. After – special function ‘parseStationList’ which will transform array with filtered stations into its HTML representation. And, at the end – little switch case to manage with our inner ajax commands.
Live Demo
Conclusion
You are always welcome to enhance our script and share your ideas. I will be glad to see your thanks and comments. Good luck!
Sorry, maybe I’m blind, but I didn’t see anything about radios streaming in this tutorial. Or maybe that wasn’t even the purpose? Then why the title?
This is stream radio script, which mean that this is radio script to listen audio streams (which is usual for online radio). I had just prepared nice realization of radio script.
very nice script please admin am always looking for same thing like this please am using a wamp server how do i make it work on my computer or how do i add music
Hello issaka,
You always can make it work even at localhost. As example, I developed this script at WAMP too. How to search for new audio streams – try in google (as I mentioned in my previous answer)
Can i know when & how get the stream for radio.
I’m from Malaysia, i want get for local radio.
Hello Das,
You can easily search for these streams in google (where you have to type: radio stream url).
Or you can inspect existed radio stations with using firebug (free plugin for firefox).
Hello admin,
How can i limit the number of station showing in the front page eg, if i have 15 stations, i would like to show only 5 stations in the home page how can i limit? or cut that by number of pages navigation?
Hello Kishan,
In this case you have to prepare a bigger list of radio-stations (into array $aStations), and then – just extract a necessary amount of stations for index page case (the end of the main file), and for ‘get_genre_stations’ case.
Thank you !!!! thank you….
I have been looking for a script like this for over 2 years. wow! I thank you for donating this and your time to us. I only wonder what if this script had an admin page where to edit and add new stations. is it possible? I’d like to have a custom script like this made.
Hello Richard,
Yes, of course, everything is possible, but I made it as a commercial product (with admin panel etc)
Where could i find the commercial product?
Is there a link to purchase the commercial version? :)
Hi Viktor,
For instance: http://www.boonex.com/m/radio-module
Thank you, but isn’t that a module for dolphin cms?
Yes, exactly, I developed it as the commercial module for Dolphin CMS. Are you looking for a stand alone commercial solution?
Can you please tell me what control, you have used for Radio Play/Stop at the top left?
Hi Ria,
As I mentioned before, this is FFMp3 Live Stream Player (flash object)
hello, nice job :)
its possible “port” this to word press?
Sure, this is possible
and the player open in a new window?
Hello.. is there an xml type file that should be included in this? I don;t understand how to add stations, categories, etc
Also, can thisONLY run on Drupal?
thanks!
Hi junkeeq,
By default – all stations are stored in an array in index.php file. If you need – just expand this array, or, you also can keep your stations in your database. And, why – Drupal? :-) and why- ‘only’ ?
It can work everywhere. In any CMS (like dolphin, joomla, dle or drupal), it doesn’t matter
How to use a different flash player?
Thanks in advance.
Tom
Hello Tom,
If you have another stream flash player – you should just integrate it with your script. There is no any ready instruction of course, it can be very custom
No work.. network errr
Hi Matei,
This is just because all these radiostations changed their URLs (stream urls). But it works well with other stations (in my own commercial version). I just need to update urls of these stations for this demo.
Hi Andrew! Error in IE – ShowInfo, stopSound, playSound, setVolume – NULL
?????? ??????! ? IE ???? 8 ?????? ?????? ??????: “?? ??????? ?????? ???????? ShowInfo, stopSound, playSound, setVolume ????????? ??????? ???????? NULL ??? ?? ?? ?????????”
Hi, Yes, the interesting behavior of the flash player, especially when none of these functions are not present in the sources of demo. I think – this is just inner functional of the flash player.
??????, ??, ?????????? ????????? ????? ???? ??????, ???????? ????? ?? ???? ?? ????????????? ??????? ?? ???????????? ? ?????? ?????. ????? – ??? ??? ??????? – ????? ??????????? ??????????? ???? ??????.
Hello ! it’s nice demo !!
what is the license of the source code
Hello Jerry, our terms are listed here: https://script-tutorials.com/terms-of-use/
Nicely done man, I hope one day i get the skills to understand this thing. Am right now learning php :) And hope i cud get to ur level soon :))
Hello
It was pleasant to me your it is Radio, but there is one problem how to make that the menu it was possible to close? After a choice of a stream., what code or ??? needs to be added?.
And that it remains opened, it would be desirable closed.
Hi LEET,
You can use ordinary jQuery to close an opened element from the menu
???? ????) ???-?????? ?????? ???? ??? ?????? ???? ?????? ?? ??????? – ??? ??????? ???-?? ???? ??????????? ????? ?????? ??????,? ?? ??? ???????? ????????, ??? ????? ????????? ??????? ???-????? ?? ????? ???? ??????????..
??????, ??????? ?????? ????????? ???, ?.?. ???????? ???????? ?? ??? ????????? ?????? ???????, ?, ???? ??? ?? ??????????? ??????? – ?? ?????? ??????? ?????? (?? ??? ?????). ???? ?? ??? ?? ??? ???? ????????? ????????? – ?? ??????????, jQuery ???????.
Hello, I saw the demo you made for dolphin . very nice. Unfortunately I will not use dolphin I want it as a stand alone commercial solution . You said , Yes, of course, you can make it as a commercial product (with admin panel etc). can you contact me via my email. So, I can give you all the details. I also would not mind to have it running on WordPress . I will be waiting for your email. Thank you.
Thanks Richard, I will create it
Hello Admin,
How can you use jquery to create pagination for the radio list if it gets too long. Can you do an example with the current sourse code. Your help will be greatly appreciated.
Hello Dawain, there are several ways:
a) to develop php pagination
b) to implement https://script-tutorials.com/creating-modern-jquery-pagination-for-content/
c) to implement any other ready (jquery) solution
hi im madhu. i want to make a website like online radio . like http://bedupako.com/ . my doubt is , how he running songs on background using web services . 100 songs which have mentioned VIEW PAGE SOURCE but again the 100 songs are changed , after checking the site the songs are changed , new songs are coming ….how it happend
Hi madhu,
This website used AJAX navigation (so it doesn’t reload the index page during navigation, it doesn’t reload the player). Songs are changed by ajax refresh too.
Hi Admin,
I have a stream url its working in windows media player, but when i add to your script it does not work :-s
Can you help Please.
Thanks
Hello Waqas,
You may try to add
;&topspeed=on
in the end of your stream URL.
What is the stream URL?
Hi there ! the following URL it’s working fine in Windows Media Player but not on Stream Audio Player… what should be wrong?
http://bskybwlivewm.fplive.net:80/bskybnewsfree-live/skynews-300k?MSWMExt=.asf
Thank you for you advice !!!
Hi Edward,
As I know, the used player supports the following stream formats: AAC, MP3 and OGG
But your stream is ASF (it may be not supported)
Content Type: audio/mpeg
Hello.
How to know what song is playing now?
Can I see the standalone demo of commercial version?
Hi serious911,
Yes, you can find it here: http://www.demozzz.ru/d71/m/radio/
hello how can i change it in order to use html5 audio player frist ?if broswer dont support html5 use flash player .thank you
Hi sayiwen,
In our tutorial I explained how to work with flash player. If you want to use html5 audio player, I think that the first thing you need to do is to implement the html5 player into your project, and then you will be able to offer both players for your visitors.
Andrey
The Stream Radio script i was testing it its a nice script but can you include where user can add station to the script upload there logo the name of radio ect and it add to the script
Hi Vincent,
First of all, you will need to create a registration system (this is already done in few of our tutorials). Once you done it, you will need to use this ready login system to manage with permissions of who is eligible to add radio stations. This is not very difficult, however it requires some time to implement it.
Hello!
My name is Saddam ZEMMALI, i’m Student in Master Engineering Information System and Member in Ubuntu-Tunisia!
I’m planning to do my final year project based on cloud computing: “Live Internet Radio Broadcasting on cloud computing”
I would like you all to provide your valuable feedback and suggestions regarding the same and help me in making my project successful…
Thanks advance..!!
Hi Zemmali,
Congratulations with your project title – it looks great. Our tutorial is related to this only indirectly, so you will need to continue your researches
hello,whether this application can be used on android phone?
Hi Mahendra,
Yes, it can be used on android-based phones.