react-soundplayer

 

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

$3

Install

``
npm install react-soundplayer --save
`

Examples

There are several examples on the website. 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 (


);
});

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

ReactDOM.render(
,
document.getElementById('#app')
);
`

$3

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 (


);
});

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

ReactDOM.render(, document.getElementById('app'));
``

References

- simply the best CSS modular toolkit on the web - BASSCSS
- easy management of HTML5 Audio API by SoundCloudAudio.js
- inspired by Plangular
- we all :heart: SoundCloud API!
- generate standalone "copy-paste" version with Soundplayer.js
- follow updates on Twitter

---

MIT Licensed