title: Using Shoutcast, Display Now Playing Album Art
body: <p>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?</p>
  
  <p>Here is the JS code I'm using now:</p>
  
  <pre><code>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+'&amp;username='+user+'&amp;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(/&lt;script[^&gt;]*&gt;[\s\S]*?&lt;\/script&gt;/gi, '');
          data = data.replace(/&lt;html[^&gt;]*&gt;/gi, '');
          data = data.replace(/&lt;\/html&gt;/gi, '');
          data = data.replace(/&lt;body[^&gt;]*&gt;/gi, '');
          data = data.replace(/&lt;\/body&gt;/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 &lt; 8; i++) 
          {    
              if(typeof(prev[i]) != 'undefined')
              {           
                  jQuery('#np_table').append('&lt;tr&gt;'+'&lt;td&gt;'+ prev[i] + '&lt;/td&gt;'+'&lt;/tr&gt;');
                  jQuery("tr:odd").css("background-color", "#154270");
              }
  
          }   
  
          jQuery('#mplayers').html(lines[6]); 
  
          jQuery('#mobile').html(lines[7]);
  
          jQuery();
      } );
  }
  </code></pre>
  
  <p>and here's the HTML:</p>
  
  <pre><code>&lt;div id="col_left"&gt;
          &lt;div id="now_playing"&gt;
              &lt;div id="np_ribbon"&gt;&lt;span&gt;Now Playing&lt;/span&gt;&lt;/div&gt;
              &lt;div id="np_img"&gt;&lt;img name="nowplayingimage" src="" width="70" height="70" alt="album cover" style="background-color: #000000" /&gt;&lt;/div&gt;
              &lt;div id="artist_block"&gt;
                  &lt;span class="artist_name"&gt;&lt;strong&gt;Artist:&lt;/strong&gt; Artist name&lt;/span&gt;&lt;br /&gt;
                  &lt;span class="song_name"&gt;&lt;strong&gt;Song:&lt;/strong&gt; &amp;quot;song title&amp;quot;&lt;/span&gt;&lt;br /&gt;
                  &lt;span class="album_name"&gt;&lt;strong&gt;Album:&lt;/strong&gt; Album Name&lt;/span&gt; &lt;br /&gt;
  
  
              &lt;/div&gt; 
              &lt;div id="player"&gt;
              &lt;div id="container"&gt;&lt;script type="text/javascript" src="http://shoutcast.mixstream.net/js/external/flash/s7.viastreaming.net:8790:0:::999999:::1"&gt;&lt;/script&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;&lt;!-- end now playing --&gt;
      &lt;div id="recent"&gt;
              &lt;div class="table_title"&gt;Recently Played&lt;/div&gt;
      &lt;table id="np_table"&gt;
  
       &lt;/table&gt;
          &lt;/div&gt;&lt;!-- end recent --&gt;
  
  
      &lt;/div&gt;&lt;!-- end col_left --&gt;
  </code></pre>
  
  <p>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. :)</p>