react-soundcloud-widget

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

Features

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

Installation

$ npm install react-soundcloud-widget

Usage

<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
/>

Example

class Example extends Component {
  onPlay() {
    console.log('playing');
  }
 
  render() {
    return (
      <SoundCloud
        url={'https://soundcloud.com/sylvanesso/coffee'}
        onPlay={this.onPlay}
      />
    );
  }
}
 

Widget options

Boolean toggles passed via props.opts

Parameter	Purpose	Default
auto_play	Start playing the widget after it’s loaded	true
visual	Display widget in visual mode.	false
buying	Show/hide buy buttons	true
liking	Show/hide like buttons	true
download	Show/hide download buttons	true
sharing	Show/hide share buttons/dialogues	true
show_artwork	Show/hide artwork	true
show_comments	Show/hide comments	true
show_playcount	Show/hide number of sound plays	true
show_user	Show/hide the uploader name	true
show_reposts	Show/hide reposts	false
hide_related	Show/hide related tracks	false

Warning

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.

Caveat

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.

License

MIT