https://github.com/kosmetism/react-soundplayer

📻 Create custom web audio players with React
https://github.com/kosmetism/react-soundplayer

Last synced: 11 days ago
JSON representation

📻 Create custom web audio players with React

• Host: GitHub
• URL: https://github.com/kosmetism/react-soundplayer
• Owner: kosmetism
• Created: 2015-03-12T18:18:06.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T20:32:09.000Z (almost 2 years ago)
• Last Synced: 2024-10-31T13:41:58.457Z (12 days ago)
• Language: JavaScript
• Homepage: https://labs.voronianski.dev/react-soundplayer
• Size: 1.15 MB
• Stars: 1,458
• Watchers: 35
• Forks: 110
• Open Issues: 34
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
#  [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**