12 ms·

Show HN: How to Tune a Guitar

338 points by mathisonian 8y ago

mathisonian 8y ago
Hi HN - I'm one of the authors of this post and I lead an open source software project called Idyll that tries to make it easier to write interactive posts like this for the web. This is part of a research project I'm doing while completing a phd at the university of washington. If you like this one, check out other examples that have been made with the tool here: https://idyll-lang.org/gallery https://idyll-lang.org/gallery
- pen2l 8y ago
  I just logged in to say that I love you for creating both this specific application and for software you are creating to make things like this. I loved the explanation, I love the execution, and I love the spirit behind this. More power to you man.
- pouta 8y ago
  Thank you for the mobile data warning. I wish more websites did it.
dgurney 8y ago
super cool. Nice work
kmm 8y ago
Doesn't work on Chrome 66 due to recent policy changes with regard to autoplay https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio https://developers.google.com/web/updates/2017/09/autoplay-p... I checked it out in Firefox. Very neat :)
- thefifthsetpin 8y ago
  So crazy. I'd seen on HN that chrome was rolling out that feature, but it didn't seem like a big deal at the time. Chrome already blocks things like pop-ups and flash, but it tells me when it does so and offers me a way to load the pop-up / flash content if I want it. This time, chrome just feels broken.
- mathisonian 8y ago
  I've just pushed a fix for this in case of errors due to the new policy. Not a huge fix but I wish it didn't need to be done.
  - telesilla 8y ago
    Doesn't work for me in Chrome Beta or Canary I'm afraid, unless I reload the page which is probably not intuitive for many users. What I've been doing is sending a pop-up to users on audio-critical pages (where audio is the entire point of the site) that says "hi, let's get started, you'll hear audio on this page so please adjust your headphones or speakers" and that seems to give the best result. It's also helpful on a page like yours where the sound is quite loud and I found it a bit loud for my headphones. You must also just provide a button that changes the sound volume which would have the same effect, of telling Chrome that the user has interacted with the page.
- zodPod 8y ago
  Oh man. Thank god they've added this. I've been using an extension to do this for a while now. I'm so glad they finally just implemented it!
- delinka 8y ago
  I can't even get this guitar tuning site to work by adding it to the whitelist...
