使用 Shoutcast，显示正在播放的专辑封面

Question

我在我构建的 HTML 播放器中有一个 70x70 的小盒子，我希望将其放置在专辑插图中，以与我现在正在播放的来自我的直播服务器的信息相吻合。有没有办法，使用广播服务器提供的艺术家歌曲信息，我可以搜索网络服务 (amazon/last.fm) 并将（最有可能的）专辑封面放在那里？

这是我现在使用的 JS 代码：

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();
    } );
}

这是 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 -->

很自然，我希望图像出现在 div "np_img" 所在的位置。任何想法使用什么代码以及如何实现它。您可能可以通过我的代码看出我是一个业余爱好者，所以请保持清晰和温和。 :)

Answer 1

您可以使用iTunes search API。它支持JSONP，因此您可以直接在您的网页中使用它，而无需担心跨域。

正如@Brad 提到的，iTunes 有terms of use。特别是：

(...) 提供此类促销内容：(i) 仅放置在宣传的页面上 促销内容所基于的内容； (ii) 接近 “在 iTunes 上下载”或“在 App Store 上可用”徽章（如 经 Apple 批准），作为 iTunes 内页面的直接链接 或者消费者可以购买推广内容的 App Store。 (...)

代码如下所示：

​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);
      }
   });
}