RadioDJ tutorials


    Album Art on your web site.

    There are more ways to accomplish this, let start with one.

    1. Info from the database.
    2. The First Page.
    3. The Second Page.

    To show the code in the files i use notepad++ (it's freeware) so there are colors to clarify it beter. Use mouse pointer to enlarge a photo.


    Info from the database.

    How getting the album art and artist info from the database.

    Most of the information is retrieved from the table history, so make sure the Keep History For is set at least on 1 day.

    From the table songs we get the name of the album art pic.


    You have to write two pages, i will explain how with the use of notepad++.

    At first make a folder like c:\code on your hard drive to store the files you make.

    We start with:

    The First Page.

    Start notepad.exe.

    A new page is in the screen new 1, click on file (top left) and use Save As...
    Open the folder code and save the file as live.php

    The file new 1 has now the name live.php
    Type the same lines in your notepad++.

    <!DOCTYPE html>
    <html>
    <title></title>
    <head>
    <meta charset="utf-8" />
    </head>
    <body>
    
    
    </body>
    </html>
    

    Now click on the floppy to save the file.

    And for a auto refresh of the info we don't wand the whole page to refresh, if we also have a player in the page he will get the hiccups.
    We just put some refresh code between line 5 and 6.

    Type the same lines in your notepad++.

    Refresh code:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
     $(document).ready(function() {
     	$("#album-container").load("albumart.php");
       var refreshId = setInterval(function() {
        $("#album-container").load('albumart.php');
        }, 5000); //set refresh time 5.000 = 5 sec
       $.ajaxSetup({ cache: false });
    });
    </script>
        

    As you will se, notepad adjust the line numbering

    So on line 18 we put in:

    
     <center>
    <table style="width: 40%">
     <tr>
       <td>
    <div id="album-container"></div>
      </td>
     </tr>
    </table>
    </center>
    
    

    This is the place we wand to show the info, in a table and centered on the page.

    What we have written in the file was just HTML and a little jquery.

    Why is it then a PHP file?

    Just so you can expand the file if you like to show more like a HTML5 player.

    HTML5 player code:

    
    <?php
    $radio_ip = "127.0.0.1"; // IP of the icecast or shoutcast player.
    $radio_port = "8000"; //The port of the icecast or shoutcast player.
    $radio_stream = "mpeg"; //Type of stream mpeg=mp3, ogg=ogg and opus, wav=wav, aacp=aac+.
    $radio_mountpoint = "listen"; //The mountpoint that is used.
    ?>
    <!-- Start block 1 Icecast player -->
    <audio autoplay="autoplay" controls="controls" >
    <source src="http://<?php echo $radio_ip; ?>:
    <?php echo $radio_port; ?>/
    <?php echo $radio_mountpoint; ?>" type="audio/
    <?php echo $radio_stream; ?>">
    Your browser does not support the audio element.
    </audio>
    <!-- End block 1 Icecast player -->
    
    <!-- Start block 2 Shoutcast mp3 player -->
    <audio controls autoplay="autoplay">
    <source src="http://<?php echo $radio_ip; ?>:<?php echo $radio_port; ?>/;stream.mp3"
    type="audio/mpeg">
    Your browser does not support the audio element.
    </audio>
    <!-- End block 2 Shoutcast mp3 player -->
    

    End result is then:

    Don't forget to save the file.


    The Second Page.

    What we need is album art, the artist name and the song title to show from the database.

    Click on File and click on New. You have a new page now, click on File and Save As...
    Save it as albumart.php.

    The start code:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    </head>
    <body>
    <?php
    
    
    ?>
    </body>
    </html>
        

    Between the php opening (<?php) and closing (?>) tags we put some strings to connect to the database done in blocks.

    The strings:

    <!-- Start php block 1 -->
    <?php
    $database_ip= "127.0.0.1"; //The database IP addres.
    $database_port= "3306"; //The database port number.
    $database_name= "radiodj162"; //The database name.
    $database_user= "root"; //The database user name.
    $database_pass= "changeme"; // The database password.
    date_default_timezone_set('Europe/Amsterdam'); //Used for the date and time settings.
    ?>
    <!-- End php block 1 -->
        

    You have to change the date_default_timezone_set('') Europe/Amsterdam to your time zone.

    New block:

    >!-- Start php block 2 -->
    <?php
    // Connection to the database.
    $con = mysqli_connect($database_ip, $database_user, $database_pass, $database_name, $database_port);
    //On error.
    if (mysqli_connect_errno()){ echo "No connection to the database."; }
    ?>
    <!-- End php block 2 -->
            

    Note: Now you have the option to test the script (albumart.php file).
    You can upload or copy the file to the server and test if there is a connection to the database.

    In the addres bar: http://YOUR SERVER/albumart.php

    If you get a blank page, your connected to the database.

    If you get a error like:
    Warning: mysqli_connect(): (HY000/1045): Access denied for user 'root'@'localhost' (using password: YES) in albumart.php on line 20.
    No connection to the database.


    line 20 is:
    $con = mysqli_connect($database_ip, $database_user, $database_pass, $database_name, $database_port);
    So in block 1 is a error, check if all is filed correctly.

    Let say your having a connection, then we can get info from the database.
    We use two tables history and songs.

    Start block 3 (for getting the info).

    <!-- Start php block 3 -->
    <?php
    define('ALBUM_ART_PATH', "./album_art/"); // Location of album art on local file system
    define('ALBUM_ART_URL', "album_art/"); // URL of album art directory
    
    $con_his= "SELECT *, history.duration-TIMESTAMPDIFF(SECOND, history.date_played, NOW())
    AS remaining
    FROM history, songs
    WHERE songs.title = history.title AND songs.artist = history.artist
    AND history.song_type = 0
    ORDER BY history.date_played DESC
    LIMIT 1";
    
    $result = mysqli_query($con, $con_his);
    
    while($row = mysqli_fetch_assoc($result)) {
    $album_art= $row['album_art'];
    $artist= $row['artist'];
    $title= $row['title'];
    $image_album= "album_art/no-cover.jpg";
    $year= $row['year'];
    $album= $row['album'];
    $listen= $row['listeners'];
    $genre= $row['genre'];
    }
    ?>
    <!-- End block 3 -->
        

    define('ALBUM_ART_PATH', "./album_art/"); // Location of album art on local file system
    define('ALBUM_ART_URL', "album_art/"); // URL of album art directory

    In this lines you can see, ./album_art/ and album_art/, it's tells where the album art folder on the server is.

    So make a folder on the server with the name album_art, copy all the album art from the folder c:\RadioDJ\Album-Art\ to the folder on the server.

    Only one does not exist, no-cover.jpg you have to make one or use this one no-cover.jpg in the zip file     

    Lets make block 4.

    <!-- Start block 4 -->
    <table valign="top" align="left">
      <td valign="top" align="left" style="font-size: medium">
    
    <?php
     if (!empty($album_art) && file_exists(ALBUM_ART_PATH.$album_art)) {
        echo '<img src='.ALBUM_ART_URL.htmlspecialchars($album_art).' height="125"></center>';
      }else{
        echo '<img src='.$image_album.' height="125"></center></td>';
     }
    
      Echo "<b>".$artist.".</b><br>".$title.".<br>";
      if (!empty($year)){
      echo $lang['YEAR'].": ".$year.".<br>";
      }
     if (!empty($genre)){
      echo $lang['GENRE'].": ".$genre.".<br>";
      }
    ?>
      </td></table>
    
        


    That's it, save the file, put the two on the server and test.

    A preview:



    This are some simply example script's, how to create album art on your website.
    You can also make use of a css file or css block to make it look beter.

    It's a bit more coding and pasta in the files, but it's up to you.

    Greetings, Jhonny.


    PS. For those who have thick fingers and hit two keys at once, look in this folder.

Back to top
©  JWL  2013 | 2017