https://github.com/troybetz/react-soundcloud-widget

react.js powered SoundCloud player component
https://github.com/troybetz/react-soundcloud-widget

Last synced: 7 days ago
JSON representation

react.js powered SoundCloud player component

• Host: GitHub
• URL: https://github.com/troybetz/react-soundcloud-widget
• Owner: troybetz
• License: mit
• Created: 2014-07-27T21:29:23.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2017-11-28T08:50:39.000Z (almost 7 years ago)
• Last Synced: 2024-10-31T10:43:28.308Z (14 days ago)
• Language: JavaScript
• Homepage: http://troybetz.github.io/react-soundcloud-widget/
• Size: 125 KB
• Stars: 26
• Watchers: 3
• Forks: 12
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-soundcloud-widget [![Build Status](https://travis-ci.org/troybetz/react-soundcloud-widget.svg?branch=master)](https://travis-ci.org/troybetz/react-soundcloud-widget)

Simple [React](http://facebook.github.io/react) component acting as a thin

layer over the [SoundCloud HTML5 Widget](https://developers.soundcloud.com/docs/api/html5-widget).

## Features

- url playback

- customizable widget options

- playback event bindings

- lazy API loading

## Installation

```shell

$ npm install react-soundcloud-widget

```

## Usage

```js

 'react-sc-widget'

  opts={object}        // defaults -> './lib/default-options'

  onPlay={func}        // defaults -> noop

  onPause={func}       // defaults -> noop

  onEnd={func}         // defaults -> noop

/>

```

## Example

```js

class Example extends Component {

  onPlay() {

    console.log('playing');

  }

  render() {

    return (

      

    );

  }

}

```

### 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](https://soundcheck.soundcloud.com/music/our-new-visual-player/). | `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](https://developers.soundcloud.com/docs/api/html5-widget) isn't included. Luckily, the API loads alongside the widget, so taking control is as easy as:

```js

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