IVANCA — Making the ultimate-guitar web player easier to...

Making the ultimate-guitar web player easier to practice with

Recently I have been practicing a few songs on my guitar and I realized that is important for me to not move away my hands from my guitar, when I do it because I need to use the mouse or keyboard I lose a bit of focus and some precious time, not to mention is not good for my back as I have to lean forward, doing this one time wouldn’t be a problem but as I sometimes do it more than 100 times in a single day it can start hurting! (my body reminds me I’m no longer in my twenties!).

I’m a programmer so I decided to try to create a solution myself after not finding existing solutions online, so I decided to buy a USB pedal, one of those you can press to simulate any key on your keyboard, but this was just the first step as there isn’t actually a single key I can press to rewind to the current section of the song, the ultimate-guitar.com web player lacks a button or hotkey to do that; fortunately I can write some JavaScript and add it myself with the help of tampermonkey (you may user your preferred userscript manager).

My requirements are just 2 commands, one to go back to the start of the part being played of the song (e.g. verse, chorus, bridge) and another to go back to the start of the selected part of the song… but the thing is that I only have one USB pedal! And I don’t want to buy another! Plus I don’t want to move my feet around, I’m practicing guitar here not drums! So I just made a bit of code that does one thing when pressed once and a different thing when is pressed twice, in JavaScript that is pretty easy to achieve using setTimeout:

Moving into the first command: After fiddling it a bit I discovered that the main part of the player (the tablature) uses obfuscated WASM code that renders over a canvas element using WebGL (it seems like this was a desktop software that was transformed into a web version), fortunately for me there is a little bar at the bottom made of simple plain DOM elements (e.g. not canvas) with a little green line signifying the player’s position, it looks like this:

First I tried to use the left offset of each part (relative to its container) to calculate where to simulate a click but that wasn’t working too well, I did some tests and sometimes it was moving after or before the desired position, playing before is not a big deal but playing after is unacceptable, so I fiddled a bit more with the HTML and realized there was a much better source of data to make such calculation:

The different parts have their widths specified with percentages with 5 decimal places! This data has not been clamped like the offsets I was trying to use, those are limited by the amount of pixels available. Great, so I started using that porcentual width, and I add those until I reach a number greater than the porcentual position of the green line, as expected this gave me much better results and now the simulated click was moving me to the desired position, the code ended up looking like this:

Then I created the second command which was pretty straightforward giving that I can get the desired result simulating a click on the restart button (⏮) and then the play button (⏵), so the code ended up looking like this:

That’s it! You may find the full code: at https://gist.github.com/Ivanca/a90848f8ee4d7f62e939630013e214d8

While we are at it I would like to mention I’m looking for a TypeScript/JavaScript full-time remote job position, I have more than 12 years of experience using JavaScript, and I have experience with PHP, Python, C#, React and Angular as well, I’m located in Colombia (so not the US), if you or your company are interested ping me at ivanca at gmail.

• 1 day ago