IVANCA — Making the ultimate-guitar net participant simpler to…
Making the ultimate-guitar web player easier to practice with
Lately I’ve been training just a few songs on my guitar and I noticed that’s necessary for me to not transfer away my palms from my guitar, once I do it as a result of I want to make use of the mouse or keyboard I lose a little bit of focus and a few treasured time, to not point out is just not good for my again as I’ve to lean ahead, doing this one time wouldn’t be an issue however as I generally do it greater than 100 occasions in a single day it will probably begin hurting! (my physique jogs my memory I’m now not in my twenties!).
I’m a programmer so I made a decision to attempt to create an answer myself after not discovering present options on-line, so I made a decision to purchase a USB pedal, a type of you’ll be able to press to simulate any key in your keyboard, however this was simply step one as there isn’t really a single key I can press to rewind to the present part of the music, the ultimate-guitar.com net participant lacks a button or hotkey to do this; fortuitously I can write some JavaScript and add it myself with the assistance of tampermonkey (you could consumer your most well-liked userscript supervisor).
My necessities are simply 2 instructions, one to return to the beginning of the half being performed of the music (e.g. verse, refrain, bridge) and one other to return to the beginning of the chosen a part of the music… however the factor is that I solely have one USB pedal! And I don’t wish to purchase one other! Plus I don’t wish to transfer my toes round, I’m training guitar right here not drums! So I simply made a little bit of code that does one factor when pressed as soon as and a special factor when is pressed twice, in JavaScript that’s fairly simple to attain utilizing setTimeout:
Shifting into the primary command: After fiddling it a bit I found that the primary a part of the participant (the tablature) makes use of obfuscated WASM code that renders over a canvas aspect utilizing WebGL (it looks like this was a desktop software program that was remodeled into an online model), fortuitously for me there’s a little bar on the backside made of easy plain DOM components (e.g. not canvas) with a bit inexperienced line signifying the participant’s place, it appears to be like like this:
First I attempted to make use of the left offset of every half (relative to its container) to calculate the place to simulate a click on however that wasn’t working too effectively, I did some exams and generally it was shifting after or earlier than the specified place, enjoying earlier than is just not an enormous deal however enjoying after is unacceptable, so I fiddled a bit extra with the HTML and realized there was a a lot better supply of information to make such calculation:
The completely different elements have their widths specified with percentages with 5 decimal locations! This knowledge has not been clamped just like the offsets I used to be making an attempt to make use of, these are restricted by the quantity of pixels accessible. Nice, so I began utilizing that porcentual width, and I add these till I attain a quantity better than the porcentual place of the inexperienced line, as anticipated this gave me a lot better outcomes and now the simulated click on was shifting me to the specified place, the code ended up wanting like this:
Then I created the second command which was fairly simple giving that I can get the specified end result simulating a click on on the restart button (⏮) after which the play button (⏵), so the code ended up wanting like this:
That’s it! Chances are you’ll discover the complete code: at https://gist.github.com/Ivanca/a90848f8ee4d7f62e939630013e214d8
Whereas we’re at it I want to point out I’m searching for a TypeScript/JavaScript full-time distant job place, I’ve greater than 12 years of expertise utilizing JavaScript, and I’ve expertise with PHP, Python, C#, React and Angular as effectively, I’m positioned in Colombia (so not the US), in the event you or your organization have an interest ping me at ivanca at gmail.