Music Machinery

This week I’ve been writing a few web apps to demonstrate how to do stuff with The Echo Nest API.   One app shows how you can use The Echo Nest API to get artist images.  The app is nice and simple. Type in the name of an artist and it will show you 100 images of the artist.

The core code to get the images is here:

function fetchImages(artist) {
    var url = 'http://developer.echonest.com/api/v4/artist/images';

    var args = { 
            format:'json', 
            api_key: 'MY-API-KEY',
            name: artist,
            results: 100, 
    }; 

    info("Fetching images for " + artist);
    $.getJSON(url, args,
            function(data) {
                $("#results").empty();
                if (! ('images' in data.response)) {
                    error("Can't find any images for " + artist);
                } else {
                    $.each(data.response.images, function(index, item) {
                        var div = formatItem(index, item);
                        $("#results").append(div);
                    });
                }
            },
            function() {
                error("Trouble getting blog posts for " + artist);
            }
        );
}

The full source is on github.

With jQuery’s getJSON call, it is quite straightforward to retrieve the list of images from The Echo Nest for formatting and display.

The most interesting bits for me was learning how to make square images regardless of the aspect ratio of the image, without distorting them. This is done with a little CSS magic. Each image div gets a class like so:

        .image-container {
            width: 240px;
            height: 240px;
            background-size: cover;
            background-image:"http://example.com/url/to/image.png";
            background-repeat: no-repeat;
            background-position: 50% 50%;
            float:left;
        }

Try out the Artist Image demo , marvel at the square images and be sure to visit the Echo Nest Demo page to see all of the other demos I’ve been posting this week.