alterfo.github.io/piano.html at master · alterfo/alterfo.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="ru-RU" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Piano Teacher — Alterfo</title>
    <meta name="description" content="Интерактивный нотный MIDI-тренажёр фортепиано: живые ноты на экране, Web MIDI, аккорды — трезвучия и двузвучия, метроном, импорт MusicXML/ABC/MIDI. Играть в браузере, прогресс — локально.">
    <meta name="generator" content="VitePress v1.6.4">
    <link rel="preload stylesheet" href="/assets/style.B6gOR0p4.css" as="style">
    <link rel="preload stylesheet" href="/vp-icons.css" as="style">

    <script type="module" src="/assets/app.CdKc5e7x.js"></script>
    <link rel="modulepreload" href="/assets/chunks/runtime-core.esm-bundler.BcSW7cUG.js">
    <link rel="modulepreload" href="/assets/chunks/plugin-vue_export-helper.DlAUqK2U.js">
    <link rel="modulepreload" href="/assets/chunks/Piano.Nl9YvOtp.js">
    <link rel="modulepreload" href="/assets/piano.md.B0TgsGxC.lean.js">
    <link rel="prefetch" href="/assets/chunks/WebGPUParticles.m1YLcOGm.js">
    <link rel="prefetch" href="/assets/chunks/IDEF0Editor.BzEYdgXi.js">
    <link rel="prefetch" href="/assets/chunks/Journal.Cfm3-o9z.js">
    <link rel="prefetch" href="/assets/chunks/OpenPoseEditor.CWV8Bkr8.js">
    <link rel="prefetch" href="/assets/chunks/PlannerEditor.D7RmlG_q.js">
    <link rel="prefetch" href="/assets/chunks/DecisionJournal.BaIzYx7N.js">
    <link rel="prefetch" href="/assets/chunks/FinanceApp.GXL2FTZh.js">
    <link rel="prefetch" href="/assets/chunks/CasualGames.Cidb2yYM.js">
    <link rel="icon" type="image/svg+xml" href="/home-wheel.svg">
    <link rel="icon" type="image/png" sizes="48x48" href="/favicon.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <meta name="theme-color" content="#14161a">
    <meta name="google-site-verification" content="2_Fb2XwDwWWj4hDQX-P5joNEDLaeIVO2X1DFzRNnRlk">
    <script id="check-dark-mode">document.documentElement.classList.add("dark");</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
    <link rel="canonical" href="https://alterfo.github.io/piano">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Piano Teacher">
    <meta property="og:description" content="Интерактивный нотный MIDI-тренажёр фортепиано: живые ноты на экране, Web MIDI, аккорды — трезвучия и двузвучия, метроном, импорт MusicXML/ABC/MIDI. Играть в браузере, прогресс — локально.">
    <meta property="og:url" content="https://alterfo.github.io/piano">
    <meta property="og:image" content="https://alterfo.github.io/og.png">
    <meta property="og:site_name" content="Alterfo">
    <meta property="og:locale" content="ru_RU">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Piano Teacher">
    <meta name="twitter:description" content="Интерактивный нотный MIDI-тренажёр фортепиано: живые ноты на экране, Web MIDI, аккорды — трезвучия и двузвучия, метроном, импорт MusicXML/ABC/MIDI. Играть в браузере, прогресс — локально.">
    <meta name="twitter:image" content="https://alterfo.github.io/og.png">
    <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"Piano Teacher","description":"Интерактивный нотный MIDI-тренажёр фортепиано: живые ноты на экране, Web MIDI, аккорды — трезвучия и двузвучия, метроном, импорт MusicXML/ABC/MIDI. Играть в браузере, прогресс — локально.","url":"https://alterfo.github.io/piano","applicationCategory":"MultimediaApplication","operatingSystem":"Web","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"author":{"@type":"Person","name":"Oleg Sidorkin","alternateName":"alterfo","url":"https://alterfo.github.io","jobTitle":"Software Engineer","knowsAbout":["Music","Audio DSP","AI","RAG","Frontend Development","Solution Architecture"],"sameAs":["https://github.com/alterfo"]}}</script>
  </head>
  <body>
    <div id="app"><div style="position:relative;" data-v-d8b57b2d><div data-v-71d2fcf1><div class="app-shell" data-v-71d2fcf1 data-v-cf58518a><div class="app-bar" style="border-bottom-color:#4a61784d;" data-v-cf58518a><a href="/" class="home-mark" title="Круг жизни — на главную" aria-label="На главную" style="--home-rot:36deg;" data-v-cf58518a data-v-07667ef2><svg viewBox="0 0 32 32" width="22" height="22" aria-hidden="true" data-v-07667ef2><!--[--><path class="seg" d="M16.174497483512507,11.003045864904522 L16.488592953835017,2.0085284217326596 A14,14,0,0,1,23.828700648590456,4.393473984229416 L18.795964517353735,11.85481213722479 A5,5,0,0,0,16.174497483512507,11.003045864904522 Z" fill="#8a5568" style="color:#8a5568;" data-v-07667ef2></path><path class="seg" d="M19.078307376628292,12.05994623196639 L24.003599179233557,5.755860203112613 A13,13,0,0,1,28.216004070216812,11.553738136766306 L20.69846310392954,14.289899283371657 A5,5,0,0,0,19.078307376628292,12.05994623196639 Z" fill="#3f5946" style="color:#3f5946;" data-v-07667ef2></path><path class="seg" d="M20.806308479691594,14.621813220915005 L25.61261695938319,13.243626441830008 A10,10,0,0,1,25.61261695938319,18.75637355816999 L20.806308479691594,17.378186779084995 A5,5,0,0,0,20.806308479691594,14.621813220915005 Z" fill="#7a3348" style="color:#7a3348;" data-v-07667ef2></path><path class="active seg" d="M20.69846310392954,17.710100716628343 L24.457233587073176,19.078181289931017 A9,9,0,0,1,21.540953277930925,23.092096782460498 L19.078307376628292,19.94005376803361 A5,5,0,0,0,20.69846310392954,17.710100716628343 Z" fill="#4a6178" style="color:#4a6178;" data-v-07667ef2></path><path class="seg" d="M18.795964517353735,20.14518786277521 L21.03273613123672,23.461338152995374 A9,9,0,0,1,16.31409547032251,24.994517443171862 L16.174497483512507,20.99695413509548 A5,5,0,0,0,18.795964517353735,20.14518786277521 Z" fill="#a8874a" style="color:#a8874a;" data-v-07667ef2></path><path class="seg" d="M15.825502516487497,20.99695413509548 L15.685904529677494,24.994517443171862 A9,9,0,0,1,10.967263868763279,23.461338152995374 L13.204035482646267,20.14518786277521 A5,5,0,0,0,15.825502516487497,20.99695413509548 Z" fill="#6b5a48" style="color:#6b5a48;" data-v-07667ef2></path><path class="seg" d="M12.921692623371708,19.94005376803361 L10.459046722069075,23.092096782460498 A9,9,0,0,1,7.5427664129268255,19.07818128993102 L11.30153689607046,17.710100716628343 A5,5,0,0,0,12.921692623371708,19.94005376803361 Z" fill="#2d5654" style="color:#2d5654;" data-v-07667ef2></path><path class="seg" d="M11.193691520308406,17.378186779085 L8.30990643249345,18.205098846535996 A8,8,0,0,1,8.309906432493449,13.794901153464007 L11.193691520308406,14.621813220915005 A5,5,0,0,0,11.193691520308406,17.378186779085 Z" fill="#9098a8" style="color:#9098a8;" data-v-07667ef2></path><path class="seg" d="M11.301536896070457,14.289899283371657 L9.422151654498641,13.605858996720318 A7,7,0,0,1,11.690369672720394,10.483924724752946 L12.92169262337171,12.05994623196639 A5,5,0,0,0,11.301536896070457,14.289899283371657 Z" fill="#4a3868" style="color:#4a3868;" data-v-07667ef2></path><path class="seg" d="M13.204035482646264,11.854812137224794 L12.085649675704769,10.19673699211471 A7,7,0,0,1,15.755703523082488,9.004264210866332 L15.825502516487491,11.003045864904522 A5,5,0,0,0,13.204035482646264,11.854812137224794 Z" fill="#3b7a85" style="color:#3b7a85;" data-v-07667ef2></path><!--]--></svg></a><h1 class="app-title" style="color:#4a6178;" data-v-cf58518a>Piano Teacher</h1></div><div class="app-body" data-v-cf58518a><!----></div></div><div class="piano-seo" data-v-71d2fcf1><h2 id="нотныи-тренажер-фортепиано-с-живым-midi-вводом" tabindex="-1" data-v-71d2fcf1>Нотный тренажёр фортепиано с живым MIDI-вводом <a class="header-anchor" href="#нотныи-тренажер-фортепиано-с-живым-midi-вводом" aria-label="Permalink to &quot;Нотный тренажёр фортепиано с живым MIDI-вводом&quot;" data-v-71d2fcf1></a></h2><p data-v-71d2fcf1><strong data-v-71d2fcf1>Piano Teacher</strong> — интерактивный MIDI-тренажёр для игры на фортепиано прямо в браузере (interactive MIDI piano trainer). Подключите MIDI-клавиатуру или контроллер по USB — тренажёр через Web MIDI API распознаёт каждую нажатую клавишу, показывает ноты на экране и ведёт вас по произведению нота за нотой или такт за тактом.</p><h3 id="возможности" tabindex="-1" data-v-71d2fcf1>Возможности <a class="header-anchor" href="#возможности" aria-label="Permalink to &quot;Возможности&quot;" data-v-71d2fcf1></a></h3><ul data-v-71d2fcf1><li data-v-71d2fcf1><strong data-v-71d2fcf1>Живой ввод с MIDI-клавиатуры</strong> — Web MIDI API, работает без установки драйверов</li><li data-v-71d2fcf1><strong data-v-71d2fcf1>Ноты на экране</strong> — нотный стан рендерится через VexFlow/OpenSheetMusicDisplay, подсвечивает текущую и следующую ноту</li><li data-v-71d2fcf1><strong data-v-71d2fcf1>Аккорды: трезвучия и двузвучия</strong> — тренажёр распознаёт двух- и трёхзвучные аккорды, подсвечивает все клавиши аккорда зелёным</li><li data-v-71d2fcf1><strong data-v-71d2fcf1>Встроенные произведения</strong> — гамма До мажор, «Twinkle Twinkle», Менуэт соль мажор (Петцольд/Бах), «Ода к радости» (Бетховен), Прелюдия Рахманинова, «Лунный свет» Дебюсси</li><li data-v-71d2fcf1><strong data-v-71d2fcf1>Импорт своих нот</strong> — MusicXML, MIDI-файлы и ABC-нотация</li><li data-v-71d2fcf1><strong data-v-71d2fcf1>Метроном и регулировка темпа</strong> — 50% / 75% / 100% от исходного</li><li data-v-71d2fcf1><strong data-v-71d2fcf1>HD-звук</strong> — сэмплы Salamander Grand Piano</li><li data-v-71d2fcf1><strong data-v-71d2fcf1>Прогресс сохраняется локально</strong> — в IndexedDB браузера, без регистрации и без облака</li></ul><h3 id="частые-вопросы" tabindex="-1" data-v-71d2fcf1>Частые вопросы <a class="header-anchor" href="#частые-вопросы" aria-label="Permalink to &quot;Частые вопросы&quot;" data-v-71d2fcf1></a></h3><p data-v-71d2fcf1><strong data-v-71d2fcf1>Нужна ли MIDI-клавиатура?</strong> Да, любая MIDI-клавиатура или контроллер с USB/MIDI-выходом. Браузер должен поддерживать Web MIDI API — работает в Chrome и Edge, в Firefox через флаг <code data-v-71d2fcf1>dom.webmidi.enabled</code>, в Safari не поддерживается.</p><p data-v-71d2fcf1><strong data-v-71d2fcf1>Это бесплатно?</strong> Да, тренажёр открывается прямо в браузере, без регистрации и оплаты.</p><p data-v-71d2fcf1><strong data-v-71d2fcf1>Куда сохраняется прогресс?</strong> Локально, в IndexedDB браузера — данные не отправляются на сервер.</p><p data-v-71d2fcf1><strong data-v-71d2fcf1>Можно ли тренировать аккорды, а не только отдельные ноты?</strong> Да — тренажёр умеет и одиночные ноты, и двузвучия/трезвучия: подсказка на клавиатуре и подсветка на нотном стане показывают все ноты аккорда одновременно.</p></div></div></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"agents.md\":\"CqXltKMd\",\"blog.md\":\"BV7H2Jqu\",\"casual-games.md\":\"CzikMxFx\",\"decision-journal.md\":\"CC6uleyw\",\"finance.md\":\"DFXiOO_0\",\"idef0.md\":\"ovd1WdVJ\",\"index.md\":\"D5ONd-4T\",\"journal.md\":\"DD4wOCMf\",\"music.md\":\"DMkj9Gbn\",\"openpose.md\":\"COL_jlQx\",\"piano.md\":\"B0TgsGxC\",\"planner.md\":\"BMgJzwFl\",\"posts_2020-09-03-why-the-blog-appears.md\":\"DG_AVTxC\",\"posts_2020-09-04-canvas-circle-of-life.md\":\"nzpY3VXS\",\"posts_2020-09-05-reflection.md\":\"BI1m5ieN\",\"posts_2020-09-07-values-prioritization.md\":\"rnWhwQ3E\",\"posts_2020-09-08-organization-values.md\":\"Cc-sFsIz\",\"posts_2020-09-10-vuepress-migration.md\":\"c_TeKmIu\",\"posts_2020-09-11-adaptive-fonts.md\":\"D5oncG_z\",\"posts_2020-09-13-resistance.md\":\"CzXJRtdg\",\"posts_2020-09-15-spinal-hernia.md\":\"Bp1iP0GD\",\"posts_2020-09-17-conflict-management.md\":\"q_u8uVIX\",\"posts_2020-09-18-archetypes.md\":\"DoJsFttv\",\"posts_2020-09-19-working-from-home.md\":\"ChkMgDem\",\"posts_2020-09-21-empathy.md\":\"CPokdvOH\",\"posts_2020-09-24-bulling.md\":\"Dv1VYhhJ\",\"posts_2020-09-24-graphql-resolvers.md\":\"stdiB8cU\",\"posts_2020-09-25-critical-rendering-path.md\":\"Bx6DSWUA\",\"posts_2020-09-26-stress-tolerance.md\":\"DGQ_jiAw\",\"posts_2020-10-05-sdlc.md\":\"CnhslfcW\",\"posts_2020-10-11-hyperresponsibility.md\":\"Cg2X3Vaj\",\"posts_2020-10-12-principles.md\":\"zUGu-njq\",\"posts_2020-10-21-eastern-martial-arts.md\":\"DuJl1IeF\",\"posts_2021-05-08-paupiauau.md\":\"HIaKnwP3\",\"posts_2021-06-30-crisises.md\":\"Cl0s36nX\",\"posts_2021-10-29-frustration.md\":\"BUWoW4e6\",\"posts_2021-11-24-poject-from-scratch.md\":\"t6Mej97U\",\"posts_2022-03-06-negotiations.md\":\"Byc6S_xV\",\"posts_2022-06-14-impact.md\":\"CypnCgKh\",\"posts_2022-10-16-frustration.md\":\"BunPsZEq\",\"posts_2022-10-16-timemanagement.md\":\"DRvL-fWo\",\"posts_2022-11-03-my-next-project.md\":\"CjSoSZVJ\",\"posts_2022-12-24-stack-2-maintainability-reliability.md\":\"D-2PYz_O\",\"posts_2023-01-11-stack-3-overengineering.md\":\"C8dcm4MI\",\"posts_2024-10-02-vpn.md\":\"COS94bKs\",\"posts_2025-03-22-relationships.md\":\"C5sT4UKE\",\"posts_2025-12-12-rational-planning.md\":\"C2zjFDQZ\",\"posts_2026-06-11-instrumenty-v-brauzere-bez-oblaka.md\":\"Ctkwaqou\",\"projects_ar-engine.md\":\"-zmnGXu3\",\"projects_idef0-editor.md\":\"BYvDp4MS\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"ru-RU\",\"dir\":\"ltr\",\"title\":\"Alterfo\",\"titleTemplate\":\":title — Alterfo\",\"description\":\"Олег Сидоркин — инженер и музыкант: проекты, локальные инструменты без облака и заметки об аудио, AI и архитектуре.\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":\"force-dark\",\"themeConfig\":{\"logo\":\"/home-wheel.svg\",\"siteTitle\":false,\"nav\":[{\"text\":\"Проекты\",\"items\":[{\"text\":\"Приложения\",\"items\":[{\"text\":\"Дневник\",\"link\":\"/journal\"},{\"text\":\"IDEF0-редактор\",\"link\":\"/idef0\"},{\"text\":\"Аудио-реактив\",\"link\":\"/ar/\",\"target\":\"_self\"},{\"text\":\"Piano Teacher\",\"link\":\"/piano\"},{\"text\":\"OpenPose Editor\",\"link\":\"/openpose\"},{\"text\":\"Планировщик\",\"link\":\"/planner\"},{\"text\":\"Журнал решений\",\"link\":\"/decision-journal\"},{\"text\":\"Финансы\",\"link\":\"/finance\"},{\"text\":\"Пазлы\",\"link\":\"/casual-games\"}]},{\"text\":\"Разборы\",\"items\":[{\"text\":\"Аудио-реактив — архитектура\",\"link\":\"/projects/ar-engine\"},{\"text\":\"IDEF0 Editor — архитектура\",\"link\":\"/projects/idef0-editor\"}]}]},{\"text\":\"Музыка\",\"link\":\"/music\"},{\"text\":\"Блог\",\"link\":\"/blog\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>

  </body>
</html>