Description
I built a web app to use when I host karaoke in my building's theater room. This is not a tutorial, just an explanation of my project. I would, however, be happy to answer any questions or help anyone solve problems they may have when creating a Rails 7 app for hosting on Heroku.
Requirements
1) For my own setup the laptop running the karaoke equipment uses Chromecast to display the karaoke video on a large projected screen, and bluetooth to play the music to a karaoke speaker with two microphones. The app needed to be accessible from each guest's phone for easy queueing of songs, therefore hosted and not just operating locally on the laptop running the karaoke equipment.
2) The app needed to queue songs with a user-input URL pointing to the location of a video karaoke version of a song. When a performer clicks the URL of the next song from the laptop, the app needs to mark that song as finished. I also anticipated that songs would need to be skipped/postponed in case a performer was not available in the moment to perform their song.
3) A single user was sufficient for my own purposes, and I opted out of a traditional sign up to avoid managing users who might randomly access the hosted web app. This also allowed me to skip a lot of work that would be needed for a publicly accessible app, like validation of URLS or updating each logged in device's view with an implementation of ActionCable and Redis on Heroku.
Stack
I used Rails 7 and Postgres for hosting on Heroku with minimal Javascript and Sass. I also used Devise, Haml, Html to Haml, and RSpec.
Approach
I kept things as simple as possible in order to complete the project quickly. In all, it took me about four hours.
1) I ran Rails new, set up initial gems, initialized a Git repository with a remote connection, and prepared the app for Heroku.
2) I implemented basic CRUD for a Song with additional features to finish a queued song upon click of its link and skip of a song upon the click of a button.
3) I installed HAML and ran html2haml to convert all existing ERB files, based on a strong preference for HAML over ERB. I also use HAML on a daily basis professionally.
4) I used Sass for styling of the app. I kept the overall styling pretty simple to allow for thorough styling of states including active, hover, etc and usage of SVG icons.
5) I set up Devise to handle sign in of a single user. Devise will allow for future features, like using the invitable option to invite other users to the app.
6) I used RSPEC for minimal initial testing of CRUD for songs.
7) Last, I used ZeroSSL to create my own certificates, added them to the Heroku app, and set up a CNAME through my own domain provider in order to move from the Heroku app URL to www.karaoke.jaredharbison.com.
KARAOKE QUEUE
This karaoke web app can run on a laptop computer casting video to a screen via chromecast and audio to a karaoke speaker using bluetooth. Users can login from their mobile devices with the karaoke host's login information to add songs to the queue.
Description
A user can access the web app to login with the karaoke host's login information and then click the link to navigate to the /songs index page. The /songs index page contains a form at the top to queue a new song object containing a URL to a video karaoke version of a song, likely from YouTube. Upon submit of the form the song is added to the bottom of the queue on the /songs index page. The next song has a play icon that will open the URL in a new browser tab and mark the song object as finished, then it…
Top comments (2)
This sounds freaking dope!
I'm thinking I could potential use this to have a Karaoke night at my house. Here's my home studio with a screen that could be used for casting.
... I bet I could route things into my mixer so that I can use my large monitor speakers.
I might have to check this out as a user. Appreciate ya sharing!
I'll set up user registration sooner than later then! Or feel free to email me and I'll send you a login to experiment with it .
Your setup looks much more elevated than mine. You might be able to get everything into your existing setup if you have microphones.
Because I have limited ability to hook into equipment in our theater room at my building, I just purchased a karaoke machine. It was pretty affordable.
JYX Karaoke Machine with Two Wireless Microphones, Portable Bluetooth Speaker with Bass/Treble Adjustment, PA System with Remote Control, LED Lights,Supports TF Card/USB, AUX IN, FM, REC,TWS for Party