GuitaraokeLeader for Android
Play guitar and sing with your friends
The lyrics and chords show in sync with the "Leader" on any smartphone, tablet, computer or smart TV.
version: 3.4 date: 2022-06-21 author: bestia.dev repository: [GitHub] (https://github.com/bestia-dev/GuitaraokeLeader)
Hashtags: #java #android #server #tutorial
My projects on Github are more like a tutorial than a finished product: bestia-dev tutorials.
To play the game, go to https://bestia.dev/guitaraoke and follow the instructions.
I never liked karaoke. A single "performer" in front of an uninterested crowd.
But I like to play guitar and optionally sing along. And I found a buddy guitarist and we can play and sing together.
I even found some more friends that like to sing along (mostly when drunk).
And now we have a problem. Nobody remembers the lyrics and the chords.
I am a programmer and every problem looks like it has a software solutions.
GuitaraokeLeader: it is like karaoke but with added guitar chords.
It is not a new or original idea. A lot of guitarists came to the same solution.
But now we have smartphones! There are 2 roles in this game. One
Leader will lead many
First I created some videos. In the video editor
ShotCut for Win10, I put together the audio of the song and copied the lyrics and chords I found on the internet. I try to show the lyrics and chords a little bit earlier so we can prepare to sing-along and play-along guitar.
It is great that I can later modify the chords and the lyrics if I like it different.
There is a lot of Guitaraoke videos already on the internet. Just google it.
GuitaraokeLeader app can use any mp4 video you can download to your android.
TODO: I will make a video tutorial how to create Guitaraoke mp4 files. It is easy.
When we have a party often we don't have a big TV for everybody to see the lyrics. But everybody have a smartphone. Everybody can easily play Guitaraoke videos in sync with the Leader.
After different ideas, my final solution is to make a Web + WebSocket server app for Android.
I don't plan to publish it on Google Play, but I will create an APK and release it on Github. It is easy to install apk from unknown source on Android.
Based on WebSocketChat
The basics I got from https://github.com/JCAguilera/WebSocketChat
It crates a web server on the port 8080 and a WebSocket server on port 3000. It uses NanoHttpd for the Webserver, and Java-WebSocket for the WebSocket Server. It has a very simple layout and it's pretty easy to use. I will simplify it as much as possible. The server will be pretty stupid. It will just serve files and broadcast messages to all attached clients. The server has no knowledge at all what is going on.
This is useful for more than just for my project GuitaraokeLeader. Maybe I will use the same concept for other projects of mine. For debugging purposes I will print on the server app messages and debugging info.
There is no escape from using Android Studio for Android development. I use it on Win10.
I attached my Samsung A50 smartphone with a USB-c cable. On the phone in
Settings-About phone I clicked 7 times on the Build number. That enables the
Developer options. Then in
Developer Options I enabled
Stay awake and
Finally it shows in Android Studio in the Toolbar in
Running devices before the
The version is Android 11.0 (API level 30).
Only the Leader have to work a little to prepare to use this application.
This app will work only on a local network like
The Leader will create a
mobile hotspot wi-fi network on his smartphone. All other phones will connect to this network.
To limit the internet traffic, change the
Mobile networks - Network mode to
2G only. After using GuitaraokeLeader, return the
Network mode to
Most smartphone can read a QRCode to easily connect to the wi-fi.
The priject for the follower webapp is inside the android project in
It is just a web page for the Guitaraoke Follower. Simple
assets folder is distributed with the server installation.
In Android Studio right click on
app - src - main - res and open
New - Image Asset. This opens the
Asset Studio where the icons are edited and exported into different files.
Android assets and ExternalStorage
Files that are distributed with the server are called
assets. They are read-only and accessible with the object
The guitaraoke files are just videos in mp4 format. You can choose the folder where the app will read these files. Recommended location is
Music/Guitraoke/Romantic. You can have more folders for different kind of music. You have to create these folders manually when you run the app for the first time and Allow access. You can copy the mp4 files using the android file manager.
The songs I personally prepared are downloadable. Click on the button
Download songs and then click on a song from the list. It will be downloaded in the background.
Leader needs to install the
GuitaraokeLeader APK to his android smartphone.
The followers will just use their internet browser.
All the instructions are here: https://bestia.dev/guitaraoke.
The Download songs page
After the installation there is only one video file available:
Welcome to Guitaraoke Leader.
Other songs videos can be downloaded from my web page when you click on
There are also find similar videos on the internet. Download them and then just copy the
mp4 files into your Guitaraoke folder using the android file manager.
bad or good habits. And there is absolutely no help for the developer from the interpreter/JIT. Bad, bad language.
modules in 2020 will make it better. Eh, just a tiny bit.
Separate files for
html, that makes sense.
Inline event handlers are easy to use, but not recommended in
let is better that
globalThis is better than
window, but iPhone Safari does not use it.
If a variable is not declared, I get an error in runtime. Before you must write
use strict, for modern modules it is implicit. Good, better than before (silent declaration leading to incorrect execution), but still not enough for developer comfort.
<script type="module" >import * as j from './js/index.js';j.start_script();</script> is better than other ways to import or include scripts. Having an alias for the module exported functions is very precise:
State and state_transition
It is much easier to think about a page with the concept of
One page can be in different clearly defined
states. One state defines slightly different user interface, some elements are hidden, others are visible. There is a limited number of states, this is what makes it easy to grasp and understand.
The transition from one state to the other defines the actions to be done.
I tried really hard to make the same video play in super-sync on more devices simultaneously.
I gave up.
Perfectly sync video playback on many devices is not possible. The sound is the problem, we can hear the smallest out-of-sync. The solution is simple. Mute the sound by default to all followers. The Followers need only to see the lyrics. The sloppy sync is just enough for the lyrics.
The sound will come only from the Leader. Probably he will use a loud bluetooth speaker connected to his phone.
Done! Quick and dirty!
Having separate app for the server and open Chrome for the Leader page didn't work on the same smartphone, because the server went to sleep when there was no user interaction.
I added a WebView in the app and now the Leader page is inside the app. The server text for debugging is now accessible with the button
In Android Studio
Build-Generate Signed APK, use the
C:\Users\xxx\AndroidStudioProjects\AndroidKeyStore.jks with the password you saved somewhere to not forget it.
Safari on iPhone
Safari on iPhone is a special beast. If everything works fine on Chrome, Firefox, Android,... it
means nothing to Apple. Safari is the king and it has always something going on outside of the
standard. For example it does not know about
globalThis. I must use the old
Then the video play(). What a nightmare. Every year something different. Documentation sub-zero. No
other way to test how it works than having the physical device itself. A true catastrophe.
Finally I found a blog among thousands of people having problems with video on iPhone that
range request problem. iPhone talks only to servers that can return video in
Not all the servers can do that. Nginx can. I use java nanoHTTP and need to code it on my own.
I hope to find something here:
To test it I can use this curl command:
curl --silent -v --range 20-40 http://192.168.18.251:8080/videos/Welcome to Guitaraoke Leader.mp4
This returns 3497681. It does not understand ranges. This nginx server does understand:
curl --silent -v --range 20-40 https://bestia.dev/guitaraoke/videos/Welcome to Guitaraoke Leader.mp4
It return 21. Correct answer.
make a video tutorial. iphone little problems
Open-source and free as a beer
My open-source projects are free as a beer (MIT license).
I just love programming.
But I need also to drink. If you find my projects and tutorials helpful, please buy me a beer by donating to my PayPal.
You know the price of a beer in your local bar ;-)
So I can drink a free beer for your health :-)
Na zdravje! Alla salute! Prost! Nazdravlje!