SoundCloud-2 is a clone of SoundCloud built using Rails, PostgreSQL, React, Redux, HTML5, CSS3, CSS, AWS, Wavesurfer.js and Webpack.
Alternatives To Soundcloud2
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Scdl2415 years ago6June 02, 20177CoffeeScript
The intelligent SoundCloud downloader. Downloads any url, tags automatically.
2 years ago4JavaScript
SoundCloud-2 is a clone of SoundCloud built using Rails, PostgreSQL, React, Redux, HTML5, CSS3, CSS, AWS, Wavesurfer.js and Webpack.
Soundcloud Js4
10 years agomitJavaScript
JS lib for creating custom SoundCloud players
2 years agoJavaScript
Stereo is an online music streaming application, inspired by Soundcloud.
Jam Cloud3
4 years ago12JavaScript
9 years agoRuby
A Rails / Backbone.js clone of the popular music sharing site Soundcloud
Oto No Kumo1
7 months agoJavaScript
A music-sharing space built with RoR and React/Redux
Soundcloud Developer Challenge1
13 years agoRuby
File upload written in ruby using WEBrick servlets that displays upload progress percentage to user.
Alternatives To Soundcloud2
Select To Compare

Alternative Project Comparisons


Live Demo

SoundCloud-2 is a full-stack clone of the music and audio-sharing app SoundCloud, where users can upload, edit, and stream music, and comment on other users' songs.

A large portion of the project was completed over a 10-day timeframe, with new features and improvements added over time. SoundCloud-2 makes use of a Ruby on Rails/PostgreSQL backend, with React.js and Redux on the frontend.

Below are images of the splash page users encounter before signing in, and then the discover page they are taken to afterwards.

alt text

alt text


  • Secure frontend to backend user authentication using BCrypt
  • Users can upload, edit, and delete songs, and comment on songs from other users
  • User show pages with user information and an index of user songs
  • Modal integration for sign-up, sign-in, song-edit, and song-delete components
  • Audio Player that persists across navigation with play/pause and volume controls
  • Clickable progress bar and waveform visualization to skip around within the song
  • Dynamic page rendering depending on whether user is signed in or out

Custom Built Audio Player

SoundCloud-2 uses a custom-built audio-player utilizing React.js state management and the HTML5 audio API. When the audio-player component is mounted, a timeupdate event listener is placed on the HTML audio element which updates state in real-time, keeping track of the songs current time, its duration, and whether or not it has finished playing. The current time, progress bar, and song duration elements which appear on the page all make use of this information and update accordingly.

componentDidMount() {
        this.props.fetchUsers(); = document.getElementById("playbar-audio-player")
        this.playbarAudio.addEventListener("timeupdate", e => {
                 ended: false 

The progress bar also has a click-handler applied which allows the user to adjust the song's playback time. A percent variable is initialized which keeps track of where relative to the full-width of the progress bar the user has clicked, and then uses that number to adjust the song's current time and progress bar value.

    const percent = e.nativeEvent.offsetX/ e.currentTarget.offsetWidth
    this.playbarAudio.currentTime = percent * this.playbarAudio.duration;
    this.progressBar.value = percent / 100 

Below is a demonstration of the progress bar updating as the song progresses and updating when I click on a different section of the waveform and progress bar elements.

alt text


Rails was chosen due to its built-in support for relational databases and its RESTful architecture with PostgreSQL handling the database management.

React was chosen for the frontend due to its dynamic capability and efficiency. The React design allowed for a single-page web application experience, where every component does not need to be re-rendered and updated when a piece of information changes. Redux allowed for a normalized application state which made communication across components easier and more organized.

Wavesurfer.js ( was a library I found that allowed me to pass in an audio file and get back an interactive visualization of the waveform. I was able to write my own functions for play/pause and handle position change which I was able to integrate with the wavesurfer object API as well.

Future Releases

In the future, I would like to add

  • A search bar component
  • A likes feature
  • A playlist feature
  • A way to optimize the waveform visualization component (currently, it draws the waveform in real-time using canvas, which takes some time for the browser to perform)
Popular Soundcloud Projects
Popular Progress Projects
Popular Companies Categories

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