JimiofEden 8y ago
Really cool. Audio didn't work for me on chrome though
- mathisonian 8y ago
  Sorry to hear about the audio issues! I tested on chrome and macOS, and didn't encounter anything like that. I'm curious what OS you're using, or maybe its just Google's new 'smart' autoplay policy.
  - JimiofEden 8y ago
    Looks like Google Chrome 66, and on windows 7. I'd wager it's the new auto play being funky. Went to firefox instead and was able to go through it. Again, very cool. =)
  - thefifthsetpin 8y ago
    It absolutely is that. I experienced the problem, captured options.context = new window.AudioContext(); from index.js at line 224, and then just bound a user-action (I went with document.body.addEventListener('click')) and used that to call options.context.resume(). After which point, it was cool. =)
  - morganvachon 8y ago
    Not OP, but chiming in to say that on Waterfox on Windows 10, the initial guitar that is supposed to be out of tune is perfectly in tune (I'm a guitarist and it was obvious). I scrolled down to the tuning part anyway, and moving the knobs changed the frequency display but never changed the sound of the string being tuned.
mattnewport 8y ago
Reminded me of my high school physics project on tuning a guitar using beats on harmonics: https://en.m.wikipedia.org/wiki/Beat_(acoustics) https://en.m.wikipedia.org/wiki/Beat_(acoustics)
bmurphy1976 8y ago
Seems like a neat idea, but controlling the tuners with the mouse is really fussy and annoying. There seems to be some kind of delayed reaction and I frequently overshot the frequency I was targeting (a problem I don't have when tuning my actual guitars).
- raverbashing 8y ago
  Agreed, this was not smooth at all, and using a touchpad seems to make it worse.
- sli 8y ago
  It seems like it's limited to one update every second. Perhaps it's a limitation of Idyll[1], which was used to make this. Although I'd guess these parts are done in D3. [1]: https://github.com/idyll-lang/idyll https://github.com/idyll-lang/idyll
- maccard 8y ago
  It was painful on a touch screen too.
kepikoi 8y ago
Good example for chromes autoplay policy breaking the web
- dawnerd 8y ago
  I figured chrome would show something saying it blocked yet nothing. That's really the annoying part for me.
  - zodPod 8y ago
    Yeah ultimately the feature itself, blocking autoplay, is fantastic. I got so sick of spam bullshit playing videos when I loaded sites. However, it definitely should warn!
matell 8y ago
not sure if I miss something, but I haven't figured out how to use the tuning knobs :( I tried mouseover, click, click+drag, in vertical and also in horizontal direction, but the tone didn't moved in any direction.
- chipuni 8y ago
  I agree that using the tuning knobs was not very intuitive. I guess that you're supposed to click on the knob, hold it down, and move up or down to tune -- but there was no feedback (except from the sound, which changed slowly.)
mike555 8y ago
This looks great. What technologies are you using for sound and for visualization?
- mathisonian 8y ago
  Thanks Mike. The sound is using tone.js [0] (with a slight modification to make the tuning work). The rest is built with - idyll (for the overall structure of the post) [1] - d3 with svg and canvas (for the tuner and visualizations) [2] - sketchapp and a plugin [3] to design the guitar [0] https://tonejs.github.io/ https://tonejs.github.io/ [1] https://idyll-lang.org/ https://idyll-lang.org/ [2] https://d3js.org/ https://d3js.org/ [3] https://github.com/mathisonian/sketch-interactive-export https://github.com/mathisonian/sketch-interactive-export
jakobegger 8y ago
Somehow this isn‘t working properly for me on my iPhone. It‘s not always clear what parts are touchable, and hitting the right spot is sometimes difficult (eg hitting strings is difficult with my fat fingers) I like the idea, but the UX on mobile is a bit frustrating.
scrumper 8y ago
This is fun and educational. Good work. I think you should take 5m to line up the tops of the strings and fix the string spacing in the zoomed-in headstock image. It looks sloppy at the moment.
kristiandupont 8y ago
Slightly off topic, I love how I am seeing tone.js pop up in projects everywhere. MIDI and VST's have created an extraordinary universe of musical devices but I think a wave of little web-based generators and effects will allow some truly novel approaches to music and audio arts.
wilsonnb 8y ago
This is really cool. If your main focus is to teach people how to tune a guitar, you should consider mentioning that you always want to tune a sharp guitar string to slightly below the correct pitch and then tune it up. Any slack present in the string winding can cause the string to go out of tune easily if you loosen the string to the correct tension. Tightening to the correct tension doesn't have that problem. If your guitar has locking tuners, this isn't necessary because there is no string winding and therefore no slack. For anyone who doesn't know, a locking tuner clamps down onto the string to hold it in place instead of having the string wound around it. This picture is of a locking set of tuners. The person is about to press down the locking mechanism for the low E string to hold it in place. Note that the other strings have no winding around the peg. http://www.prsguitars.com/csc/tuners/lock_4.jpg http://www.prsguitars.com/csc/tuners/lock_4.jpg Most guitars don't come with locking tuners but I would recommend that everyone use them because they make changing strings so much easier. Anyways, I really like your web page. Cool stuff.
- mathisonian 8y ago
  Thanks! That is a great tip about tuning a string slightly flat first.
- cpursley 8y ago
  I agree, and it's such a cheap upgrade that I'm surprised they're not standard on all guitars. For a really decent set of el-chepo locking tuners, I highly recommend these: https://www.guitarfetish.com/Gotoh-Style-Chrome-Locking-Tuners-Six-In-Line-True-Mechanical-Lock_p_392.html https://www.guitarfetish.com/Gotoh-Style-Chrome-Locking-Tune...
  - wilsonnb 8y ago
    I wish they would, it's the first thing I do to new guitars along with installing strap locks and a slightly thicker set of strings. I usually use the Fender branded ones because I'm usually putting them in Fender guitars. I've heard good things about Gotoh, Schaller, Planet Waves, Hipshot, and Grover. I'm pretty sure the Fenders are actually just rebrands of one of those manufacturers. edit: For anyone curious, it seems that Fender American Deluxe's used to come with them and the new American Elite series that replaced the Deluxe's still come with them. I guess they want to keep it as a differentiating feature for their most expensive "modern" guitars. None of their reissue vintage styled guitars come with them, I suppose for authenticity. You can even buy a $12,000 private stock PRS and it won't come with locking tuners. edit 2: I've now noticed that the tuners you link to are "Gotoh style" tuners and not actually made by Gotoh. I don't think I would use any tuners made by a name brand I'm not familiar with, locking or not, because they tend to be noticeably lower quality than the bigger brands. There are exceptions, of course.
korethr 8y ago
I suggest turning off the distortion by default for the 1st stage of tuning with the electric tuner. The distortion can mask being slightly (+/- 5 cents) out of tune, making it hard to hear even though the tuner says it's still wrong. Additionally, in all my years of playing, I have never fed a tuner with a distorted signal from the amplifier, but a clean one; the tuner pedal is the very first item in my effects chain before the amplifier. I suspect it is easier for a tuner to pick out a(n) (in)correctly tuned note from a clean tone, as there's simply less frequencies in the FFT to sort through. It may also make it easier for users to pick out the fundamental and it's natural harmonics in the FFT. Another suggestion is to model how the tone will go slightly sharp on the attack. How much depends on how much tension the strings are under, and thus all the things that effect that (tuned note, string tension & scale length).
- notadoc 8y ago
  > I suggest turning off the distortion by default for the 1st stage of tuning with the electric tuner. Agreed. Otherwise, great work!
- jamesb93 8y ago
  You should always tune to clean. If you have any sort of distortion (particularly digital) you start to introduce aliasing and will have the pitch detection algorithm locking on to frequencies that have wrapped around the nyquist.
jacquesm 8y ago
Very nice. In the spirit of constructive feedback: if you want to properly simulate a guitar that is out of tune because it has been stored for a long time (to better match your initial storyline) the high end should drop more than the low end.
- wyclif 8y ago
  This is good feedback—I thought the same thing. It would be a lot more realistic this way.
feedjoelpie 8y ago
Guitar pedant: Shouldn't the up/down on the tuning keys be opposite directions on opposite sides of the headstock?
- sp821543 8y ago
  Yes, although I think this application/audience warrants visual consistency over realism.
Konryan 8y ago
This needs some visual feedback when you try turning the knobs.
locrelite 8y ago
<Pedantry>Doesn't take into account neck deformation when string tension changes.</Pedantry>
elihu 8y ago
Nicely done. One correction: the sound(s) that arise from two different notes sounding together are sum and difference tones, not overtones. Each individual tone has a collection of overtones (i.e. the harmonic series), and those and the fundamentals can interact to produce an audible beat when they aren't in tune, which can be the sum or difference of two frequencies that are almost but not quite in sync with each other.
zengid 8y ago
This is really neat and well crafted! Constructive feedback: After you tune the guitar and hit the 'play a lick', the notes ring on too long. I'm not sure how you've configured your sound generators, but you'll need to configure an envelope on the sound that cuts it off before the next note rings. This would come down to simply adjusting the 'release' parameter to be very small (though not zero) so that the sound decays quickly before the next note begins. Also, after that, in the paragraph under "How does it work", the statement "Guitars generate noise through the vibration of their strings" is a little bothersome. While this is true, it would be more correct to say sound (or even pitches) instead of noise. The technical meaning of noise is a random distribution of frequencies across the sound spectrum, and actually sounds like the static you hear when you're radio is not tuned into a station. It's somewhat true because a guitar string will generate a quick burst of noise after being plucked, but after that the string settles into a resonating cycle that follows the harmonic series, which is definitely not noise. Third nitpick... oh man, I'll try to be brief, but I would just take out the section on beats and 'overtones'. As elihu mentioned, its actually 'difference tones'. Overtones are a part of a single sound. I would take the part out because it's actually bad practice to eliminate beats when tuning a guitar using open strings (in other words, tuning by perfect fourths) because the frets of a guitar are tuned to 12 Tone Equal temperament. If you eliminate the beats in a perfect fourth it will be a Justly tuned perfect fourth, which is 498 cents. An equally tempered perfect fourth is 500 cents even. The result would be the A string will be 2 cents flat, and then the D string will be 4 cents flat, and the G string 6 cents.. etc. If you want to keep the part about beats and tune by ear, its better to play the A on the E string and tune using a unison. Then you can use the beats trick! Disclosure: BA in Music with emphasis on Guitar and Sound Design. (See, BA's aren't completely useless!)
- zodPod 8y ago
  I kind of wish the "lick" would've been playable with the untuned guitar. It'd be fun to see the difference you make by tuning it.
Stenzel 8y ago
The distortion sounds like it is applied to individual strings, if it were applied after summing, it would not only resemble more a real electric guitar, but also sum- and difference frequencies of detuned strings would be audible much nicer as beating. Furthermore, the intervals E-A/A-D/D-G and B-E are not exactly perfect fourths, they should be equal tempered. Luckily the difference is almost negligible for the fourth, the perfect interval would be 4/3 = 1.3333 versus 2^(5/12) = 1.3348 for equal temperament. The interval G-B however is a major third, here the perfect interval is 5/4 = 1.25 while equal tempered is 2^(4/12) = 1.26 Those minor errors accumulate if one string is tuned based on the preceding one, the interval from lowest to highest strings can be calculated: (4/3)^4 * 5/4 = 3.95 for perfect intervals, 2^(4 * 5/12) * 2^(4/12) = 4 for equal temperament. The highest string should be exactly two octaves (= a factor of 4) above the lowest one, so the equal temperament should be preferred. A practical result is that tuning a guitar using only intervals of adjacent strings will never really converge to the ideal result, so tuning (fretted) octaves and flageolets should be used in addition.
- mathisonian 8y ago
  Thanks for this great feedback. I hadn't considered the difference between distortion in each of the strings vs applied overall, but that makes sense. [edit] as korethr described above, I chose to implement it this way because of the samples that I was working with
- korethr 8y ago
  The distortion sounds are being distorted on individual strings, as opposed to after summing. If you look at the credits, and follow the link to the sound sources, you can find the files used. If you listen, you'll be able to match them up. While I agree that the distortion should happen after summing, I suspect the playing and summing of individual already-distorted string sounds was done because that's what could be implemented simply and easily. Applying distortion after summing may well require more extensive coding, or stuff that's computationally intensive enough to slow down the browser (I don't know this for certain, I'm guessing). I'm not faulting the author for this, I probably would have done the same.
elihu 8y ago
When tuning by making the open strings beatless, it's useful to know that tuning an interval until the beats disappear isn't the same as tuning to the equal tempered standard. A just 4th (4:3 frequency ratio) is about 2 cents flat of an equal tempered 4th, and a just major third (5:4 frequency ratio) is about 14 cents flat of the equal tempered major third.
SwellJoe 8y ago
I've been a guitarist (off and on) for 30+ years, and I'm oddly fascinated by tuning methods and practices. The best educated guitarist I've ever known (he was an LA studio guy who moved back to my home town to raise his family and was teaching at the high school for fine arts I attended...literally everyone here has heard songs he played on, and probably a few musicians he's taught) used a technique I haven't seen very often, but it's been my favorite method. It's based on chords and the naturally occurring "beating" when intervals in chords are "right". Basically, you're switching back and forth between perfect fourths and fifths across all the strings and finding the best balance between them; when the beating is minimized, your guitar's first position is about as well-tuned as it can possibly be, given the limitations and oddities of intonation on a fretted equal-tempered instrument and the different sizes of strings. This is how I tune, unless I'm going to be playing way up the neck, in which case I tune with an alternate further up the neck to accommodate that position better. The interesting thing about this, and the thing that always confused people who see me tuning is that overdrive/distortion makes this method work better, not worse. It exacerbates the beating and makes it more clear when you're tuning it right. James Taylor devised a system that accommodated the way lower strings tend to rise in pitch when strummed aggressively; he'd tune a tiny bit flat on the low strings, getting close to on-the-nose as you went up the strings until the high E was exactly right. You would adjust this method slightly based on gauge of strings and whether the G string is wound or not. In this way strumming hard wouldn't end up sounding sharp on the bottom and out of tune across the instrument. This seems like a pain in the ass, to me, since you need a tuner and to memorize the settings across the neck to get it exactly right, so I have only done it as an experiment. I couldn't hear a positive difference compared to my usual method of tuning with chords (which already accommodates the sharpening of low strings because we're tuning to chord shapes). A common method I've seen maybe most often, especially among metal guitarists who tune down and bass players is the harmonics method (5th and 7th frets of strings next to each other). This has the benefit of bringing the tuning notes up into a higher register where our hearing is more accurate. Distortion doesn't hinder this method either, so rock guys can do it without changing their amp settings or whatever. But...and this is a big but. This isn't actually a great method for getting good tuning, because it will be the natural harmonics of the strings, which aren't exactly the same as the notes on an equal-tempered instrument. This was the method I used when I was a kid. The traditional fifth fret (and fourth fret) method, that is the first method most guitarists are taught, is still better than this one, because it accounts for equal temperament.
the_cat_kittles 8y ago
pretty good, nice execution, and im sure this is not targeted at people like me. but i figure i would add, just for those that are curious: there is more to tuning than just this. how hard you play the strings, where on the neck you play, the relative gauges, what the weathers going to do, the sound you like- all things that make it more complicated. there is also what your bandmates are doing. there are also mechanical factors that make for difficulty in getting the string to make the pitch you want, as other posters noted. i say all this to celebrate the wonderful endless complexity that "simple" things have when they exist in the real, corporeal world. its something i think can be forgotten by people who hang out on a computer mostly.
kuroguro 8y ago
Hmm... I get no sound on chrome for some reason. Works fine on FF. _edit_ See kmm's comment, chrome seems to be intentionally blocking it.
jacobn 8y ago
If you don't have perfect pitch and want to get a better understanding for what your guitar is doing, try using a spectrum analyzer app to visualize how the sound changes as you pluck a string. The el-cheapo guitar I bought once just didn't hold the note very accurately over time (i.e. pluck string, then it would vibrate at the correct-ish frequency for ~0.5s, then quickly veer off). Had to use a spectrum analyzer since the guitar was so out of tune that the electric tuner couldn't even pick up which string it was... (wasn't my idea to use the spectrum analyzer, back in college a friend of mine tuned his dorm piano - which are much harder to tune - using that technique, worked quite well)
- eric_h 8y ago
  > back in college a friend of mine tuned his dorm piano - which are much harder to tune - using that technique I feel as though "much harder" to tune understates the difference between tuning a piano and a guitar considerably :P It's ~40x as many strings!
  - Sylos 8y ago
    And you physically cannot get a piano tuned perfectly, since with different intervals, you'd need individual notes to be tuned slightly different. With a guitar, you can at least still try to correct it by putting your finger down somewhat closer or farther away.
    - TylerE 8y ago
      > With a guitar, you can at least still try to correct it by putting your finger down somewhat closer or farther away. Does not work like that. It isn't a violin. It is possible to pull notes sharp slightly (but it's done with pressure, not finger placement), but if the note is already sharp, there's nothing you can do.
      - delinka 8y ago
        Move one fret flat and pull very sharp? (no, this is not practical, but the inexperienced should give it a try...)
