Vocal Ladder

A piano accompanist for vocal warm-ups. Choose an exercise (Do-Re-Mi-Fa-Sol-Fa-Mi-Re-Do, arpeggios, scales, or your own), the key to start on, the key to end on, and the tempo. The piano plays it, then moves up or down a half step and plays it again until it reaches the end key. Line exercises up into practice sets that play straight through, and export / import them to share as a file.

発声練習のピアノ伴奏ツールです。練習パターン（ドレミファソファミレド・ドミソ・スケール・オリジナル）、開始のキーと終了のキー、テンポを選ぶと、ピアノが半音ずつ上げ下げしながら終了のキーまで繰り返し弾きます。練習を並べた「練習セット」は通しで再生でき、エクスポート・インポートでほかの人と共有できます。

▶ https://ktkwmr.com/vocalladder/ (日本語: https://ktkwmr.com/vocalladder/ja/)

Features / 機能

• Exercises: 9 built-in patterns (Do-Re-Mi-Fa-Sol, Do-Re-Mi, Do-Mi-Sol, Do-Mi-Sol-Do, one octave, Sol-Fa-Mi-Re-Do, one-octave leap, 1.5-octave leap, staccato Do-Mi-Sol) or your own written as numbers パターン 9 種（ドレミファソ、ドレミ、ドミソ、ドミソド、1オクターブ、ソファミレド、1オクターブ跳躍、1.5オクターブ変則跳躍、スタッカートのドミソ）と、数字で書くオリジナル
• Start and end: any keys from C2 to C6, half or whole steps, up or down, optionally back to the start. Shows the range you will sing 開始・終了のキー（C2〜C6）、半音・全音、上り・下り、開始まで戻るも可。歌う音域を表示
• Piano: plays the melody with you, chord before each key, first key twice (listen, then sing), rest between keys, tempo 30–240. Synthesized piano or a soft held tone (Web Audio API) メロディーはいつも一緒に弾く。キーごとの和音、最初のキーを 2 回（聴いてから歌う）、キーの間の休み、テンポ 30〜240。ピアノ／やわらかい音（Web Audio API で合成）
• My patterns: save your own notes with a name (the same name overwrites); they appear at the top of the pattern list for every set. Rename or delete them (exercises keep their notes) マイパターン: オリジナルの音に名前を付けて保存し、パターンの一番上から選べる。名前の変更・削除も可（削除しても練習の音は残る）
• Delete all saved data (⚙ menu): removes all sets, My patterns, and settings in this browser and returns to the first-open state, after a confirmation ⚙ →「保存した情報をすべて削除」で、このブラウザのセット・マイパターン・設定をすべて消して、初めて開いたときの状態に戻す（確認あり）
• While playing: skip or repeat keys (◀ Key / Key ▶ or tap a key) 再生中にキーを戻す・進める（ボタンかキーの一覧）
• Practice sets: several sets (e.g. by purpose, voice type, or person), exercises play one after another; Export / Import all sets as one JSON file 練習セットを複数持てる（目的・声種・人ごとなど）。続けて再生。すべてのセットを 1 つの JSON ファイルでエクスポート・インポート
• Installable PWA, works offline after the first visit; English / Japanese UI (/vocalladder/ja/, ?lang=en|ja) ホーム画面に追加でき、オフラインでも動作。英語・日本語

Pattern notation / パターンの書き方

Write	Meaning
1–7	Do Re Mi Fa Sol La Ti (major scale from the key) / ド〜シ
8–15	the next octave (8 = Do an octave up) / 1オクターブ上
b3, #4	b before a number lowers it a half step, # raises it (b3 = Mi lowered a half step) / 数字の前の b で半音下がり、# で半音上がる
5, / 1'	an octave lower / higher / 1オクターブ下・上
-	one beat longer (1-- = 3 beats) / 1拍のばす
/	half as long (1/ = half a beat) / 半分の長さ
r	rest / 休み

Example: 1 2 3 4 5 4 3 2 1- = Do-Re-Mi-Fa-Sol-Fa-Mi-Re-Do with a 2-beat last note. The built-in patterns plus the 2-beat chord fill whole bars of 4 beats, so the next key starts right on the beat. Patterns with a minor third (b3) and no major third get a minor chord.

Export file / エクスポートのファイル

Export saves all sets and My patterns in one file. Import adds every set and pattern in the file (patterns whose notes are already saved are skipped); a set with the same name and the same exercises as one already there is skipped, and a different set with a name that already exists gets “(2)”. Nothing saved is replaced. Version 3 files (no listenFirst; their melody is ignored, as the melody is always played), version 2 files (no patterns) and version 1 files (one set, "format": "vocalladder-set") can still be imported. エクスポートはすべてのセットとマイパターンを 1 つのファイルに保存します。インポートはファイルのセットとマイパターンをすべて追加します（同じ音のマイパターンはすでにあれば追加しません）。名前も中身も同じセットがすでにあれば読み込まず、名前だけ同じなら「(2)」を付けます。既存のセットは置き換えません。listenFirst のない version 3（melody は無視し、メロディーはいつも弾く）、マイパターンのない version 2 と、1 セットだけの version 1 も読み込めます。

