Home » Tutorials

Stream Radio Script

Tutorials
Author Reading 31 min Views 3.3k. Published by Modified by

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:

Contents
  1. Step 1. HTML Markup
  2. templates/main_page.html
  3. templates/radio.html
  4. Step 2. CSS
  5. css/main.css
  6. css/radio.css
  7. Step 3. JS
  8. js/script.js
  9. Step 4. PHP
  10. index.php
  11. Conclusion
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

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>Stream Radio Script | Script Tutorials</title>
06         <link href="css/main.css" rel="stylesheet" type="text/css" />
07         <link href="css/radio.css" rel="stylesheet" type="text/css" />
08         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
09         <script>
10             google.load("jquery", "1.7.1");
11         </script>
12         <script src="js/script.js"></script>
13     </head>
14     <body>
15         <header>
16             <h2>Stream Radio Script</h2>
17             <a href="https://www.script-tutorials.com/stream-radio-script/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
18         </header>
19         <div class="container">
20             <form method="get" class="header" action="javascript:void(0)" onsubmit="get_stations_by_keyword(); return false;">
21                 <input type="text" id="search" value="Search" name="s">
22                 <span>
23                     <div id="rplayer">
24                         <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="191" height="46" bgcolor="#FFFFFF">
25                         <param name="movie" value="player/ffmp3-config.swf" />
26                         <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" />
27                         <param name="wmode" value="opaque" />
28                         <param name="allowscriptaccess" value="always" />
29                         <param name="scale" value="noscale" />
30                         <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" />
31                         </object>
32                     </div>
33                 </span>
34             </form>
35             <div class="clear"></div>
36             <div class="genres_par">
37                 <ul class="genres">
38                     <li id="1" val="Alternative"><a href="javascript:void(0)">Alternative</a>
39                         <ul>
40                             <li id="11" val="Classic+Alternative"><a href="javascript:void(0)">Classic Alternative</a></li>
41                             <li id="12" val="Industrial"><a href="javascript:void(0)">Industrial</a></li>
42                             <li id="13" val="New+Wave"><a href="javascript:void(0)">New Wave</a></li>
43                             <li id="14" val="Punk"><a href="javascript:void(0)">Punk</a></li>
44                         </ul>
45                     </li>
46                     <li id="2" val="Classical"><a href="javascript:void(0)">Classical</a>
47                         <ul>
48                             <li id="21" val="Modern"><a href="javascript:void(0)">Modern</a></li>
49                             <li id="22" val="Opera"><a href="javascript:void(0)">Opera</a></li>
50                             <li id="23" val="Piano"><a href="javascript:void(0)">Piano</a></li>
51                             <li id="24" val="Romantic"><a href="javascript:void(0)">Romantic</a></li>
52                             <li id="25" val="Symphony"><a href="javascript:void(0)">Symphony</a></li>
53                         </ul>
54                     </li>
55                     <li id="3" val="Electronic"><a href="javascript:void(0)">Electronic</a>
56                         <ul>
57                             <li id="31" val="Breakbeat"><a href="javascript:void(0)">Breakbeat</a></li>
58                             <li id="32" val="Dance"><a href="javascript:void(0)">Dance</a></li>
59                             <li id="33" val="Electro"><a href="javascript:void(0)">Electro</a></li>
60                             <li id="34" val="House"><a href="javascript:void(0)">House</a></li>
61                             <li id="35" val="Techno"><a href="javascript:void(0)">Techno</a></li>
62                             <li id="36" val="Trance"><a href="javascript:void(0)">Trance</a></li>
63                         </ul>
64                     </li>
65                     <li id="4" val="Metal"><a href="javascript:void(0)">Metal</a>
66                         <ul>
67                             <li id="41" val="Classic+Metal"><a href="javascript:void(0)">Classic Metal</a></li>
68                             <li id="42" val="Heavy+Metal"><a href="javascript:void(0)">Heavy Metal</a></li>
69                             <li id="43" val="Metalcore"><a href="javascript:void(0)">Metalcore</a></li>
70                             <li id="44" val="Power+Metal"><a href="javascript:void(0)">Power Metal</a></li>
71                         </ul>
72                     </li>
73                     <li id="5" val="Pop"><a href="javascript:void(0)">Pop</a>
74                         <ul>
75                             <li id="51" val="Dance+Pop"><a href="javascript:void(0)">Dance Pop</a></li>
76                             <li id="52" val="Oldies"><a href="javascript:void(0)">Oldies</a></li>
77                             <li id="53" val="Top+40"><a href="javascript:void(0)">Top 40</a></li>
78                             <li id="54" val="World+Pop"><a href="javascript:void(0)">World Pop</a></li>
79                         </ul>
80                     </li>
81                 </ul>
82                 <div class="clear"></div>
83             </div>
84             <div class="stlist">__stations__</div>
85             <div class="clear"></div>
86             <div class="cred">Powered by <a href="https://www.script-tutorials.com/">Script Tutorials</a></div>
87         </div>
88     </body>
89 </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

