2

作成したHTMLプレーヤーに小さな70x70のボックスがあり、シャウトキャストサーバーからの現在再生中の情報と一致するようにアルバムアートワークに配置したいと考えています。shoutcastサーバーが提供するアーティストの曲の情報を使用して、Webサービス（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"がある場所に画像を表示したいと思います。使用するコードとその実装方法に関するアイデア。私はアマチュアだとコードでわかると思いますので、はっきりと優しくしてください。:)

4

1 に答える 1

2

iTunes 検索 APIを使用できます。JSONPをサポートしているため、クロスドメインを気にすることなく、Web ページ内で直接使用できます。

@Brad が述べたように、iTunes には利用規約があります。特に：

(...) そのようなプロモーション コンテンツを提供する場合: (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);
      }
   });
}
于 2012-08-09T09:07:04.367 に答える