If you spend a few hours listening to broadcast radio it becomes pretty evident who the most popular pop artists are.  You can’t go too long before you hear a song by Justin Timberlake, Rihanna, Bruno Mars or P!nk.  The hotttest pop artists get lots of airplay.  But what about all the other music out there?  Who are the hotttest gothic metal artists? Who are the most popular Texas blues artists?   Those are the kind of questions we try to answer with today’s Echo Nest demo:  The Hotttest Artists

This app lets you select from among over 400 different genres from a cappella to Zydeco and see who are the hotttest artists in that genre.  The output includes a brief bio and image of the artist, and of course you can listen to any artist via Rdio.   The app is an interesting way to explore all of the different genres out there and sample some different types of music.  The source is available on github. The whole thing including all Javascript, html and CSS is less than 500 lines.

Try out the Hotttest Artist app  and be sure to check out all of the other Echo Nest demos on our demo page.

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.