Stream Radio Script

Stream Radio Script

57 79305
Stream Radio Script
Stream Radio Script

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

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="http://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="http://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!


57 COMMENTS

  1. 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.

  2. 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)

    • 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).

  3. 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.

  4. 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.

  5. Yes, exactly, I developed it as the commercial module for Dolphin CMS. Are you looking for a stand alone commercial solution?

  6. 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

    • 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

    • 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.

  7. 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.
      Привет, Да, интересное поведение этого флеш плеера, особенно когда ни одна из перечисленных функций не присутствует в сорсах демки. Думаю – все эти функции – часть внутреннего функционала флеш плеера.

  8. 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 :))

  9. 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.

  10. всем прив) кто-нибудь ставил себе это Радио? есть вопрос на засыпку – как сделать что-бы Меню закрывалось после выбора потока,а то оно остается открытым, что нужно добавить? поможет кто-нить? за ранее всем благодарен..

    • Привет, особого смысла закрывать нет, т.к. наиболее вероятно то что слушатель просто слушает, и, если ему не понравилась станция – он просто откроет другую (то что рядом). Если же все же вам надо закрывать категории – то закрывайте, jQuery поможет.

  11. 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.

  12. 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.

  13. 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.

  14. 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 !!!

  15. 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)

  16. 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.

  17. 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.

  18. 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

Leave a Reply