Contrabass Tuner

Привет, я Егор, я играю на бас-гитаре и учусь играть на контрабасе. Сделал этот тюнер, чтобы заниматься интонированием — на безладовом инструменте нет ориентиров, и нужно учиться попадать в ноты на слух. Обычные тюнеры показывают только текущее отклонение, а мне хотелось видеть историю — как стабильно я держу ноту и что происходит при переходах. Потом увлёкся и решил сделать тюнер своей мечты.

Возможности

  • Lane — график высоты тона в реальном времени. Зелёный коридор = «попал», линия показывает стабильность интонации за последние секунды
  • LED-шкала — мгновенный индикатор отклонения, как на аппаратном тюнере
  • Детекция атаки — бланкинг шумного транзиента при щипке (pizzicato), чтобы тюнер не дёргался
  • Octave lock — фиксирует октаву между щипками, борется с прыжками G1↔G2 из-за сильных гармоник контрабаса
  • Lowpass-фильтр — ослабляет верхние гармоники до анализа, помогая детектору найти фундаментал
  • Spectral flatness — отличает музыкальную ноту от шума по форме спектра
  • Адаптивный RMS gate — отсекает тихий фоновый шум, но дослушивает затухающий хвост ноты

Как устроен — путь сигнала

Микрофон
  │
  ▼
Lowpass Filter ─────────── lowpassFreq: 350 Гц
  │                        Ослабляет верхние гармоники
  ▼
AnalyserNode ──────────── bufferSize: 4096 (~93 мс)
  │
  ├─ волна (inputBuffer)
  │    │
  │    ▼
  │  [1] Attack Detection ─ attackRmsRatio: 3.0
  │    │                     attackBlankMs: 120
  │    │                     + сброс octave lock
  │    ▼
  │  [2] RMS Gate ────────── rmsGateHigh / rmsGateLow
  │    │                     rmsGateRelease: 0.9985
  │    ▼
  ├─ спектр (freqBuffer)
  │    │
  │    ▼
  │  [3] Spectral Gate ──── spectralThreshold: 0.25
  │    │                     0=тон, 1=шум
  │    ▼
  │  [4] Pitch Detection ── clarityThreshold: 0.92
  │    │  (pitchy MPM)       minFrequency / maxFrequency
  │    ▼
  │  [5] Median Filter ──── medianWindow: 7
  │    │  (на Гц)
  │    ▼
  │  [6] Octave Lock ────── octaveLockEnabled
  │    │  snap ×2/×0.5
  │    ▼
  │  [7] Freq → Note+Cents
  │    │
  │    ▼
  │  [8] Note Change Detection
  │    │
  │    ▼
  │  [9] EMA Filter ─────── smoothingAlpha: 0.15
  │    │  (на центах)
  │    ▼
  ├────┼────────────┐
  ▼    ▼            ▼
Нота  LED-шкала   Lane (canvas)
±¢    21 сегм.    trail + коридор
▸ ◂   + метка     greenZoneCents: 13
                  trailDurationSec: 3

Pitch detection: pitchy (McLeod Pitch Method) · Web Audio API · Canvas 2D

Почему HTML?

Мне нужно было что-то быстрое и кроссплатформенное. Главное — чтобы тюнер открывался на ноутбуке во весь экран и был виден издалека, пока я стою у контрабаса. Веб-страница — самое простое решение: один файл, открыл в браузере — и работает.

Заметки

  • Тестировалось на MacBook со встроенным микрофоном
  • Делался в первую очередь для контрабаса — пороги и фильтры подобраны под его тембр и низкие частоты. На бас-гитаре проверял, работает хорошо. Возможно, подойдёт и для гитары
  • Параметры по умолчанию подобраны под мои условия. Основные настройки вынесены ползунками, тонкие — в инженерном меню. Подкрутите под себя
  • Все библиотеки (pitchy, fft.js) встроены в файл — работает полностью офлайн

Частный разработчик: Egor Andreev.
Написано совместно с Claude Code. С использованием моей любви к музыке и образования инженера связи 🎸

Конфиденциальность: звук с микрофона обрабатывается только на устройстве, не записывается и никуда не отправляется. Приложение хранит только настройки тюнера на этом устройстве.

Если хотите что-то сказать про тюнер — буду рад:
Telegram: @egorandreev
Канал про музыку и айтишку: @grooveops

