
Show HN: I built an HTML 5 Guitar Tuner - hoddez
http://www.freetuner.co
======
daeken
This 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/](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!)

~~~
elektronaut
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.

~~~
daeken
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.

------
publicfig
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](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!

~~~
asimeqi
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

~~~
staticfish
Personally I would hate clickable areas of a tab selector itself.

~~~
joshschreuder
Like the X close button?

------
hawkharris
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.)

------
exDM69
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.

~~~
hoddez
"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.

------
austinl
I just tested this against my Snark Clip On tuner
([http://www.snarktuners.com/tuners/original-clip-
on](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.

------
theatraine
I used this tuner to test it:
[http://www.audionotch.com/app/tune/](http://www.audionotch.com/app/tune/)
(and this chart:
[http://en.wikipedia.org/wiki/Piano_key_frequencies](http://en.wikipedia.org/wiki/Piano_key_frequencies))
Seems to work well! Good work.

------
DougHaber
I also made and released a chromatic instrument tuner using web audio input a
while back:

[http://www.leshylabs.com/apps/tuner/](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.

------
bhrgunatha
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.

------
nanidin
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](http://deibelman.github.io/dart-mic/demo.html)

For my project, I was charting the dominant frequency for fun.

~~~
hoddez
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.

~~~
nanidin
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.

------
donrhummy
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.

~~~
hoddez
Wow I didn't think it was supported on Android Chrome yet or any mobile
browsers. That's awesome!

~~~
donrhummy
It should have worked on Firefox too but there's a bug

------
vacri
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.

------
paperwork
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.

------
aalpbalkan
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](http://imgur.com/XCge66b)

Personally that UI is better for me.

------
cyberjunkie
You could add presets for different tunings and strings. That would help :)

------
ryanwhitney
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.

------
jeena
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.

------
a3camero
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?

~~~
snorkel
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)

------
cdelsolar
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)

------
Uehreka
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?

------
mmastrac
Very neat. What's the timeout for?

~~~
exDM69
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.

------
plg
not supported in Safari? (7.0.1)

~~~
hoddez
nope, sorry but safari does not yet support the web audio api features
necessary for this. I think they might be on the way.

~~~
freshyill
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.

~~~
hoddez
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.

------
bijanous
There are many similar programs on google play and apple app store. But good
job.

------
udfalkso
Awesome. How does the audio analysis work? Is it all happening client side?

~~~
snorkel
Yup, all client side. You can view source on the page and read the javascript
code doing the Fourier Transforms on the audio sample.

~~~
kybernetikos
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.

~~~
nanidin
He's using (or at least loading) the DPS.js library:
[https://github.com/corbanbrook/dsp.js/](https://github.com/corbanbrook/dsp.js/)

------
yuuks
Just tried it out with my synth, worked well. Good work :)

------
hope1985
nice job! I test it and worked well. But why you say that built it with HTML
5? It just is JavaScript!

------
skweezebox
Cool! I like the clean interface.

------
drasko
can someone tell me when "html 5" started meaning "javascript"

------
OhHeyItsE
do we need any more evidence that the web will win?

------
ellisonleao
very nice! congratulations!