1 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="191" height="46" bgcolor="#FFFFFF">
2 <param name="movie" value="player/ffmp3-config.swf" />
3 <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__" />
4 <param name="wmode" value="opaque" />
5 <param name="allowscriptaccess" value="always" />
6 <param name="scale" value="noscale" />
7 <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" />
8 </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

001 /* header area */
002 .header {
003     height:62px;
004 }
005 .header input {
006     background:#aaa url(../images/search.png) no-repeat 5px center;
007     border:1px solid #888;
008     border-radius:10px;
009     float:right;
010     margin:14px 10px 0 0;
011     outline:none;
012     padding-left:20px;
013     width:200px;
014     -webkit-transition: 0.5s;
015     -moz-transition: 0.5s;
016     -o-transition: 0.5s;
017     transition: 0.5s;
018 }
019 .header input:focus {
020     background-color:#eee;
021     width:300px;
022 }
023 .header > span {
024     display:block;
025     float:left;
026     line-height:40px;
027     padding:7px;
028     -webkit-transition: 0.5s;
029     -moz-transition: 0.5s;
030     -o-transition: 0.5s;
031     transition: 0.5s;
032 }
033 /* stations list */
034 .stlist {
035     float:right;
036     margin-right:1%;
037     width:71%;
038 }
039 .stlist ul {
040     list-style:none outside none;
041     margin:0;
042     padding:0;
043 }
044 .stlist ul li {
045     border-bottom:1px dotted #444;
046     overflow:hidden;
047     padding:10px;
048 }
049 .stlist ul li > a > img {
050     border:1px solid #CCC;
051     float:left;
052     height:85px;
053     margin-right:15px;
054     padding:1px;
055     width:85px;
056 }
057 .stlist ul li > div {
058     float:right;
059     margin-left:15px;
060     margin-top:-5px;
061 }
062 .stlist ul li > p.label,.stlist ul li > p.track {
063     font-size:11px;
064     font-weight:700;
065 }
066 .stlist ul li > p.label {
067     color:#888;
068 }
069 .stlist ul li > p.channel {
070     font-size:14px;
071     font-weight:700;
072     margin-bottom:17px;
073 }
074 /* genres list */
075 .genres_par {
076     border-right:1px solid #ccc;
077     float:left;
078     width:26%;
079 }
080 ul.genres,ul.genres ul {
081     list-style-type:none;
082     margin:0;
083     padding:0;
084 }
085 ul.genres ul {
086     display:none;
087     overflow:hidden;
088     padding:0 15px;
089 }
090 ul.genres ul li {
091     margin:3px;
092 }
093 ul.genres a {
094     color:#333;
095     display:block;
096     font-size:18px;
097     padding:4px 0;
098     text-align:center;
099     text-decoration:none;
100 }
101 ul.genres ul a {
102     font-size:12px;
103     text-align:left;
104 }
105 ul.genres li {
106     border-bottom:1px solid #CCC;
107     margin:0;
108 }
109 ul.genres li ul li a {
110     background:none repeat scroll 0 0 #5bb951;
111     border-radius:2px;
112     color:#FFF;
113     font-size:12px;
114     padding:6px;
115 }
116 ul.genres li ul li a:hover {
117     background-color:#53854E;
118 }

Step 3. JS

js/script.js

01 $(document).ready(function(){
02     $('#search').blur(function() {
03         if ('' == $('#search').val()) $('#search').val('Search');
04     });
05     $('#search').focus(function() {
06         if ('Search' == $('#search').val()) $('#search').val('');
07     });
08     $('ul.genres li a').click( // category slider
09         function() {
10             var checkElement = $(this).next();
11             if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
12                 $('.genres li ul').slideUp(150);
13                 $(this).next().slideToggle(150);
14             }
15         }
16     );
17     $('ul.genres ul li a').click( // get stations by category
18         function() {
19             $.ajax({
20                 type: 'GET',
21                 url: 'index.php',
22                 data: 'action=get_genre_stations&id=' + $(this).parent().attr('id') + '&name=' + $(this).parent().attr('val'),
23                 success: function(data){
24                     $('.stlist').fadeOut(400, function () {
25                         $('.stlist').html(data);
26                         $('.stlist').fadeIn(400);
27                     });
28                 }
29             });
30         }
31     );
32 });
33 function play(id) { // play function
34     $('#rplayer').load('index.php?action=play&id=' + id, function() {});
35     return false;
36 }
37 function get_stations_by_keyword() { // get stations by keyword
38     var keyword = $('#search').val().replace(/ /g,"+");
39     $.ajax({
40         type: 'GET',
41         url: 'index.php',
42         data: 'action=get_keyword_stations&key=' + keyword,
43         success: function(data){
44             $('.stlist').fadeOut(400, function () {
45                 $('.stlist').html(data);
46                 $('.stlist').fadeIn(400);
47             });
48         }
49     });
50 }

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

