Skip to content

nthall/react-soundcloud-widget

 
 

Repository files navigation

react-soundcloud-widget Build Status

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

About

react.js powered SoundCloud player component

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 92.7%
  • HTML 7.3%