{
  "format": "vocalladder-sets", "version": 4,
  "patterns": [ { "name": "Do-Mi-Sol twice", "pattern": "1 3 5 3 1 3 5 3 1-" } ],
  "sets": [
    { "name": "Soprano A",
      "exercises": [
        { "name": "", "pattern": "1 2 3 4 5 4 3 2 1-", "start": "C4", "end": "G4", "step": 1,
          "roundTrip": false, "bpm": 100, "rest": 0, "chord": true, "listenFirst": false }
      ] }
  ]
}

Privacy / プライバシー

• The sound is made only in your browser, and your practice sets are saved only in your browser. Export and import only save and read a file on your device. Nothing you enter is sent to a server. No accounts, cookies, ads, microphone, or third-party libraries.
• The site is hosted on Cloudflare (standard access logs). Page views are counted with Cloudflare Web Analytics, which uses no cookies.
• 音はブラウザ内で作り、練習セットもブラウザ内だけに保存します。エクスポート・インポートは端末のファイルを保存・読み込みするだけです。入力した内容はサーバーに送信されません。アカウント・Cookie・広告・マイク・外部ライブラリはありません。
• サイトは Cloudflare で配信しています（標準的なアクセスログ）。閲覧数は Cookie を使わない Cloudflare Web Analytics で集計しています。

Full policy: /vocalladder/privacy/ (/vocalladder/ja/privacy/). Operator: /vocalladder/about/.

Project structure / 構成

public/
  _headers                      # security headers (CSP etc.)
  404.html                      # page for unknown URLs under /vocalladder/ (status 404)
  vocalladder/
    index.html                  # the app (HTML / CSS / JS, English and Japanese text)
    timer.js                    # worker that ticks the player's scheduler (keeps running in a background tab)
    ja/index.html               # Japanese page, generated from index.html (do not edit)
    guide/ patterns/ warmup-scales/ faq/ about/ privacy/ ja/...  # articles and info pages, generated from scripts/pages/ (do not edit)
    images/guide/               # app screenshots for the guide (scripts/render-guide-images.mjs)
    sitemap.xml                 # generated by scripts/build-pages.mjs (do not edit)
    sw.js  manifest.json  icons/  og-image.png  THIRD_PARTY_LICENSES.md
scripts/
  build-ja.mjs  build-pages.mjs  pages/  update-third-party-licenses.mjs
  pages/vocal.mjs               # values for the articles, read from the app (patterns, note names, parser)
  render-guide-images.mjs       # takes the guide screenshots (Playwright)
  og-image.html  render-og-image.mjs  render-icons.mjs
wrangler.jsonc                  # Cloudflare Workers (static assets, route ktkwmr.com/vocalladder*)
CLAUDE.md  docs/baseline-status.md

This Worker only serves /vocalladder/*; the domain root belongs to the ktkwmr-home Worker (ktkwmr/ktkwmr.com). When you load anything from a new external host, add it to the CSP in public/_headers and update the privacy text.

Development / 開発

Serve public/ and open /vocalladder/. Opening index.html as a file:// URL does not work (Service Worker, worker timer). file:// で直接開くと動きません。ローカルのサーバーで public/ を配信してください。

npx wrangler dev        # http://localhost:8787/vocalladder/ (also runs the generators)
# or
npx serve public

If the app shows an old version, reload (or restart the installed app). 古い画面が出るときは再読み込みしてください。

Deploy / デプロイ

Cloudflare Workers static assets. With Workers Builds connected, a push to main deploys; other branches get preview builds. By hand: npx wrangler deploy.

Generated files / 生成ファイル

Edit only public/vocalladder/index.html, timer.js, sw.js, and scripts/. ja/index.html, the articles (guide, patterns, warmup-scales, faq), the info pages, and sitemap.xml are generated by wrangler deploy / wrangler dev and by the Build generated pages workflow on push to main:

node scripts/build-ja.mjs             # regenerate ja/index.html
node scripts/build-pages.mjs          # regenerate the articles, info pages, and sitemap.xml
node scripts/build-ja.mjs --check     # exit 1 if out of date (same for build-pages.mjs)

編集するのは index.html・timer.js・sw.js と scripts/ だけです。生成ファイルは手で編集しません。

Preview as a claude.ai Artifact / Artifact でのプレビュー

node scripts/build-preview.mjs writes .preview/ (not committed): index.html without the Service Worker, manifest, and analytics, plus the files it loads (timer.js, …). Claude publishes it as an Artifact to show a working version before deploying. Export uses the viewer's downloads capability there.

Images / 画像

npm install --no-save playwright && npx playwright install chromium
node scripts/render-og-image.mjs      # og-image.png from scripts/og-image.html
node scripts/render-icons.mjs         # PNG icons from icons/icon.svg
node scripts/render-guide-images.mjs  # screenshots for the guide (re-run when the app's look changes)

Third-party licenses / サードパーティライセンス

No third-party libraries. If a pinned CDN library is added under public/, the Update third-party licenses workflow adds it to THIRD_PARTY_LICENSES.md.

License / ライセンス

MIT © 2026 ktkwmr