react-spotify-album-player

Spotify player for a specific artist's album

Demonstration

Click the play button to preview a song.


On playing event:
Spotify URI:

Documentation

Spotify Player

This is a simple spotify player for a single album of a given artist.

install

Bower:

bower install react-spotify-album-player

For bower usage,

<script src="path/to/react.js"></script>
<script src="path/to/react-spotify-album-player/dist/react-spotify-album-player.js"></script>

NPM:

npm install react-spotify-album-player

Demo

http://devilcius.github.io/react-spotify-album-player/

Basic Usage

var React = require('react');
var SpotifyPlayer = require('react-spotify-album-player');
var container = document.getElementById('spotify-player');
var ReactDOM = require('react-dom');
ReactDOM.render(
    <SpotifyPlayer
        albumName="Milo Goes to College"
        artistName="Descendents"
        noDataFoundText="No data found"
        previewWarningText="Only 20 seconds preview"
        showHeader
        token
 />,
    container
);

Required options:

PropertyTypeDescription
albumNamestringRelease's name
artistNamestringArtist's name
tokenstringA valid spotify web api access token

Further options:

PropertyTypeDefaultDescription
listGroupItemBadgeClassNamestring'badge'class name for badge element
listGroupClassNamestring'list-group'class name for list group element
listGroupItemClassNamestring'list-group-item'class name for list group item element
onTrackPlayedfuncundefinedtrack played handler: function(audioTrack, spotifyTrack) {}
onTrackPausedfuncundefinedtrack paused handler: function(audioTrack, spotifyTrack) {}
noDataFoundTextstringNo data foundplaceholder displayed when there are no matching search results values
previewWarningTextstringOnly 20 seconds previewplaceholder preview audio file warning
showHeaderboolfalsewhether to show player header

Todo

  • Sanity checks in xhr calls
  • Error handling in xhr calls

License

react-spotify-album-player is available under MIT. See LICENSE for more details.