@gorangajic/react-soundcloud-widget

    2.0.5 • Public • Published

    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

    Install

    npm i @gorangajic/react-soundcloud-widget

    DownloadsWeekly Downloads

    1

    Version

    2.0.5

    License

    MIT

    Last publish

    Collaborators

    • avatar