React Soundcloud Widget

react.js powered SoundCloud player component
Alternatives To React Soundcloud Widget
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Player8,3751,080808a month ago152November 03, 2023214mitJavaScript
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
Sound Redux5,045
2 years ago65gpl-3.0JavaScript
A Soundcloud client built with React / Redux
Favesound Redux1,538
3 years ago20JavaScript
🎶 A SoundCloud Client in React + Redux running in production. Live Demo and Source Code to explore React + Redux as a beginner.
Soundredux Native784
8 years ago8JavaScript
📱 In an effort to try react-native along with redux
2 years ago111gpl-3.0TypeScript
[Discontinued] Auryo - Unofficial Soundcloud Desktop App
Soundcloud Redux621
6 years ago5mitJavaScript
SoundCloud API client with React • Redux • Redux-Saga
Favesound Mobx518
5 years ago3JavaScript
🎶 A SoundCloud Client in React + MobX running in production. Live Demo and Source Code to explore React + MobX. Refactored from favesound-redux
6 years ago7Objective-C
A new React Native app every 2 weeks. With tutorial :)
React Redux Soundcloud265
5 years ago4JavaScript
📚 Learn React + Redux by building a SoundCloud Client. Full tutorial included. Source Code for main tutorial but also extensions included.
Pwa Music Player130
9 months ago1mitJavaScript
:radio: PWA Music Player made with Reactjs
Alternatives To React Soundcloud Widget
Select To Compare

Alternative Project Comparisons

react-soundcloud-widget Build Status

Simple React component acting as a thin layer over the SoundCloud HTML5 Widget.


  • url playback
  • customizable widget options
  • playback event bindings
  • lazy API loading


$ npm install react-soundcloud-widget


  url={string}         // required
  id={string}          // defaults -> 'react-sc-widget'
  opts={object}        // defaults -> './lib/default-options'
  onPlay={func}        // defaults -> noop
  onPause={func}       // defaults -> noop
  onEnd={func}         // defaults -> noop


class Example extends Component {
  onPlay() {

  render() {
    return (

Widget options

Boolean toggles passed via props.opts

Parameter Purpose Default
auto_play Start playing the widget after it’s loaded true
visual Display widget in visual mode. false
buying Show/hide buy buttons true
liking Show/hide like buttons true
download Show/hide download buttons true
sharing Show/hide share buttons/dialogues true
show_artwork Show/hide artwork true
show_comments Show/hide comments true
show_playcount Show/hide number of sound plays true
show_user Show/hide the uploader name true
show_reposts Show/hide reposts false
hide_related Show/hide related tracks false


Changing props.url currently adds an entry to window.history, breaking the back button (or at least adding another click to it).

You can see this in action at, change the url using the button and try navigating back.

This is outside my control for now, the widget used internally is served up and managed by SoundCloud. Super bummer.


Programmatic control of the widget as outlined in the API docs isn't included. Luckily, the API loads alongside the widget, so taking control is as easy as:

var widget = SC.Widget('react-sc-player');
// do stuff

The component itself uses SC.Widget.load, SC.Widget.bind and SC.Widget.unbind internally. Using those methods outside the component may cause problems.



Popular Soundcloud Projects
Popular Reactjs Projects
Popular Companies Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.