spotify-previewbutton

Polymer Web component to preview Spotify tracks

View the Project on GitHub rafeca/spotify-previewbutton

Click on the links below to load different tracks

Spotify Polymer Element

This is an example of a Polymer Web Component that implements a simple widget for previewing Spotify tracks.

It uses the new Spotify Web API to get the track metadata, cover art and the preview MP3 file.

Usage

You just need to include the polymer platform and this element in the head of your html page.

Then, you can start using the spotify-previewButton element as any other HTML element in your page:

<html>
<head>
  <script type="text/javascript" src="bower_components/platform/platform.js"></script>

  <link rel="import" href="bower_components/spotify-previewButton/index.html">
</head>
<body>
  <spotify-previewButton uri="spotify:track:0eGsygTp906u18L0Oimnem"></spotify-previewButton>
</body>
</script>

Running the example

To run the example, install the spotify-previewbutton bower component:

$ bower install spotify-previewbutton

Then launch a web server:

$ ruby -run -e httpd . -p 5000 # "python -m SimpleHTTPServer 5000" will also do the trick

Then, you only need to navigate to http://localhost:5000/bower_components/spotify-playbutton/demo.html from any modern browser.