API

Pure Components

With ReactSoundPlayer creation of SoundCloud players becomes as easy as pointing different controls in the right places. Here is the list of available pure so-called "dumb" components that accept data and callbacks only as props:

PlayButton

Play or pause track.

<PlayButton
className={String}
playing={Boolean}
seeking={Boolean}
seekingIcon={
ReactElement
/*optional icon that will be showed when track is seeking new position to play*/
}
onTogglePlay={Function}
soundCloudAudio={instanceof SoundCloudAudio}
/>

PrevButton

Important note: All buttons accept soundCloudAudio prop which when passed will add actions to buttons automagically (e.g. play/pause, go to prev/next track), callback function used in onTogglePlay, onNextClick and onPrevClick will still be called after.

Cover

As you see each component contains a set of self-descriptive properties. One of them is className which allows you to setup custom class names as on regular DOM elements and style components as you wish.

SoundPlayerContainer

<SoundPlayerContainer /> is higher level container that propagates its' children with all necessary props which you might need in order to design an audio player.

When using it, just choose what kind of SoundCloud data you're consuming (via resolveUrl or streamUrl)

onReady

(function) - if using resolveUrl, pass a function to be called when the track or playlist is resolved and ready to be played. Will not be called if you use streamUrl. The function is called without any arguments:

SoundCloud API

If you're curious what data you can use inside player just take a look into official SoundCloud Developers docs for tracks.

Troubleshooting

Please keep in mind that SoundCloud provides an option for users to prevent streaming to third-party apps. If your sound isn't playing check the track's streamable property. If it's set to false, there is no way to play that sound with the API.