throw7 8y ago
very cool /aol add: i'm using seamonkey 2.49.2 and the zooming of the guitar in and out doesn't quite work once in awhile obscuring the text. don't take it as your fault, i'm actually impressed this worked at all.
meggar 8y ago
I usually just play this chord, and then adjust any notes that are off: E--0-- B--0-- G--9-- D--9-- A--7-- E--0--
snarfy 8y ago
I still have a tuning fork for tuning by ear. When I started playing, electric tuners were somewhat new and relatively expensive. At this point I've used the fork enough I almost don't need it.
khitchdee 8y ago
well. while using some dsp to get the frequencies right makes sense from an analytical point of view, from a more mood oriented standpoint which seems more aligned with the nature of music and its associations with mood it makes more sense to tune a guitar without any measurements using instruments other than your ears in other words tuning by ear while this is an inexact science and in theory, each tume you tune your guitar it will by definition be alightly out of tune the true test would be whether you like the sound or not given this as a goal, how you tune your guitar, would depend on what you were planning to play. you would probably tune your chord progressions
tomasien 8y ago
Chrome's new audio settings ruined this for me
squiggy22 8y ago
I wish more people knew how to tune their beat by ear.
gempir 8y ago
Thanks for asking before downloading 30mb on my mobile connection. Seems this site is well thought out
vectorEQ 8y ago
fun page. i tune my guitar differently, but same principle. i put ON distortion, and then pluck harmonics on different strings. if they are out of tune its really obvious due to the phasing, and you can adjust it untill it sounds like a clean note. same principe but much much easier / clearer to hear if it's exactly in tune with another string. also if you tune, always tighten last. if you release tension then it might shift a little and be in shitty tuning again. if you tighten the last then it;s less chance of this de tuning suddenly while playing. you can tune all strings using harmonics on the 5th/7th frets, where g/b set will need 4th / 5th fret or so. al the notes you need across the strings are around those frets anyway and it;s really easy to hear if you have the right ones.
cybervegan 8y ago
The "Play notes with a 5.00 Hz difference" section seems like a massive leap from the section before, without the same level of explanation that preceded it. I can't perceive/work out what they are talking about - I'm not sure what I'm listening for. Could be because of my freaky Asperger's brain wiring tho. I learning to play electric guitar, and have wanted to learn to tune by ear for ages. It's frustrating that I was able to follow along with ease up to this point, but now feel I've been pushed in at the deep end. It's just so close but not quite there.
jmull 8y ago
I get errors on Safari (latest public version as of a few days ago): First an alert: "It looks like Chrome audio autoplay is giving us troubles. Close this and tap the loading bar to continue loading audio." Then "undefined is not an object (evaluating 'new Tone.FFT')" where I'm guessing some kind of media is supposed to go.
punchclockhero 8y ago
Recently learned that many digital recorders have a tuner feature while looking for a cheap one for field recordings. Might be worth a shot.
squarefoot 8y ago
Knowing how to tune a guitar (bass, etc) is one of the first thing any player should learn, but next to it are recognizing that your guitar is out of tune and how to make sure you don't have to retune it every 5 minutes. The first comes with practice and musical training and the second requires a good knowledge on how to mount strings. A string fixed the wrong way will force the player to tune at every song or more often, so learning how to put strings in place is vital. There is a self-locking technique well explained in youtube videos; look for it because it will come very handy.
dirkk0 8y ago
Very cool indeed! Doesn't work in Chrome 66 anymore, due to blocked audio: https://www.dailydot.com/debug/chrome-autoplay-block-games/ https://www.dailydot.com/debug/chrome-autoplay-block-games/

