Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/troybetz/react-soundcloud-widget
react.js powered SoundCloud player component
https://github.com/troybetz/react-soundcloud-widget
Last synced: 5 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 (12 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