001 <?php
002 // set error reporting level
003 if (version_compare(phpversion(), '5.3.0', '>=') == 1)
004   error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
005 else
006   error_reporting(E_ALL & ~E_NOTICE);
007 $aStations = array(
008     0 => array(
009         'category' => 31,
010         'name' => 'EuroDance',
011         'desc' => 'The newest and best of Eurodance hits',
012         'url' => 'http://www.di.fm/eurodance',
013         'br' => 96,
014         'stream' => 'http://scfire-mtc-aa06.stream.aol.com:80/stream/1024'
015     ),
016     1 => array (
017         'category' => 34,
018         'name' => 'House',
019         'desc' => 'Silky sexy deep house music direct from New York city!',
020         'url' => 'http://www.di.fm/house',
021         'br' => 96,
022         'stream' => 'http://scfire-ntc-aa04.stream.aol.com:80/stream/1007'
023     ),
024     2 => array (
025         'category' => 13,
026         'name' => 'Trance',
027         'desc' => 'The hottest, freshest trance music from around the globe!',
028         'url' => 'http://www.di.fm/trance',
029         'br' => 96,
030         'stream' => 'http://scfire-ntc-aa04.stream.aol.com:80/stream/1003'
031     ),
032     3 => array (
033         'category' => 51,
034         'name' => 'Electro House',
035         'desc' => 'An eclectic mix of electro and dirty house',
036         'url' => 'http://www.di.fm/electro',
037         'br' => 96,
038         'stream' => 'http://scfire-ntc-aa04.stream.aol.com:80/stream/1025'
039     )
040 );
041 function searchByCat($iCat, $aStations) {
042     $aRes = array();
043     foreach ($aStations as $i => $aInfo) {
044         if ($aInfo['category'] == $iCat) {
045             $aRes[$i] = $aInfo;
046         }
047     }
048     return $aRes;
049 }
050 function searchByKeyword($sKey, $aStations) {
051     $aRes = array();
052     foreach ($aStations as $i => $aInfo) {
053         if (false !== strpos($aInfo['name'], $sKey) || false !== strpos($aInfo['desc'], $sKey)) {
054             $aRes[$i] = $aInfo;
055         }
056     }
057     return $aRes;
058 }
059 function parseStationList($aData) {
060     $sStations = '';
061     if (is_array($aData) && count($aData) > 0) {
062         foreach ($aData as $i => $a) {
063             $sStationId = $i;
064             $sStationBr = (int)$a['br'];
065             $sStationName = $a['name'];
066             $sStationDesc = $a['desc'];
067             $sStationUrl = $a['url'];
068             $sThumb = 'media/'.($sStationId+1).'.png';
069             $sStations .= <<<EOF
070 <li>
071     <a href="{$sStationId}" onclick="return play('{$sStationId}'); return false;"><img alt="{$sStationName}" src="{$sThumb}" title="{$sStationName}"></a>
072     <div class="i">
073         <p>Bitrate: {$sStationBr}</p>
074     </div>
075     <p class="channel"><a href="{$sStationId}" onclick="return play('{$sStationId}'); return false;">{$sStationName}</a></p>
076     <p class="track">{$sStationDesc}</p>
077     <p class="label">{$sStationUrl}</p>
078 </li>
079 EOF;
080         }
081     }
082     $sStations = ($sStations == '') ? '<li>Nothing found</li>' : $sStations;
083     return '<ul>' . $sStations . '</ul>';
084 }
085 switch ($_GET['action']) {
086     case 'play':
087         $i = (int)$_GET['id'];
088         $aInfo = $aStations[$i];
089         $aVars = array (
090             '__stream__' => $aInfo['stream'],
091             '__title__' => $aInfo['name']
092         );
093         echo strtr(file_get_contents('templates/radio.html'), $aVars); exit;
094         break;
095     case 'get_genre_stations':
096         $i = (int)$_GET['id'];
097         $aSearch = searchByCat($i, $aStations);
098         $sStations = parseStationList($aSearch);
099         header('Content-Type: text/html; charset=utf-8');
100         echo $sStations; exit;
101         break;
102     case 'get_keyword_stations':
103         $sKey = $_GET['key'];
104         $aSearch = searchByKeyword($sKey, $aStations);
105         $sStations = parseStationList($aSearch);
106         header('Content-Type: text/html; charset=utf-8');
107         echo $sStations; exit;
108         break;
109 }
110 $sLastStations = parseStationList($aStations);
111 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!

Rate article
© 2026 Script Tutorials