Create a single and simple HTML page. Include in this page two standard widgets and a special discography component that pulls data from the Spotify Web API.

Use the instructions below to create a very simple web page containing a Spotify Play Button and a Spotify Follow Button, along with a simple bit of code that provides a playable artist discography. Then, build a page for a real band called Demoscene Time Machine, which you can find on Spotify. To complete this page you need a browser and a simple text editor, such as the operating system Notepad.

To protect users, content providers, the Spotify trademarks, software, and the Spotify service while enabling a wide use the Spotify Widgets, you need to comply with the Spotify Widget Terms of Use.

Note:

  • If you are a skilled web programmer, feel free to skip ahead to the example and see how it works.
  • You can also use the Spotify Web API to perform Follow actions. For further information, see the Follow Endpoints.

Basic Code and Terminology

Open a code example in Discography example (JSFiddle).

JSfiddle

In the open editor see 3 code frames containing HTML, CSS, JavaScript, and a fourth frame displaying the result of the executed code.

Code Format Functionality
HTML Defines the structure of the artist page.
CSS Defines the visual formats on the artist page.
JavaScript The executable code that generates the artist page.

To Create an Artist Page:

Creating a Discography

The page in the Result frame shows the discography for the Rolling Stones.

  1. Look in the code in the JavaScript frame and scroll to the bottom.
  2. Change

    searchAlbums('Leonard Cohen');

    to

    searchAlbums('Demoscene Time Machine'); Or to whatever artist you are interested in.

  3. Click Run; the list of albums displayed in the fourth frame should change: Discography

  4. Click an album in the Result frame; a 30 second track preview from the album should start playing.
  5. Take a quick look through the JavaScript code while you are here. You will find a function called searchAlbums which looks like this:
      var searchAlbums = function (query) {
      $.ajax({
     url: 'https://api.spotify.com/v1/search',
     data: {
       q: 'artist:' + query,
       type: 'album',
       market: 'US'
     },
     success: function (response) {
       resultsPlaceholder.innerHTML = template(response);
     }
      });
    };
    

    When this function runs, it makes a call to the Web API search endpoint, asking for a list of albums by the named artist in the designated country. The search endpoint is just one of many endpoints available on Web API. With JavaScript you can retrieve a lot of useful data from Web API about Spotify artists, albums, tracks, playlists, and users.

    Note: The search endpoint syntax can be tricky, and sometimes you will need to apply filters or operators to clean up the results that you get back — as we have done by specifying “market:US” in our function above.

  6. Depending on the browser that you use, perform the following as relevant to the browser. In Firefox on Windows, right-click the fourth frame and select This Frame, Save Frame As, and then save as Web Page, complete.
  7. Save the code to a file on your desktop with the name demoscene-time-machine.html.
  8. After saving the file open it in a web browser. It should look like this: Artist Page Example
  9. Click the album covers and make sure they play the 30 second previews.

Spotify would like to thank Dave Whiting of Demoscene Time Machine for the permission to use his music and cover art in this tutorial.