Hi, I'm Egor. I play bass guitar and I'm learning contrabass. I built this tuner to practice intonation — on a fretless instrument there are no landmarks, so you have to learn to hit the notes by ear. Regular tuners only show the current deviation, but I wanted to see the history — how steadily I hold a note and what happens during transitions. Then I got carried away and decided to build the tuner of my dreams.

Features

  • Lane — real-time pitch graph. Green corridor = "in tune", the line shows intonation stability over the last few seconds
  • LED bar — instant deviation indicator, like a hardware tuner
  • Attack detection — blanks the noisy transient on pluck (pizzicato) so the tuner doesn't jump
  • Octave lock — locks the octave between plucks, fights G1↔G2 jumps caused by strong contrabass harmonics
  • Lowpass filter — weakens upper harmonics before analysis, helping the detector find the fundamental
  • Spectral flatness — distinguishes a musical note from noise by spectrum shape
  • Adaptive RMS gate — cuts quiet background noise but follows the decaying tail of a note

How it works — signal path

Microphone
  │
  ▼
Lowpass Filter ─────────── lowpassFreq: 350 Hz
  │                        Weakens upper harmonics
  ▼
AnalyserNode ──────────── bufferSize: 4096 (~93 ms)
  │
  ├─ waveform (inputBuffer)
  │    │
  │    ▼
  │  [1] Attack Detection ─ attackRmsRatio: 3.0
  │    │                     attackBlankMs: 120
  │    │                     + octave lock reset
  │    ▼
  │  [2] RMS Gate ────────── rmsGateHigh / rmsGateLow
  │    │                     rmsGateRelease: 0.9985
  │    ▼
  ├─ spectrum (freqBuffer)
  │    │
  │    ▼
  │  [3] Spectral Gate ──── spectralThreshold: 0.25
  │    │                     0=tone, 1=noise
  │    ▼
  │  [4] Pitch Detection ── clarityThreshold: 0.92
  │    │  (pitchy MPM)       minFrequency / maxFrequency
  │    ▼
  │  [5] Median Filter ──── medianWindow: 7
  │    │  (on Hz)
  │    ▼
  │  [6] Octave Lock ────── octaveLockEnabled
  │    │  snap ×2/×0.5
  │    ▼
  │  [7] Freq → Note+Cents
  │    │
  │    ▼
  │  [8] Note Change Detection
  │    │
  │    ▼
  │  [9] EMA Filter ─────── smoothingAlpha: 0.15
  │    │  (on cents)
  │    ▼
  ├────┼────────────┐
  ▼    ▼            ▼
Note  LED bar     Lane (canvas)
±¢    21 seg.     trail + corridor
▸ ◂   + mark      greenZoneCents: 13
                  trailDurationSec: 3

Pitch detection: pitchy (McLeod Pitch Method) · Web Audio API · Canvas 2D

Why HTML?

I needed something fast and cross-platform. The main requirement was a fullscreen tuner on a laptop, visible from a distance while standing at the contrabass. A web page was the simplest solution: one file, open in browser, done.

Notes

  • Tested on a MacBook with the built-in microphone
  • Built primarily for contrabass — thresholds and filters are tuned for its timbre and low frequencies. Tested on bass guitar too, works well. Might work for guitar as well
  • Default parameters are tuned for my conditions. Main settings are exposed as sliders, fine-tuning is in the engineering panel. Adjust to your setup
  • All libraries (pitchy, fft.js) are embedded in the file — works fully offline

Independent developer: Egor Andreev.
Built with Claude Code. Powered by my love for music and a telecom engineering degree 🎸

Privacy: microphone audio is processed only on your device. It is never recorded or transmitted. The app stores only tuner settings on this device.

Got feedback on the tuner? I'd love to hear it:
Telegram: @egorandreev
Music & tech channel: @grooveops

Settings

highlow
responsivestable
±3¢ strict±25¢ soft
sensitiverough
softstrict

▸ Инженерные параметры

clarityThreshold
smoothingAlpha
medianWindow
greenZoneCents
trailDurationSec
bufferSize
minFrequency
maxFrequency
attackBlankMs
attackRmsRatio
rmsGateHigh
rmsGateLow
rmsGateRelease
spectralThreshold
lowpassFreq