Simple React component acting as a thin layer over the SoundCloud HTML5 Widget.

• url playback
• customizable widget options
• playback event bindings
• lazy API loading

$ npm install react-soundcloud-widget

<SoundCloud
  url={string}         // required
  id={string}          // defaults -> 'react-sc-widget'
  opts={object}        // defaults -> './lib/default-options'
  onPlay={func}        // defaults -> noop
  onPause={func}       // defaults -> noop
  onEnd={func}         // defaults -> noop
/>

class Example extends Component {
  onPlay() {
    console.log('playing');
  }

  render() {
    return (
      <SoundCloud
        url={'https://soundcloud.com/sylvanesso/coffee'}
        onPlay={this.onPlay}
      />
    );
  }
}

Boolean toggles passed via props.opts

Changing props.url currently adds an entry to window.history, breaking the back button (or at least adding another click to it).

You can see this in action at http://troybetz.com/react-soundcloud-widget/, change the url using the button and try navigating back.

This is outside my control for now, the widget used internally is served up and managed by SoundCloud. Super bummer.

Programmatic control of the widget as outlined in the API docs isn't included. Luckily, the API loads alongside the widget, so taking control is as easy as:

var widget = SC.Widget('react-sc-player');
// do stuff

The component itself uses SC.Widget.load, SC.Widget.bind and SC.Widget.unbind internally. Using those methods outside the component may cause problems.

MIT