338 points by mathisonian 8y ago

Hi HN - I'm one of the authors of this post and I lead an open source software project called Idyll that tries to make it easier to write interactive posts like this for the web. This is part of a research project I'm doing while completing a phd at the university of washington. If you like this one, check out other examples that have been made with the tool here: https://idyll-lang.org/gallery https://idyll-lang.org/gallery

pen2l 8y ago
I just logged in to say that I love you for creating both this specific application and for software you are creating to make things like this. I loved the explanation, I love the execution, and I love the spirit behind this. More power to you man.
pouta 8y ago
Thank you for the mobile data warning. I wish more websites did it.

dgurney 8y ago

super cool. Nice work

kmm 8y ago

Doesn't work on Chrome 66 due to recent policy changes with regard to autoplay https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio https://developers.google.com/web/updates/2017/09/autoplay-p... I checked it out in Firefox. Very neat :)

thefifthsetpin 8y ago
So crazy. I'd seen on HN that chrome was rolling out that feature, but it didn't seem like a big deal at the time. Chrome already blocks things like pop-ups and flash, but it tells me when it does so and offers me a way to load the pop-up / flash content if I want it. This time, chrome just feels broken.
mathisonian 8y ago
I've just pushed a fix for this in case of errors due to the new policy. Not a huge fix but I wish it didn't need to be done.
- telesilla 8y ago
  Doesn't work for me in Chrome Beta or Canary I'm afraid, unless I reload the page which is probably not intuitive for many users. What I've been doing is sending a pop-up to users on audio-critical pages (where audio is the entire point of the site) that says "hi, let's get started, you'll hear audio on this page so please adjust your headphones or speakers" and that seems to give the best result. It's also helpful on a page like yours where the sound is quite loud and I found it a bit loud for my headphones. You must also just provide a button that changes the sound volume which would have the same effect, of telling Chrome that the user has interacted with the page.
zodPod 8y ago
Oh man. Thank god they've added this. I've been using an extension to do this for a while now. I'm so glad they finally just implemented it!
delinka 8y ago
I can't even get this guitar tuning site to work by adding it to the whitelist...

JimiofEden 8y ago

Really cool. Audio didn't work for me on chrome though

mathisonian 8y ago
Sorry to hear about the audio issues! I tested on chrome and macOS, and didn't encounter anything like that. I'm curious what OS you're using, or maybe its just Google's new 'smart' autoplay policy.
- JimiofEden 8y ago
  Looks like Google Chrome 66, and on windows 7. I'd wager it's the new auto play being funky. Went to firefox instead and was able to go through it. Again, very cool. =)
- thefifthsetpin 8y ago
  It absolutely is that. I experienced the problem, captured options.context = new window.AudioContext(); from index.js at line 224, and then just bound a user-action (I went with document.body.addEventListener('click')) and used that to call options.context.resume(). After which point, it was cool. =)
- morganvachon 8y ago
  Not OP, but chiming in to say that on Waterfox on Windows 10, the initial guitar that is supposed to be out of tune is perfectly in tune (I'm a guitarist and it was obvious). I scrolled down to the tuning part anyway, and moving the knobs changed the frequency display but never changed the sound of the string being tuned.

mattnewport 8y ago

Reminded me of my high school physics project on tuning a guitar using beats on harmonics: https://en.m.wikipedia.org/wiki/Beat_(acoustics) https://en.m.wikipedia.org/wiki/Beat_(acoustics)

bmurphy1976 8y ago

Seems like a neat idea, but controlling the tuners with the mouse is really fussy and annoying. There seems to be some kind of delayed reaction and I frequently overshot the frequency I was targeting (a problem I don't have when tuning my actual guitars).

raverbashing 8y ago
Agreed, this was not smooth at all, and using a touchpad seems to make it worse.
sli 8y ago
It seems like it's limited to one update every second. Perhaps it's a limitation of Idyll[1], which was used to make this. Although I'd guess these parts are done in D3. [1]: https://github.com/idyll-lang/idyll https://github.com/idyll-lang/idyll
maccard 8y ago
It was painful on a touch screen too.

kepikoi 8y ago

Good example for chromes autoplay policy breaking the web

dawnerd 8y ago
I figured chrome would show something saying it blocked yet nothing. That's really the annoying part for me.
- zodPod 8y ago
  Yeah ultimately the feature itself, blocking autoplay, is fantastic. I got so sick of spam bullshit playing videos when I loaded sites. However, it definitely should warn!

matell 8y ago

not sure if I miss something, but I haven't figured out how to use the tuning knobs :( I tried mouseover, click, click+drag, in vertical and also in horizontal direction, but the tone didn't moved in any direction.

chipuni 8y ago
I agree that using the tuning knobs was not very intuitive. I guess that you're supposed to click on the knob, hold it down, and move up or down to tune -- but there was no feedback (except from the sound, which changed slowly.)

mike555 8y ago

This looks great. What technologies are you using for sound and for visualization?

mathisonian 8y ago
Thanks Mike. The sound is using tone.js [0] (with a slight modification to make the tuning work). The rest is built with - idyll (for the overall structure of the post) [1] - d3 with svg and canvas (for the tuner and visualizations) [2] - sketchapp and a plugin [3] to design the guitar [0] https://tonejs.github.io/ https://tonejs.github.io/ [1] https://idyll-lang.org/ https://idyll-lang.org/ [2] https://d3js.org/ https://d3js.org/ [3] https://github.com/mathisonian/sketch-interactive-export https://github.com/mathisonian/sketch-interactive-export

jakobegger 8y ago

Somehow this isn‘t working properly for me on my iPhone. It‘s not always clear what parts are touchable, and hitting the right spot is sometimes difficult (eg hitting strings is difficult with my fat fingers) I like the idea, but the UX on mobile is a bit frustrating.

scrumper 8y ago

This is fun and educational. Good work. I think you should take 5m to line up the tops of the strings and fix the string spacing in the zoomed-in headstock image. It looks sloppy at the moment.

kristiandupont 8y ago

Slightly off topic, I love how I am seeing tone.js pop up in projects everywhere. MIDI and VST's have created an extraordinary universe of musical devices but I think a wave of little web-based generators and effects will allow some truly novel approaches to music and audio arts.

wilsonnb 8y ago

This is really cool. If your main focus is to teach people how to tune a guitar, you should consider mentioning that you always want to tune a sharp guitar string to slightly below the correct pitch and then tune it up. Any slack present in the string winding can cause the string to go out of tune easily if you loosen the string to the correct tension. Tightening to the correct tension doesn't have that problem. If your guitar has locking tuners, this isn't necessary because there is no string winding and therefore no slack. For anyone who doesn't know, a locking tuner clamps down onto the string to hold it in place instead of having the string wound around it. This picture is of a locking set of tuners. The person is about to press down the locking mechanism for the low E string to hold it in place. Note that the other strings have no winding around the peg. http://www.prsguitars.com/csc/tuners/lock_4.jpg http://www.prsguitars.com/csc/tuners/lock_4.jpg Most guitars don't come with locking tuners but I would recommend that everyone use them because they make changing strings so much easier. Anyways, I really like your web page. Cool stuff.

mathisonian 8y ago
Thanks! That is a great tip about tuning a string slightly flat first.
cpursley 8y ago
I agree, and it's such a cheap upgrade that I'm surprised they're not standard on all guitars. For a really decent set of el-chepo locking tuners, I highly recommend these: https://www.guitarfetish.com/Gotoh-Style-Chrome-Locking-Tuners-Six-In-Line-True-Mechanical-Lock_p_392.html https://www.guitarfetish.com/Gotoh-Style-Chrome-Locking-Tune...
- wilsonnb 8y ago
  I wish they would, it's the first thing I do to new guitars along with installing strap locks and a slightly thicker set of strings. I usually use the Fender branded ones because I'm usually putting them in Fender guitars. I've heard good things about Gotoh, Schaller, Planet Waves, Hipshot, and Grover. I'm pretty sure the Fenders are actually just rebrands of one of those manufacturers. edit: For anyone curious, it seems that Fender American Deluxe's used to come with them and the new American Elite series that replaced the Deluxe's still come with them. I guess they want to keep it as a differentiating feature for their most expensive "modern" guitars. None of their reissue vintage styled guitars come with them, I suppose for authenticity. You can even buy a $12,000 private stock PRS and it won't come with locking tuners. edit 2: I've now noticed that the tuners you link to are "Gotoh style" tuners and not actually made by Gotoh. I don't think I would use any tuners made by a name brand I'm not familiar with, locking or not, because they tend to be noticeably lower quality than the bigger brands. There are exceptions, of course.

korethr 8y ago

I suggest turning off the distortion by default for the 1st stage of tuning with the electric tuner. The distortion can mask being slightly (+/- 5 cents) out of tune, making it hard to hear even though the tuner says it's still wrong. Additionally, in all my years of playing, I have never fed a tuner with a distorted signal from the amplifier, but a clean one; the tuner pedal is the very first item in my effects chain before the amplifier. I suspect it is easier for a tuner to pick out a(n) (in)correctly tuned note from a clean tone, as there's simply less frequencies in the FFT to sort through. It may also make it easier for users to pick out the fundamental and it's natural harmonics in the FFT. Another suggestion is to model how the tone will go slightly sharp on the attack. How much depends on how much tension the strings are under, and thus all the things that effect that (tuned note, string tension & scale length).

notadoc 8y ago
> I suggest turning off the distortion by default for the 1st stage of tuning with the electric tuner. Agreed. Otherwise, great work!
jamesb93 8y ago
You should always tune to clean. If you have any sort of distortion (particularly digital) you start to introduce aliasing and will have the pitch detection algorithm locking on to frequencies that have wrapped around the nyquist.

jacquesm 8y ago

Very nice. In the spirit of constructive feedback: if you want to properly simulate a guitar that is out of tune because it has been stored for a long time (to better match your initial storyline) the high end should drop more than the low end.

wyclif 8y ago
This is good feedback—I thought the same thing. It would be a lot more realistic this way.

feedjoelpie 8y ago

Guitar pedant: Shouldn't the up/down on the tuning keys be opposite directions on opposite sides of the headstock?

sp821543 8y ago
Yes, although I think this application/audience warrants visual consistency over realism.

Konryan 8y ago

This needs some visual feedback when you try turning the knobs.

locrelite 8y ago

<Pedantry>Doesn't take into account neck deformation when string tension changes.</Pedantry>

elihu 8y ago

Nicely done. One correction: the sound(s) that arise from two different notes sounding together are sum and difference tones, not overtones. Each individual tone has a collection of overtones (i.e. the harmonic series), and those and the fundamentals can interact to produce an audible beat when they aren't in tune, which can be the sum or difference of two frequencies that are almost but not quite in sync with each other.

zengid 8y ago

This is really neat and well crafted! Constructive feedback: After you tune the guitar and hit the 'play a lick', the notes ring on too long. I'm not sure how you've configured your sound generators, but you'll need to configure an envelope on the sound that cuts it off before the next note rings. This would come down to simply adjusting the 'release' parameter to be very small (though not zero) so that the sound decays quickly before the next note begins. Also, after that, in the paragraph under "How does it work", the statement "Guitars generate noise through the vibration of their strings" is a little bothersome. While this is true, it would be more correct to say sound (or even pitches) instead of noise. The technical meaning of noise is a random distribution of frequencies across the sound spectrum, and actually sounds like the static you hear when you're radio is not tuned into a station. It's somewhat true because a guitar string will generate a quick burst of noise after being plucked, but after that the string settles into a resonating cycle that follows the harmonic series, which is definitely not noise. Third nitpick... oh man, I'll try to be brief, but I would just take out the section on beats and 'overtones'. As elihu mentioned, its actually 'difference tones'. Overtones are a part of a single sound. I would take the part out because it's actually bad practice to eliminate beats when tuning a guitar using open strings (in other words, tuning by perfect fourths) because the frets of a guitar are tuned to 12 Tone Equal temperament. If you eliminate the beats in a perfect fourth it will be a Justly tuned perfect fourth, which is 498 cents. An equally tempered perfect fourth is 500 cents even. The result would be the A string will be 2 cents flat, and then the D string will be 4 cents flat, and the G string 6 cents.. etc. If you want to keep the part about beats and tune by ear, its better to play the A on the E string and tune using a unison. Then you can use the beats trick! Disclosure: BA in Music with emphasis on Guitar and Sound Design. (See, BA's aren't completely useless!)

zodPod 8y ago
I kind of wish the "lick" would've been playable with the untuned guitar. It'd be fun to see the difference you make by tuning it.

Stenzel 8y ago

The distortion sounds like it is applied to individual strings, if it were applied after summing, it would not only resemble more a real electric guitar, but also sum- and difference frequencies of detuned strings would be audible much nicer as beating. Furthermore, the intervals E-A/A-D/D-G and B-E are not exactly perfect fourths, they should be equal tempered. Luckily the difference is almost negligible for the fourth, the perfect interval would be 4/3 = 1.3333 versus 2^(5/12) = 1.3348 for equal temperament. The interval G-B however is a major third, here the perfect interval is 5/4 = 1.25 while equal tempered is 2^(4/12) = 1.26 Those minor errors accumulate if one string is tuned based on the preceding one, the interval from lowest to highest strings can be calculated: (4/3)^4 * 5/4 = 3.95 for perfect intervals, 2^(4 * 5/12) * 2^(4/12) = 4 for equal temperament. The highest string should be exactly two octaves (= a factor of 4) above the lowest one, so the equal temperament should be preferred. A practical result is that tuning a guitar using only intervals of adjacent strings will never really converge to the ideal result, so tuning (fretted) octaves and flageolets should be used in addition.

mathisonian 8y ago
Thanks for this great feedback. I hadn't considered the difference between distortion in each of the strings vs applied overall, but that makes sense. [edit] as korethr described above, I chose to implement it this way because of the samples that I was working with
korethr 8y ago
The distortion sounds are being distorted on individual strings, as opposed to after summing. If you look at the credits, and follow the link to the sound sources, you can find the files used. If you listen, you'll be able to match them up. While I agree that the distortion should happen after summing, I suspect the playing and summing of individual already-distorted string sounds was done because that's what could be implemented simply and easily. Applying distortion after summing may well require more extensive coding, or stuff that's computationally intensive enough to slow down the browser (I don't know this for certain, I'm guessing). I'm not faulting the author for this, I probably would have done the same.

elihu 8y ago

When tuning by making the open strings beatless, it's useful to know that tuning an interval until the beats disappear isn't the same as tuning to the equal tempered standard. A just 4th (4:3 frequency ratio) is about 2 cents flat of an equal tempered 4th, and a just major third (5:4 frequency ratio) is about 14 cents flat of the equal tempered major third.

SwellJoe 8y ago

I've been a guitarist (off and on) for 30+ years, and I'm oddly fascinated by tuning methods and practices. The best educated guitarist I've ever known (he was an LA studio guy who moved back to my home town to raise his family and was teaching at the high school for fine arts I attended...literally everyone here has heard songs he played on, and probably a few musicians he's taught) used a technique I haven't seen very often, but it's been my favorite method. It's based on chords and the naturally occurring "beating" when intervals in chords are "right". Basically, you're switching back and forth between perfect fourths and fifths across all the strings and finding the best balance between them; when the beating is minimized, your guitar's first position is about as well-tuned as it can possibly be, given the limitations and oddities of intonation on a fretted equal-tempered instrument and the different sizes of strings. This is how I tune, unless I'm going to be playing way up the neck, in which case I tune with an alternate further up the neck to accommodate that position better. The interesting thing about this, and the thing that always confused people who see me tuning is that overdrive/distortion makes this method work better, not worse. It exacerbates the beating and makes it more clear when you're tuning it right. James Taylor devised a system that accommodated the way lower strings tend to rise in pitch when strummed aggressively; he'd tune a tiny bit flat on the low strings, getting close to on-the-nose as you went up the strings until the high E was exactly right. You would adjust this method slightly based on gauge of strings and whether the G string is wound or not. In this way strumming hard wouldn't end up sounding sharp on the bottom and out of tune across the instrument. This seems like a pain in the ass, to me, since you need a tuner and to memorize the settings across the neck to get it exactly right, so I have only done it as an experiment. I couldn't hear a positive difference compared to my usual method of tuning with chords (which already accommodates the sharpening of low strings because we're tuning to chord shapes). A common method I've seen maybe most often, especially among metal guitarists who tune down and bass players is the harmonics method (5th and 7th frets of strings next to each other). This has the benefit of bringing the tuning notes up into a higher register where our hearing is more accurate. Distortion doesn't hinder this method either, so rock guys can do it without changing their amp settings or whatever. But...and this is a big but. This isn't actually a great method for getting good tuning, because it will be the natural harmonics of the strings, which aren't exactly the same as the notes on an equal-tempered instrument. This was the method I used when I was a kid. The traditional fifth fret (and fourth fret) method, that is the first method most guitarists are taught, is still better than this one, because it accounts for equal temperament.

the_cat_kittles 8y ago

pretty good, nice execution, and im sure this is not targeted at people like me. but i figure i would add, just for those that are curious: there is more to tuning than just this. how hard you play the strings, where on the neck you play, the relative gauges, what the weathers going to do, the sound you like- all things that make it more complicated. there is also what your bandmates are doing. there are also mechanical factors that make for difficulty in getting the string to make the pitch you want, as other posters noted. i say all this to celebrate the wonderful endless complexity that "simple" things have when they exist in the real, corporeal world. its something i think can be forgotten by people who hang out on a computer mostly.

kuroguro 8y ago

Hmm... I get no sound on chrome for some reason. Works fine on FF. _edit_ See kmm's comment, chrome seems to be intentionally blocking it.

jacobn 8y ago

If you don't have perfect pitch and want to get a better understanding for what your guitar is doing, try using a spectrum analyzer app to visualize how the sound changes as you pluck a string. The el-cheapo guitar I bought once just didn't hold the note very accurately over time (i.e. pluck string, then it would vibrate at the correct-ish frequency for ~0.5s, then quickly veer off). Had to use a spectrum analyzer since the guitar was so out of tune that the electric tuner couldn't even pick up which string it was... (wasn't my idea to use the spectrum analyzer, back in college a friend of mine tuned his dorm piano - which are much harder to tune - using that technique, worked quite well)

eric_h 8y ago
> back in college a friend of mine tuned his dorm piano - which are much harder to tune - using that technique I feel as though "much harder" to tune understates the difference between tuning a piano and a guitar considerably :P It's ~40x as many strings!
- Sylos 8y ago
  And you physically cannot get a piano tuned perfectly, since with different intervals, you'd need individual notes to be tuned slightly different. With a guitar, you can at least still try to correct it by putting your finger down somewhat closer or farther away.
  - TylerE 8y ago
    > With a guitar, you can at least still try to correct it by putting your finger down somewhat closer or farther away. Does not work like that. It isn't a violin. It is possible to pull notes sharp slightly (but it's done with pressure, not finger placement), but if the note is already sharp, there's nothing you can do.
    - delinka 8y ago
      Move one fret flat and pull very sharp? (no, this is not practical, but the inexperienced should give it a try...)

throw7 8y ago

very cool /aol add: i'm using seamonkey 2.49.2 and the zooming of the guitar in and out doesn't quite work once in awhile obscuring the text. don't take it as your fault, i'm actually impressed this worked at all.

meggar 8y ago

I usually just play this chord, and then adjust any notes that are off: E--0-- B--0-- G--9-- D--9-- A--7-- E--0--

snarfy 8y ago

I still have a tuning fork for tuning by ear. When I started playing, electric tuners were somewhat new and relatively expensive. At this point I've used the fork enough I almost don't need it.

khitchdee 8y ago

well. while using some dsp to get the frequencies right makes sense from an analytical point of view, from a more mood oriented standpoint which seems more aligned with the nature of music and its associations with mood it makes more sense to tune a guitar without any measurements using instruments other than your ears in other words tuning by ear while this is an inexact science and in theory, each tume you tune your guitar it will by definition be alightly out of tune the true test would be whether you like the sound or not given this as a goal, how you tune your guitar, would depend on what you were planning to play. you would probably tune your chord progressions

tomasien 8y ago

Chrome's new audio settings ruined this for me

squiggy22 8y ago

I wish more people knew how to tune their beat by ear.

gempir 8y ago

Thanks for asking before downloading 30mb on my mobile connection. Seems this site is well thought out

vectorEQ 8y ago

fun page. i tune my guitar differently, but same principle. i put ON distortion, and then pluck harmonics on different strings. if they are out of tune its really obvious due to the phasing, and you can adjust it untill it sounds like a clean note. same principe but much much easier / clearer to hear if it's exactly in tune with another string. also if you tune, always tighten last. if you release tension then it might shift a little and be in shitty tuning again. if you tighten the last then it;s less chance of this de tuning suddenly while playing. you can tune all strings using harmonics on the 5th/7th frets, where g/b set will need 4th / 5th fret or so. al the notes you need across the strings are around those frets anyway and it;s really easy to hear if you have the right ones.

cybervegan 8y ago

The "Play notes with a 5.00 Hz difference" section seems like a massive leap from the section before, without the same level of explanation that preceded it. I can't perceive/work out what they are talking about - I'm not sure what I'm listening for. Could be because of my freaky Asperger's brain wiring tho. I learning to play electric guitar, and have wanted to learn to tune by ear for ages. It's frustrating that I was able to follow along with ease up to this point, but now feel I've been pushed in at the deep end. It's just so close but not quite there.

jmull 8y ago

I get errors on Safari (latest public version as of a few days ago): First an alert: "It looks like Chrome audio autoplay is giving us troubles. Close this and tap the loading bar to continue loading audio." Then "undefined is not an object (evaluating 'new Tone.FFT')" where I'm guessing some kind of media is supposed to go.

punchclockhero 8y ago

Recently learned that many digital recorders have a tuner feature while looking for a cheap one for field recordings. Might be worth a shot.

squarefoot 8y ago

Knowing how to tune a guitar (bass, etc) is one of the first thing any player should learn, but next to it are recognizing that your guitar is out of tune and how to make sure you don't have to retune it every 5 minutes. The first comes with practice and musical training and the second requires a good knowledge on how to mount strings. A string fixed the wrong way will force the player to tune at every song or more often, so learning how to put strings in place is vital. There is a self-locking technique well explained in youtube videos; look for it because it will come very handy.

dirkk0 8y ago

Very cool indeed! Doesn't work in Chrome 66 anymore, due to blocked audio: https://www.dailydot.com/debug/chrome-autoplay-block-games/ https://www.dailydot.com/debug/chrome-autoplay-block-games/