[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)

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

](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 (

{ console.log('play button clicked!'); }} {...props} />

{track ? track.title : 'Loading...'}

); }); const App = () => { return ( console.log('track is loaded!')} /> ); }; ReactDOM.render( , 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 (

{trackTitle}

); }); class App extends React.Component { render() { return ( ); } } ReactDOM.render(, 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**

	Stars	Issues	Version	Updated	Created
material-ui-audio-player	74	20	1.7.1	3 years ago	5 years ago
react-player	9,259	73	2.16.0	5 months ago	9 years ago
react-soundplayer	1,461	34	1.0.5	4 years ago	9 years ago
react-youtube	1,848	83	10.1.0	2 years ago	10 years ago

material-ui-audio-player vs react-player vs react-soundplayer vs react-youtube

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past