Question

我在我制作的HTML播放器中有一个70x70的小盒子，我希望放在专辑插图中，以配合我现在播放的shoutcast服务器信息。有没有办法，使用shoutcast服务器提供的艺术家歌曲信息，我可以搜索一个网络服务（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);
      }
   });
}

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

1 个答案: