# react-soundplayer

> Create custom SoundCloud players with React

Latest version **1.0.5** (published 2020-06-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-soundplayer
pnpm add react-soundplayer
yarn add react-soundplayer
bun add react-soundplayer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2020-06-15 |
| First published | 2015-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.0.0 |
| Dependencies | 5 |
| Unpacked size | 230.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1450 |
| Author | Dmitri Voronianski |
| Maintainers | dmitri |
| Keywords | react, component, react-component, soundcloud, html5, audio |

## Links

- npm: https://www.npmjs.com/package/react-soundplayer
- Repository: https://github.com/soundblogs/react-soundplayer
- Homepage: https://github.com/soundblogs/react-soundplayer#readme
- Issues: https://github.com/soundblogs/react-soundplayer/issues
- npm.io page: https://npm.io/package/react-soundplayer

## Dependencies (5)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.1
- [soundcloud-audio](https://npm.io/package/soundcloud-audio.md) ^1.3.1
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^2.3.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2020-06-15
- 1.0.0-rc4 (prerelease) — 2016-10-29
- 1.0.4 — 2017-12-20
- 1.0.3 — 2017-11-15
- 1.0.2 — 2017-10-09
- 1.0.1 — 2017-10-03
- 1.0.0 — 2017-10-01
- 1.0.0-rc2 — 2016-08-08
- 1.0.0-rc1 — 2016-08-07
- 0.3.6 — 2016-06-21
- 0.3.5 — 2016-05-03
- 0.3.4 — 2016-04-03
- 0.3.3 — 2016-03-31
- 0.3.2 — 2016-02-20
- 0.3.1 — 2015-10-25
- … 12 more at https://npm.io/package/react-soundplayer/versions

## README

# <img src="http://www.officialpsds.com/images/thumbs/Soundcloud-Logo-psd47614.png" width="75" align="left">&nbsp;[react-soundplayer](http://labs.voronianski.dev/react-soundplayer) 
[![npm version](http://badge.fury.io/js/react-soundplayer.svg)](http://badge.fury.io/js/react-soundplayer) [![Download Count](http://img.shields.io/npm/dm/react-soundplayer.svg?style=flat)](http://www.npmjs.com/package/react-soundplayer) <a href="https://www.buymeacoffee.com/voronianski" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" height="20" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

> Create highly-customizable SoundCloud (or any audio) players with React.js.

[<img src="https://user-images.githubusercontent.com/974035/31037146-c21d53e2-a56f-11e7-9cd4-b4784f99040c.png" width="600" />](http://labs.voronianski.dev/react-soundplayer#ExamplePlayers)

### [Documentation](http://labs.voronianski.dev/react-soundplayer)

## Install

```
npm install react-soundplayer --save
```

## Examples

There are several examples [on the website](http://labs.voronianski.dev/react-soundplayer/#ExamplePlayers). Here is the basic one to get you started:

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { PlayButton, Timer } from 'react-soundplayer/components';
import { withSoundCloudAudio } from 'react-soundplayer/addons';

const clientId = 'YOUR CLIENT ID';
const resolveUrl = 'https://soundcloud.com/ksmtk/chronemics';

const Player = withSoundCloudAudio(props => {
    let { track, currentTime } = props;

    return (
      <div className="custom-player">
        <PlayButton
          className="custom-player-btn"
          onPlayClick={() => {
            console.log('play button clicked!');
          }}
          {...props} />
        <h2 className="custom-player-title">
          {track ? track.title : 'Loading...'}
        </h2>
        <Timer 
          className="custom-player-timer"
          duration={track ? track.duration / 1000 : 0} 
          currentTime={currentTime} 
          {...props} />
      </div>
    );
});

const App = () => {
  return (
    <Player
      clientId={clientId}
      resolveUrl={resolveUrl}
      onReady={() => console.log('track is loaded!')} />
  );
};

ReactDOM.render(
  <App />, 
  document.getElementById('#app')
);
```

### Custom Audio Example

It is also easy to built players **without** using SoundCloud API. You just need to pass audio source via `streamUrl` and all other necessary track meta information can be passed as custom props. Also you can choose `preloadType`, according to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Attributes, by default this property is equal to 'auto'.

```js
import React from 'react';
import ReactDOM from 'react-dom';
import { PlayButton, Timer } from 'react-soundplayer/components';

// it's just an alias for `withSoundCloudAudio` but makes code clearer
import { withCustomAudio } from 'react-soundplayer/addons';

// audio source
const streamUrl = 'https://example.org/path/to/file.mp3';

// some track meta information
const trackTitle = 'Great song by random artist';

const AWSSoundPlayer = withCustomAudio(props => {
  const { trackTitle } = props;

  return (
    <div>
      <PlayButton {...props} />
      <h2>{trackTitle}</h2>
      <Timer {...props} />
    </div>
  );
});

class App extends React.Component {
  render() {
    return (
      <AWSSoundPlayer
        streamUrl={streamUrl}
        trackTitle={trackTitle} 
        preloadType="auto" />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));
```

## References

- simply the best CSS modular toolkit on the web - [BASSCSS](http://www.basscss.com/)
- easy management of HTML5 Audio API by [SoundCloudAudio.js](https://github.com/voronianski/soundcloud-audio.js/)
- inspired by [Plangular](http://jxnblk.com/plangular/)
- we all :heart: [SoundCloud API](https://developers.soundcloud.com/docs/api/reference)!
- generate standalone "copy-paste" version with [Soundplayer.js](labs.voronianski.dev/get-soundplayer)
- follow updates on [Twitter](https://twitter.com/voronianski)

---

**MIT Licensed**

---
_Source: https://npm.io/package/react-soundplayer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._