At Halfstack Conf in May I gave a presentation on what I think responsive design should be about in 2020 and what it will be about going forward: responding not just to static device properties like width and height but also to user preferences like preferring dark mode or reduced motion. The recording of it […]
Guitar tabs as they should be: Guitaryst.com
Guitaryst is no longer online
After Launching Lystener I got a lot of requests for a “Lystener for guitar tablature”, including from my mother. After thinking about it for a while, I went to work and finished most of it in a weekend. I continued to tweak it for a bit, and I’m launching Guitaryst today.
What is Guitaryst?
Just how Lystener shows you the lyrics while you’re listening to the song, Guitaryst shows you the guitar tab. If you don’t know what guitar tabs are, Wikipedia has the answer. Guitaryst works by search, or with Last.fm, Like.fm and Libre.fm. I emailed the latter two and asked if they could add the API I needed for Lystener, and both did that ridiculously fast, so kudos to them. Definitely check them both out.
One of the annoying things when it comes to playing guitar from tabs on your screen, is having the guitar in your lap and having to reach over to type in the next song. But what’s also annoying is when you come to the bottom of the screen, the tab isn’t finished and you have to scroll to get to the next part.
I wanted Guitaryst to work without you ever having to touch your screen. So it should Find the tab for you and when it has it, Scroll it for you. Just scrolling at a set rate (like some other tab sites do) isn’t good enough though. I wanted tabs to scroll along with the song. With Guitaryst, you should never have to leave your guitar.
So I implemented another API, this time The Echonest API. I can send the title and artist of a song to their api, and get the exact length of the song. This means that Guitaryst will scroll the tabs in sync with the song!
Code-wise, Lystener and Guitaryst are almost the same, so “porting” it served as a nice incentive to clean up and improve on both. Lystener has changed a lot in the last couple of weeks, and this is mostly due to insight gained from building Guitaryst.
I bought an iPad when it came out, and immediatelly thought of the awesome things you could do with it. So I used some webkit-fu to make Guitaryst work nicely on the iPad. You can install it to your home screen, it has a nice icon and looks pretty good. There are probably some improvements I can make yet (it only works in landscape mode, for example), so feel free to tell me where I dropped the ball.
Guitaryst is hosted at Djangy, a “Heroku for Django”. I got a private beta invite, tried it out and apart from some obscure stuff with my nonstandard Git config, it’s worked flawless. No longer do I have to mess around with vhost files, wsgi settings and database stuff, Djangy does it all. They saw my app when I was still testing it and liked it so much they wanted to mention it at their blog, so that was nice.
I have private beta invites for 10 interested people. Comment in the replies with a valid e-mail address if you want one, and tell me what you want to do with them!
Guitaryst and Lystener
I’m sensing a trend, and I would love to expand this into more areas. Alas, other music data is hard to find. I’ll try getting a bass tab version going soon. I decided against adding Amazon referral links and Youtube videos as I really like the interface as it is now, but I will probably add one or both in the next couple of weeks, in a non-obtrusive way.
Guitaryst has it’s own twitter account: @guitaryst, so follow that to continue getting updates. Please let me know what you think of guitaryst in the replies, on twitter or via [email protected].