Spotify Web API - Search for an Artist (and Lookup) Demo

Searches for an artist, displaying their albums and making it possible to play a 30 second preview of the first track of each album.

by Cristiano Oliveira

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
<link rel="stylesheet" href="https://developer.spotify.com/web-api/static/css/cached.css">
<div class="container">
    <h1>Search for an Artist</h1>
    <p>Type an artist name and click on "Search". Then, click on any album from the results to play 30 seconds of its first track.</p>
    <form id="search-form">
        <input type="text" id="query" value="" class="form-control" placeholder="Type an Artist Name"/>
        <input type="submit" id="search" class="btn btn-primary" value="Search" />
    </form>
    <div id="results"></div>
</div>
<script id="results-template" type="text/x-handlebars-template">
    {{#each albums.items}}
    <div style="background-image:url({{images.0.url}})" data-album-id="{{id}}" class="cover"></div>
    {{/each}}
</script>

<script>
    var lT = { 'pt-BR':'Procure um Artista', 'en':'Search for an Artist'};
    var lP = {
    'pt-BR':'Digite um nome de artista e clique em "Pesquisar". Em seguida, clique em qualquer álbum dos resultados para reproduzir 30 segundos da primeira faixa.',
    'en':'Type an artist name and click on "Search". Then, click on any album from the results to play 30 seconds of its first track.'
    }
    var userLanguage = navigator.language || navigator.userLanguage;
    console.log(userLanguage);
    if (userLanguage in lT) {
        document.querySelector('h1').innerHTML = lT[userLanguage];
        document.head.querySelector('title').innerHTML = lT[userLanguage];
    }
    if (userLanguage in lP) {
        document.querySelector('p').innerHTML = lP[userLanguage];
    }
</script>

CSS

body {
    padding: 20px;
}
#search-form, .form-control {
    margin-bottom: 20px;
}
.cover {
    width: 300px;
    height: 300px;
    display: inline-block;
    background-size: cover;
}
.cover:hover {
    cursor: pointer;
}
.cover.playing {
    border: 5px solid #e45343;
}

JavaScript

// find template and compile it
var templateSource = document.getElementById('results-template').innerHTML,
    template = Handlebars.compile(templateSource),
    resultsPlaceholder = document.getElementById('results'),
    playingCssClass = 'playing',
    tokenSpotify = null,
    audioObject = null;

var accessToken = function(fnString, fnParams){
		$.ajax({
    		dataType: "json",
    		url: "YOUR-TOKEN-",
    		success: function (response) {
      			var token = response.access_token;
      			tokenSpotify = token;
      			var fn = window[fnString];
            if (typeof fn === "function") fn.apply(null, fnParams);
    		}
  	})
}

var fetchTracks = function (albumId, callback) {
    $.ajax({
        headers: {
            'Authorization': "Bearer " + tokenSpotify
        },
        url: 'https://api.spotify.com/v1/albums/' + albumId,
        success: function (response) {
            callback(response);
        },
        error: function (jqXHR, textStatus, errortrown) {
        console.log('Error: ' + jqXHR.responseText);
        accessToken('fetchTracks', [albumId, callback]);
        }
    });
};

var searchAlbums = function (query) {
    $.ajax({
        headers: {
            'Authorization': "Bearer " + tokenSpotify
        },
        url: 'https://api.spotify.com/v1/search',
        data: {
            q: query,
            type: 'album'
        },
        success: function (response) {
            resultsPlaceholder.innerHTML = template(response);
        },
        error: function (jqXHR, textStatus, errorTrown) {
        	console.log('Error: ' + jqXHR.responseText);
          accessToken('searchAlbums', [query]);
        }
    });
};

results.addEventListener('click', function (e) {
    var target = e.target;
    if (target !== null && target.classList.contains('cover')) {
        if (target.classList.contains(playingCssClass)) {
            audioObject.pause();
        } else {
            if (audioObject) {
                audioObject.pause();
 ...