Show HN: I built an HTML 5 Guitar Tuner
freetuner.coThis isn't exactly an app or traditional tuner, but I recently put a TronicalTune unit on one of my guitars (Les Paul Studio -- it's my project guitar) and it's the coolest thing I've ever played with: http://www.tronical.com/ Makes it so easy to switch tunings, the locking tuners are great (learning to string it up properly takes some time, but it's worth it), and it doesn't add too much weight to the headstock. Can't recommend it enough for guitarists with compatible equipment; really wish they'd make one that would fit on my 8-string or my PRS!
(Note: Not affiliated with them in any way, just become a huge fanboy lately!)
Ha. I did the exact same for both a les paul and an acoustic i built. Really neat.
I'm surprised they can tune to within a few cents in a few seconds.
Ouch, they cost more than most of the guitars I own (Epiphone makes really decent stuff these days, acoustic and electric). Definitely cool tech, though.
Pretty cool. Did you have to drill out the headstock, or did it fit the tuner holes? I'm a bit vary of putting power tools to my Les Paul.
And how does the weight feel? I put Planet Waves Auto Trim locking tuners (also highly recommended, btw) on my project Strat, and it became noticeable top heavy.
I didn't have to drill anything at all -- fit perfectly. Just make sure you print out the template first and check it. The install took me all of maybe 5 minutes; it took me longer to figure out how to calibrate it for the first setup than to actually get the thing on the guitar (protip: read the manual first ... I didn't).
I don't notice any difference whatsoever from the Hipshot locking tuners I put on there previously. However, this particular guitar is slightly insane, weight-wise; two heavy magnetic pickups with metal cases, piezo bridge and preamp, GK-3 MIDI pickup. It's chambered, but weighs more than an unchambered LP Custom, due to all the extra equipment. So the headstock doesn't exactly add much.
1. They fit exactly. You download the templates, and place them against your guitar to make sure the holes are going to be right.
2. The weight is probably slightly less than what you have now.
6 grover tuners from my les paul = 272 grams on my scale
The tronical tuners, including battery pack = 268 grams on my scale.
Oddly enough, this is the app that made me realize that Chrome puts a recording symbol next to the name of the page when a page is using your microphone now (kind of like when they put the speaker icon on tabs that are playing sound). I think that's pretty cool!
http://i.imgur.com/GV5TktA.png
Edit: I should also mention that this is really well done, and I've been looking for something simple like this for a while. Thanks for sharing!
This is good, but what would be great is if I can click on that icon and silence the page. This would be useful to silence those ads that play a video automatically and don't provide a stop button
Personally I would hate clickable areas of a tab selector itself.
Like the X close button?
I don't own a guitar, so I tested this web app by making guitar-like noises. It turns out my voice produces "C" chords...and my neighbors probably think I'm insane.
(Jokes aside, this has a great design and it's an interesting application of the microphone API. Hope to see more apps using this feature in the future, especially in conjunction with the cool voice-to-JSON APIs that have recently come out.)
Good work, thank you. I have been looking for a free guitar tuner and I have had varying experiences with the ones I've used.
I mostly use a linux native app called lingot. It does the job but has small annoying bugs (settings file is not parsed properly, my ALSA device CARD:foo,bar=baz fails because of the colon character, I'll write a patch one of these days).
This guitar tuner works, I tuned my guitar succesfully with it but it was a bit painful. I'm on Firefox 27.0 on Linux, using Alsa, no PulseAudio. I am using a Microsoft LifeChat headphone + microphone laid on the table before me that is good enough to tune my guitar with Lingot. I would have tried Chromium for comparison but it seems I have a version that is too old.
There was a very bad latency, around 1 second from playing a note to seeing feedback on the display. The information I got back was decent and good enough to get my guitar in tune. Overall the quality of this was somewhat comparable to a cheap guitar tuner from the 1990s with an internal microphone. But I think the culprit here is the platform (ie. browser + audio frameworks) rather than the quality of the app itself.
What platform(s) have you used with tuner and how did it work out? What browser, OS and audio system did you use?
If you want me to help out testing this app, please reply and tell me what to test and I will.
"I tuned my guitar succesfully with it" Cool! That's what I like to hear.
Thanks for the review and feedback. The performance delay may be due to the high volume right now because of the posting.
Also this is a very very simple algorithm that I will likely replace. As stated below, the cool thing (I think) about this is that its all javascript. All other online tuners require flash to use the microphone. This is still somewhat of a proof of concept/prototype and I hope to improve.
I tested this on a macbook pro with the built-in microphone and mostly Chrome. It's great to know that it works on a completely different platform.
I just tested this against my Snark Clip On tuner (http://www.snarktuners.com/tuners/original-clip-on) and it's almost identical. I hope your site eventually passes the other "guitar tuners" in Google search results that just play the tones, great job overall.
I used this tuner to test it: http://www.audionotch.com/app/tune/ (and this chart: http://en.wikipedia.org/wiki/Piano_key_frequencies) Seems to work well! Good work.
I also made and released a chromatic instrument tuner using web audio input a while back:
http://www.leshylabs.com/apps/tuner/
I haven't looked too closely, but my technique is probably a bit different. I use FFT only to gain a hint of where to look. FFT itself, at least in the form that is built into the web audio api, is not accurate enough for a tuner. Instead, after FFT tells me where to look, I use auto-correlation to scan those frequencies. I'm not sure if this is the ideal technique, but it seems to work pretty well.
I may have released too early, because back when I wrote this web audio input only worked in limited versions of Chrome. It didn't even work in the main release without changing flags, and so my release went mostly unnoticed on the internet.
I haven't checked in a few months, but I've been waiting for mobile support to catch up. Firefox mobile beta started somewhat working a few months ago, and I don't know if that moved up into the main version. While Chrome works well on the desktop now, on mobile I don't think they have any working web audio input support, unless that changed recently.
This is great.
It seems to have trouble with the A on both of my classical guitars. The needle skips directly from one tick below to one tick above while never lighting up (despite the string being tuned correctly.)
Interestingly the needle shows C, D and E correctly using the A string at the 3rd 5th and 7th frets.
I used a library I found on github for a similar project - here's their demo page: http://deibelman.github.io/dart-mic/demo.html
For my project, I was charting the dominant frequency for fun.
Whoa cool thanks for sharing that. This could have been very helpful, and still might be. I'll have to check it out and see what they did differently and how the performance compares.
Underneath, it uses DSP.js also, so I'd imagine it's pretty similar. I am able to get autocorrelation & FFT frequency results out & graph them at about 50hz without any optimization on my rather old laptop in Chrome.
This worked on Chrome on Android (KitKat 4.4) but not on Firefox Beta for Android. Both correctly showed the microphone sharing notification, but on Firefox, no sound ever registers.
Wow I didn't think it was supported on Android Chrome yet or any mobile browsers. That's awesome!
It should have worked on Firefox too but there's a bug
Interesting. I don't have a microphone, but it did detect my Rocksmith guitar cable as a mike. It almost worked, but didn't quite get the right tone - I'm assuming the custom cable isn't just a straight-out mike.
The needle was very stuttery, as opposed to other tuners which have a much higher frequency update. Is it always like this, or am I seeing perhaps an interaction effect with this non-standard mike?
Nice work, though.
Interesting, just last night I was searching google to see if it is possible to write a guitar tuner in html 5 :) I just started learning the guitar. When I do basic finger exercises, I have no idea if I'm plucking the right string. Something like this could be easily extended to help provide feedback for such exercises.
Please try Guitar Tuner.app on Mac OS X. It has a neat UI so I can see where the sound falls within on the scale. Took a screenshot for you: http://imgur.com/XCge66b
Personally that UI is better for me.
You could add presets for different tunings and strings. That would help :)
No standalone tuner on me, and both Guitar Toolkit and GarageBand's crap hit-or-miss tuner were failing me with a bass. Remembered seeing this and got tuned up in no time. Thanks for making it.
Wow, great work, I will check out the code and bookmark the page. I struggle to find a program to tune my accustic guitarr because I'm often on different computers.
And nice touch with the countdown too.
I don't have a guitar but I can tap on my desk, and that seems to result in random notes. Maybe there's a way to improve the detection so it knows it's a guitar note?
A whistle or clean guitar string pluck would have one strong tone, and a random banging noise would have many tones overlapping. Typically a digital guitar tuner is just doing a discrete Fourier transform of a sound sample and checking the frequency of the most dominant tone in that sound. Sure it's possible check the signal for tone clarity, such as count how many discrete Fourier components are in the sound sample and their relative strength, where fewer strong components is a cleaner tone.
... but is it really worth it in this case? No, because guitar tuner apps are cheap and plentiful, and electric guitar players use an inline tuner rather than a tuner with a microphone. And for tuners with microphones I get annoyed when the tuner doesn't respond so I prefer a tuner that doesn't try to be too smart and filter out too much.
This is really just a cool example of audio signal processing in javascript (or I suppose we call it "HTML5" nowadays)
hoddez: this is a non-issue and a poor suggestion, please ignore this advice and continue to make great things. I doubt anybody has ever had trouble tuning their guitar because they accidentally tapped their desk instead of strumming their guitar, subsequently getting lost in a pool of confusion. Just doesn't happen, so no point in building a solution to that 'problem'.
Sometimes people go out of their way to find flaws with a service - this is one of those times.
Stand alone electric tuners can also confuse ambient sound for notes. I suspect if guitar detection were desirable and easy to implement, someone would have done it already.
You can sing "do, re, mi, fa, so, la, di", you've probably heard it before somewhere. If you do it right, every word you sing should result in the letter changing up the alphabet more or less. Doesn't matter if you're notes aren't very true, or that you don't start at the right frequency, I guarantee that you will get the relative distances close to right, and the tuner will have you believe it ;)
maybe, but even a tuner you buy in a store will act that way.
Nice job. It's always hard to find a good guitar tuner app and this could become my go-to from now on :) (at least until I develop perfect pitch)
This is awesome. I've bookmarked this for the next time I lose my tuner.
Only question, why does it have a 5 minute timeout?
Very neat. What's the timeout for?
Probably the continuous audio input and analysis is consuming a lot of cpu. Having a timeout will help if you forget it open in the background.
not supported in Safari? (7.0.1)
nope, sorry but safari does not yet support the web audio api features necessary for this. I think they might be on the way.
Why not explain that on the page instead of throwing an alert?
When I see alerts like that, my reaction is "this guy just doesn't know what he's doing…it's probably just shitty browser sniffing".
Plus, you can probably use Modernizr to detect this feature, and show the message based on that.
Yeah thats a good point. I don't like the alert either but I'm not the best designer/front end dev so i didn't bother with any custom ui for now.
There are many similar programs on google play and apple app store. But good job.
Awesome. How does the audio analysis work? Is it all happening client side?
Yup, all client side. You can view source on the page and read the javascript code doing the Fourier Transforms on the audio sample.
What's the socket.io for?
Also, am I right in saying that you did your own fft rather than use the built in analyser? I tried to do one with the built in analyser a while back and had mixed results.
He's using (or at least loading) the DPS.js library: https://github.com/corbanbrook/dsp.js/
Just tried it out with my synth, worked well. Good work :)
nice job! I test it and worked well. But why you say that built it with HTML 5? It just is JavaScript!
Cool! I like the clean interface.
can someone tell me when "html 5" started meaning "javascript"
do we need any more evidence that the web will win?
very nice! congratulations!