6

I realise that Spotify could not directly be called a programming resource, but in some rooms we like to share songs quite frequently and a pleasing onebox would be much nicer than a bunch of truncated URLs.

Good music is key to successful programming!

It'd be no more prone to spamming than URLs, really; and I like that it's slightly more prominent.


Before

Spotify URL in chat

After

Hypothetical Spotify oneboxing

  • There was a similar request here for soundcloud and based on the last comment of Tim Post maybe a 6-8 units estimate is available now and this request could be bundled with that earlier one. – rene Oct 5 '14 at 9:13
2

I've made a userscript to do this. It uses the Spotify API to get the information.

It looks like this in Chat:

enter image description here


I've actually made it as a 'plugin' for my custom oneboxes userscript at Stack Apps.

You can install the custom onebox script from GitHub

All you need to do then is copy and paste the below code (a 'plugin') at the top, before the ---------------------------------------------- :)

customSites['play.spotify.com'] = function(link, $obj) {
    $('head').append('<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/shu8/SE-Chat-Custom-Oneboxes/master/spotify.css">');
    if(link.indexOf('album') > -1) {
        var album_id = link.split('/')[4];
        $.get("https://api.spotify.com/v1/albums/"+album_id, function(d) {
            var url = d.external_urls.spotify;
            var image = d.images[0].url;
            var artist = d.artists[0].name;         
            var name = d.name;
            var type = d.type;

            var template = "<div class='spotify-container'> \
                                <img src='"+image+"'> \
                                <div class='info'>"+type+"</div> \
                                <div class='title'><a href='"+url+"'>"+name+"</a></div> \
                                <div class='artist'>"+artist+"</div> \
                            </div>";
            $obj.html(template);
        });
    } else if (link.indexOf('artist') > -1) {
        var artist_id = link.split('/')[4];
        $.get("https://api.spotify.com/v1/artists/"+artist_id, function(d) {
            var url = d.external_urls.spotify;
            var image = d.images[0].url;
            var name = d.name;
            var type = d.type;

            var template = "<div class='spotify-container'> \
                                <img src='"+image+"'> \
                                <div class='info'>"+type+"</div> \
                                <div class='title'><a href='"+url+"'>"+name+"</a></div> \
                            </div>";

            $obj.html(template);
        });     
    } else if (link.indexOf('track') > -1) {
        var track_id = link.split('/')[4];
        $.get("https://api.spotify.com/v1/tracks/"+track_id, function(d) {
            var url = d.external_urls.spotify;
            var name = d.name;
            var type = d.type;
            var artist = d.artists[0].name;

            var template = "<div class='spotify-container'> \
                                <img src='http://i.stack.imgur.com/yQJQ0.png'> \
                                <div class='info'>"+type+"</div> \
                                <div class='title'><a href='"+url+"'>"+name+"</a></div> \
                                <div class='artist'>"+artist+"</div> \
                            </div>";

            $obj.html(template);
        });         
    }   
};

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .