📻 Create custom web audio players with React

Last update: May 11, 2022

 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

GitHub

https://github.com/soundblogs/react-soundplayer
Comments
  • 1. Upgrade to postcss-cssnext from cssnext

    Fixes build by resolving error on node >6

    react-soundplayer/node_modules/postcss/lib/lazy-result.js:200
                throw error;
                ^
    
    TypeError: Path must be a string. Received undefined
    
    Reviewed by joewestcott at 2016-07-30 18:48
  • 2. Change song by updating resolveUrl prop

    I am trying to update the URL for the song that is playing by updating the resolveUrl prop, however, after the update SoundPlayer still playst the same song.

    I set resolveUrl from the component state, something like this:

    
          <GlobalPlayer
            resolveUrl={this.state.url}
            clientId={clientId}
            onReady={() => {
              console.log("player url ready!");
            }}
          />
    

    I know that I can pass a SC playlist, but I would like to be able to update this dynamically based on an event from songs that are not in a SC playlist. Is there a way to do this?

    Reviewed by bzhr at 2019-05-08 15:25
  • 3. Can i use raw MP3 with this library ?

    Hi, what if i don't want to play a soundcloud link - instead i have served mp3 on my server. is this possible with this library or is this the wrong repo

    thx !

    Reviewed by sascha1337 at 2016-05-21 14:06
  • 4. onReady for resolveURL

    I needed to know when a track was ready to be played so that I could programmatically start playing it, so I added this onReady prop.

    Happy to write docs / examples, but wanted to run the approach by the maintainers first.

    thanks for this component, super handy!

    Reviewed by sbauch at 2016-11-02 17:50
  • 5. Going past SoundCloud

    Not that I think SoundCloud is going anywhere, despite their funding issues, but it'd be cool to have some options. A self-hosted Web Audio solution to begin with. I guess it really should be at soundblogs/web-audio, soundblogs/soundcloud-audio, etc? As sources. I'm sure all this is already on your radar somewhere, but just thought I'd open an issue here. Maybe there could be a soundblogs base repo, just for overarall project ideas like these?

    Reviewed by jiku at 2016-02-19 10:59
  • 6. requestAudio in componentWillReceiveProps

    https://github.com/kosmetism/react-soundplayer/blob/2863b9d1ff8f233e45ace1610c959be3ccd2bbc9/src/addons/withSoundCloudAudio.js#L51

    When you wnat dynamical update components with differents streamUrl - it will be fail because requestAudio invokes only once

    Reviewed by scrat98 at 2018-05-28 18:34
  • 7. PlayButton in Custom Audio player (AWSSoundPlayer) not working

    I made a custom audio player component which takes in streamUrl like the example

    ...
    const streamUrl = 'https://s3-eu-west-1.amazonaws.com/react-soundplayer-examples/ksmtk-reborn-edit.mp3';
    ...
    <MySoundPlayerComponent
            streamUrl={streamUrl} //title prop not required for this custom component
            preloadType="metadata" />
    ...
    

    the player then propagates the streamUrl to all subcomponents like Playbuttons, Timer, Progressbar

    Clicking on the PlayButton component doesnt do anything

    Reviewed by ridhwaans at 2018-03-14 03:31
  • 8. Cant stop the Audio going unless click on the PLAY/STOP button

    Hi,

    First of all, thank You for the amazing work, it has been a pleasure to Use the SoundPlayer. However we faced a big issue. We have a menu, which toggles content in the main view. For Each content a different audio is attached. It is not starting automatically, only if the user clicks on it.

    Something like this:

    react_player_bug

    Start and Stop of the audio is working fine. Trouble hits when the audio is playing, and the user changes menu without stopping the audio. This way the graphic re-renders and updates, but the audio is still playing.

    When we do return (<p> SHOULD STOP AND CHANGE NOW! </p>) the player does not stop.

    Our code:

    
    import React from "react";
    import PropTypes from "prop-types";
    import { PlayButton, Timer, Progress } from "react-soundplayer/components";
    import { withSoundCloudAudio } from "react-soundplayer/addons";
    
    const AWSSoundPlayer = withSoundCloudAudio(props => {
      if (!props.stopping){
      return (
        <div className={props.playing ? "player playerplay" : "player"}>
           <PlayButton {...props} className="player__button" />
          {props.playing ? (
            <div className="player">
              <Progress {...props} className="player__progress" />
              <Timer {...props} className="player__timer" />
            </div>
          ) : (
            <div className="audio__text">Lyssna på avsnittet som ljudbok.</div>
          )}
        </div>
      )} else {
        console.log(props)
        return (<p> SHOULD STOP AND CHANGE NOW! </p>)
      }
    });
    
    class Audio extends React.Component {
      state = { change: false}
      componentWillReceiveProps(next){
        if (this.props.audioURL !== next.audioURL){
          this.setState({ change: true});
          setTimeout(() => { this.setState({ change: false}) },500)
        }
      }
      render(){
        return (
          <div id="player" className="audio">
          <AWSSoundPlayer
            key={this.props.audioURL}
            streamUrl={this.props.audioURL}
            preloadType="metadata"
            stopping={this.state.change}
          />
        </div>
        )
      }
    }
    
    export default Audio;
    
    Audio.propTypes = {
      audioURL: PropTypes.string
    };
    `
    
    
    
    Reviewed by kondricz at 2017-11-30 14:23
  • 9. Multiple players on a page sometimes don't load

    I'm having an issue where I have a page that has 5 or more on it and when I load the page, sometimes several of the buttons will remain "Loading" forever. Has anyone else experienced this and is there a better way to do this?

    import { SoundPlayerContainer } from 'react-soundplayer/addons';
    import { Progress, PlayButton, Timer } from 'react-soundplayer/lib/components';
    
    class CustomPlayer extends React.Component {
        play() {
            let { soundCloudAudio, playing } = this.props;
            if (playing) {
                soundCloudAudio.pause();
            } else {
                soundCloudAudio.play();
            }
        }
    
        render() {
            let { track, playing, currentTime, duration, soundCloudAudio} = this.props;
    
            if (!track) {
                return <div>Loading...</div>;
            }
    
            return (
                <div className="playerParent">
                    <Col sm={3}>
                        <ButtonToolbar>
                            <Button bsStyle="primary"
                                    active
                                    onClick={this.play.bind(this)}
                                    className="playButton btn-block"
                            >
                                {playing ? 'Pause' : 'Play'}
                            </Button>
                        </ButtonToolbar>
                    </Col>
                    <Col sm={6}>
                        <Progress
                            className="progress"
                            innerClassName="progress-bar"
                            value={currentTime / duration * 100 || 0}
                            {...this.props}
                        />
                    </Col>
                    <Col sm={3}>
                        <Timer
                            className="timer"
                            duration={duration}
                            currentTime={currentTime}
                            {...this.props}
                        />
                    </Col>
                </div>
            );
        }
    }
    
    
    
    
    // Episode component - represents a single episode item
    export default class Episode extends Component {
        render() {
            return (
                <Jumbotron className="episode">
                    <Row>
                        <Col xs={4}>
                            <img src={this.props.episode.image} className="img-responsive"/>
                        </Col>
                        <Col xs={8}>
                            <h4 className="episodeTitle">{this.props.episode.text}</h4>
                            <p className="episodeDescription">{this.props.episode.description.split('\n').map(function(item, i) {
                                return (
                                    <span key={i}>
                                    {item}<br/>
                                    </span>
                                )
                            })}</p>
                        </Col>
                    </Row>
                    <Row>
                        <SoundPlayerContainer {...this.props.episode}>
                            <CustomPlayer />
                        </SoundPlayerContainer>
                    </Row>
                </Jumbotron>
            );
        }
    }
    
    Episode.propTypes = {
        // This component gets the task to display through a React prop.
        // We can use propTypes to indicate it is required
        episode: PropTypes.object.isRequired,
    };
    

    You can see it in action on: www.babeswatchbuffy.com

    Thanks so much!

    Reviewed by CaptainChemist at 2016-06-03 16:35
  • 10. Make SoundPlayerContainer as Higher Order Components or use context instead of magically wrapping children

    https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 or http://browniefed.com/blog/2015/05/02/react/ or https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775

    Much cleaner approach...

    Reviewed by kirill-konshin at 2015-09-17 10:30
  • 11. Allow updating url & custom start time in withSoundCloudAudio.js

    This resolves the following feature requests:

    1. Change a song by updating the streamUrl prop #98 #86 #101
    2. Pass a start time to begin playing the audio from (as a number in seconds) #99

    I also checked and #87 doesn't seem to be open any more, I can seek tracks on custom urls.

    Usage

    const MediaPlayer = withCustomAudio(ChildAudioPlayerComponent)
    
    const MainWindow = React.memo(props => (
      <div>
        <h2>Player</h2>
        <MediaPlayer
          {...props}
          streamUrl={props.track.url}
          startTime={props.track.startTime} // Number (seconds)
          clientId="xxx" // to silence log warning on custom urls
        />
      </div>
    ))
    

    Preview

    Here's a preview of the custom start at time, and changing the streamUrl without un-mounting or ref hack. If the player is playing when the track changes, it will keep playing.

    (the gif adds a little choppiness)

    playerchanges (1)

    Reviewed by sbrichardson at 2019-08-25 21:22
  • 12. Bump async from 2.6.1 to 2.6.4

    Bumps async from 2.6.1 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)

    v2.6.3

    • Updated lodash to squelch a security warning (#1675)

    v2.6.2

    • Updated lodash to squelch a security warning (#1620)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-27 22:41
  • 13. Bump cached-path-relative from 1.0.2 to 1.1.0 in /examples

    Bumps cached-path-relative from 1.0.2 to 1.1.0.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-01-27 15:02
  • 14. Type Decs Exported?

    I'm using react-soundplayer with typescript, but I'm not seeing any type definitions in VSCode, yet I see that you have an index.d.ts file. What I need to do to get the types to start working?

    Reviewed by wyhinton at 2021-11-17 20:02
  • 15. Bump path-parse from 1.0.6 to 1.0.7 in /examples

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-11 05:12
  • 16. Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-10 17:00
  • 17. 403 Forbidden

    Yesterday all look very well, but today I got this response from SoundCloud API when fetching https://api.soundcloud.com/resolve.json?url=YYY&client_id=XXX, that's make the song not loaded.

    I saw react-soundplayer examples, having the same issue (as I remember, the example worked before *CMIIW).

    Wondering to know did SoundCloud update their API recently? Also, has anyone here found this issue before? Thank you.

    Reviewed by abdipramana at 2021-08-06 04:04
React Audio Player Component for HTML5 Audio: Customizable, Modular, & Styleable
React Audio Player Component for HTML5 Audio: Customizable, Modular, & Styleable

React Modular Audio Player React Audio Player Component for HTML5 Audio: Customizable, Modular, & Styleable This is the react audio player solution yo

Apr 9, 2022
⏯ Dumb and (re)useful React components for media players.
⏯ Dumb and (re)useful React components for media players.

react-player-controls This is a minimal set of modular and hopefully useful React components for composing media player interfaces. It is designed for

Apr 29, 2022
Party line: Audio-only demos for React, React Native, iOS, and Android
Party line: Audio-only demos for React, React Native, iOS, and Android

Party line: Audio-only demos for React, React Native, iOS, and Android Built by and with Daily Multi-platform audio-only demos, for React, React Nativ

Apr 21, 2022
Example of using react-multimedia-capture to capture Video/Audio from React

react-multimedia-capture Example Example of react-multimedia-capture. Steps install dependencies. $ npm install Build resources $ gulp Run the server.

Aug 27, 2020
Audio player react component for material ui design

Material UI Audio Player Audio player for material ui design developed with react.js. Requires Material UI 4 version. Demo: https://werter12.github.io

Feb 18, 2022
Implemented Audio and Video Player in React Native
Implemented Audio and Video Player in React Native

Audio_Video Implemented Audio and Video Player in React Native For Android, Run : 1- yarn install 2- yarn android For IOS, Run : 1- yarn install 2- cd

Mar 31, 2022
A tonegrid synth made with Elementary Audio and React

Elementary Grid A tonegrid synth made with Elementary Audio and React Live version Live version right here: https://teetow.github.io/elementary_grid W

May 16, 2022
An audio player implemented using vlcj, VLC, Spring Boot and React
An audio player implemented using vlcj, VLC, Spring Boot and React

choonio Remember Google Play Music? Well, it's dead now. I really liked it, so I made this. Status What is this? This project is a local media player

Apr 29, 2022
A package with Optimized and Supercharged React hook to play audio without any DOM element 💪🎧

react-awesome-audio Optimized and Supercharged React hook to play audio without any DOM element ?? ?? Find the npm package here Star the GitHub repo t

Mar 31, 2022
React Native Audio Player
React Native Audio Player

Audio Player example with basics of TypeScript, Redux Toolkit, RTK Query, React Navigation V6

Mar 31, 2022
Audio-reactive visual created with ThreeJS

Audio-reactive visual created with ThreeJS

May 14, 2022
Create videos using React!
Create videos using React!

Reactive Videos are videos created using HTML and React components. This allows you to leverage the almost limitless possibilities of the web browser

May 10, 2022
A web video player built for the HTML5 world using React library.

video-react Video.React is a web video player built from the ground up for an HTML5 world using React library. Installation Install video-react and pe

May 13, 2022
Video calling and chatting app (PWA) built using React.js, Web RTC and Socket.io
Video calling and chatting app (PWA) built using React.js, Web RTC and Socket.io

This is a video calling application where users can call other user and will also have the capabiltiy to mute their mic and audio. Their is also real time chat functionality. It's also a modern PWA so users can install it on their devices like other native apps.

May 18, 2022
A React-based web video player
A React-based web video player

A React-based web video player

May 15, 2022
React-based faux NetEase cloud music web development practice
React-based faux NetEase cloud music web development practice

React-based faux NetEase cloud music web development project introduction technology stack react react-router redux+react-redux axios ant design immutable+redux-immutable styled-components page function display home component display Song Search Songs

Nov 1, 2021
It Is A Video Call Web Application Similar To Google Meet And Microsoft Teams Made With React JS, TypeScript, CSS, HTML And JavaScript.

SlackTeams It Is A Video Call Web Application Similar To Google Meet And Microsoft Teams Made With React JS, TypeScript, CSS, HTML And JavaScript. To

May 12, 2022
Spotipy - A modern Web-Based music player made using React and Redux
Spotipy - A modern Web-Based music player made using React and Redux

Spotipy A modern Web-Based music player made using ReactJS Deployment Spotipy is

May 6, 2022
A friendly music sequencer built with web technology

A friendly music sequencer built with web technology

May 9, 2022