Naboo's Podracing Misadventure
Wondering what’s next for npm?Check out our public roadmap! »

react-soundplayer
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

 react-soundplayer

npm version Download Count Buy Me A Coffee

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

Documentation

Install

npm install react-soundplayer --save

Examples

There are several examples on the website. Here is the basic one to get you started:

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'.

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


MIT Licensed

Install

npm i react-soundplayer

DownloadsWeekly Downloads

1,357

Version

1.0.5

License

MIT

Unpacked Size

236 kB

Total Files

48

Last publish

Collaborators

  • avatar