Using Shoutcast, Display Now Playing Album Art

Question

I have a small 70x70 box in an HTML player I built where I wish to place in the album artwork to coincide with my now playing information from my shoutcast server. Is there a way, using the artist-song information the shoutcast server provides, that I can search a web service (amazon/last.fm) and have it place the (most likely) album cover there?

Here is the JS code I'm using now:

jQuery(document).ready(function() {
    pollstation();
    //refresh the data every 30 seconds
    setInterval(pollstation, 30000);
});

// Accepts a url and a callback function to run.  
function requestCrossDomain( callback ) {  
    // Take the provided url, and add it to a YQL query. Make sure you encode it!  
    var yql = 'http://s7.viastreaming.net/scr/yql.php?port='+port+'&username='+user+'&callback=?';
    // Request that YSQL string, and run a callback function.  
    // Pass a defined function to prevent cache-busting.  
    jQuery.getJSON( yql, cbFunc );

    function cbFunc(data) {  
    // If we have something to work with...  
    if ( data ) {  
        // Strip out all script tags, for security reasons. there shouldn't be any, however
        data = data[0].results.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');
        data = data.replace(/<html[^>]*>/gi, '');
        data = data.replace(/<\/html>/gi, '');
        data = data.replace(/<body[^>]*>/gi, '');
        data = data.replace(/<\/body>/gi, '');

        // If the user passed a callback, and it  
        // is a function, call it, and send through the data var.  
        if ( typeof callback === 'function') {  
            callback(data);  
        }  
    }  
    // Else, Maybe we requested a site that doesn't exist, and nothing returned.  
    else throw new Error('Nothing returned from getJSON.');  
    }  
}  

function pollstation() {
    requestCrossDomain(function(stationdata) {

        var lines = stationdata.split('|+|');

        jQuery('#sname').html(lines[0]);

        jQuery('#sgenre').html(lines[1]);

        jQuery('#clisteners').html(lines[2]);

        jQuery('#bitrate').html(lines[3]);

        jQuery('#artist_block').html('' + jQuery.trim(lines[4]) + '');

        var prev = lines[5].split('+|+');
        jQuery('#np_table').html('');

        for (var i = 0; i < 8; i++) 
        {    
            if(typeof(prev[i]) != 'undefined')
            {           
                jQuery('#np_table').append('<tr>'+'<td>'+ prev[i] + '</td>'+'</tr>');
                jQuery("tr:odd").css("background-color", "#154270");
            }

        }   

        jQuery('#mplayers').html(lines[6]); 

        jQuery('#mobile').html(lines[7]);

        jQuery();
    } );
}

and here's the HTML:

<div id="col_left">
        <div id="now_playing">
            <div id="np_ribbon"><span>Now Playing</span></div>
            <div id="np_img"><img name="nowplayingimage" src="" width="70" height="70" alt="album cover" style="background-color: #000000" /></div>
            <div id="artist_block">
                <span class="artist_name"><strong>Artist:</strong> Artist name</span><br />
                <span class="song_name"><strong>Song:</strong> &quot;song title&quot;</span><br />
                <span class="album_name"><strong>Album:</strong> Album Name</span> <br />


            </div> 
            <div id="player">
            <div id="container"><script type="text/javascript" src="http://shoutcast.mixstream.net/js/external/flash/s7.viastreaming.net:8790:0:::999999:::1"></script></div>
        </div>
        </div><!-- end now playing -->
    <div id="recent">
            <div class="table_title">Recently Played</div>
    <table id="np_table">

     </table>
        </div><!-- end recent -->


    </div><!-- end col_left -->

So naturally, I want the image to appear where the div "np_img" is. Any ideas what code to use and how to implement it. You can probably tell by my code that I'm an amateur so please be clear and gentle. :)

Answer 1

You can use the iTunes search API. It supports JSONP so you can use it directly within your webpage, without worrying about cross-domain.

As @Brad mentioned, iTunes has terms of use. In particular:

(...) provided such Promo Content: (i) is placed only on pages that promote the content on which the Promo Content is based; (ii) is proximate to a "Download on iTunes" or "Available on the App Store" badge (as approved by Apple) that acts as a link directly to pages within iTunes or the App Store where consumers can purchase the promoted content. (...)

Here's how the code looks like:

​function refreshArtwork(artist, track) {    
    $.ajax({
      url: 'http://itunes.apple.com/search',
      data: {
        term: artist + ' ' + track,
        media: 'music'
      },
      dataType: 'jsonp',
      success: function(json) {
        if(json.results.length === 0) {
          $('img[name="nowplayingimage"]').attr('src', '');
          return;
        }

        // trust the first result blindly...
        var artworkURL = json.results[0].artworkUrl100;
        $('img[name="nowplayingimage"]').attr('src', artworkURL);
      }
   });
}