Invoke is a full stack web application inspired by SoundCloud. It utilizes Ruby on Rails on the backend, a PostgreSQL database, and React.js with a Redux architectural framework on the frontend.
Alternatives To Invoke
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Tizonia Openmax Il1,450
3 years ago125lgpl-3.0C
Command-line cloud music player for Linux with support for Spotify, Google Play Music, YouTube, SoundCloud, TuneIn, iHeartRadio, Plex servers and Chromecast devices.
14 years ago1October 23, 201328mitRuby
A terminal client for
6 years ago49
:musical_note: Sleek music player for Spotify, SoundCloud, Google Play Music and your local files
6 years ago36mitC#
Espera is a media player that plays your music, YouTube videos, SoundCloud songs and has a special "party mode".
3 years ago3mitPython
Search and play any song from terminal
Playemjs87242 years ago21December 10, 202112mitJavaScript
▶️ Streams a list of tracks from Youtube, Soundcloud, Vimeo...
4 years ago4mitPHP
cloudradio is a web app that plays all songs from the soundcloud charts
6 years ago1mitJavaScript
A music player made with Fuse
Music Discord Bot67
9 months ago5gpl-3.0Python
A music Discord bot with more than 30+ commands which allows to play music on your server efficiently. Supports Youtube, Spotify, Deezer and Soundcloud links. Skips intros and blanks in the music with Sponsorblock.
Audioshield Playmusic51
5 years ago5JavaScript
A Proxy server for Audioshield that replaces Soundcloud support with Play Music support
Alternatives To Invoke
Select To Compare

Alternative Project Comparisons



Invoke is a full stack web application inspired by soundcloud. It utilizes Ruby on Rails on the backend, a PostgreSQL database, and React.js with a Redux architectural framework on the frontend.

Features & Implementation

Continuous play and waveforms

Using a top level react component, Invoke allows you to listen to music whilst seamlessly navigating the site. I have used the react-waveform library in order to dynamically generate waveforms based on the song that is currently playing. The waveforms were a tricky feature to implement, given that they need to communicate effectively with the top level component in order for the positions to sync on both the waveform and the playbar. In order to allow for seamless play, I added two new fields to my audio reducer - a 'token' field, that would be responsible for determining whether the track was currently playing or paused, and a request field, which would be then used by my playbar component to provide the current playbar time to the other component.

The default state for my audio reducer:

const defaultState = {
  track_url: "",
  user_id: null,
  id: null,
  token: "",
  request: ""

The action in my playbar that would provide the playback time:

if ( === "REQUEST-TIME"){

Below is a gif of the continuous and responsive play in action:

gif of app

Bottom Playbar

This was perhaps one of the hardest logical challenges when building this website. My playbar dynamically sets the width of the progress component based upon the current playtime of the song in progress. Additionally, I have allowed the user to click on any position on the playbar, as well as to make it draggable, which will result in a change of the current time, and will update the corresponding waveform accordingly.

In order to get the playbar to resize as intended, I used the following code:

let duration =;
let currentTime =;
this.fullduration.innerText = (this.timeshow(

let newval = currentTime/duration;
let res = newval.toLocaleString("en", {minimumFractionDigits: 10, style: "percent"}) = res;
this.timeelapased.innerText = `${this.timeshow(currentTime)}`
let ballval = newval * this.playbarholder.clientWidth = (ballval) + 'px';

Logged in homepage

The logged in homepage is a pseudo-index container which will show you all the songs posted by the users that you have followed. This page renders multiple waveforms, and is comprised on a number of 'SongplayContainers'. This page will allow you to dynamically choose songs and render waveforms. By clicking play on one song, another will stop.

The code snippet which handles song change:

if ( === "PLAYING" && === {
  this.setState({playing: true, volume: 0, pos:})
} else if ( === "PAUSED" && === {
  this.setState({playing: false, volume: 0, pos:})
} else if( !=={

  this.setState({playing: false, volume: 0, pos: 0})

An image of the logged in homepage.

image of homepage

User Show and Song Show pages

Each User and Song, when created, will be given their own show page. Song show pages will allow for comments on the song, as well as play, and User show pages will allow for play of all of their uploaded songs.

Likes and Comments

Users can comment on songs, and like them also. My comment feature uses the current music playback time when commenting on the song in question in order to attribute a timestamp to the comment in question based on the song. If the song is not playing, users are assigned a random timestamp, as is the case on SoundCloud.


This app features both user and song CRUD.

Future directions for the Project


I have currently implemented state search, but implementing full database search is the goal.

Playlists and Reposts

These will be integral features if the app were ever to be used by the mass market


I would like to make a discover and smart song feature based on the Echo Nest API

Better Waveforms and storage in the song model

It would make sense to store the waveform data for each song in the relevant song model, so that the waveform data does not need to be generated every time the waveform is loaded up.

Popular Soundcloud Projects
Popular Play Framework Projects
Popular Companies Categories

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