Setlist Metronome

A metronome that remembers each song. Save the tempo (BPM), time signature, rhythm (4 beat, 8ths, 16ths, triplets, shuffle), sound, and accents for every song in your setlist, and switch between them with one tap — even while it plays.

曲ごとに設定を覚えておけるメトロノームです。セットリストの曲ごとにテンポ（BPM）・拍子・ビート（4ビート・8ビート・16ビート・3連符・シャッフル）・音色・アクセントを保存し、ワンタップで切り替えられます。再生中にも切り替えられます。

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

Features / 機能

• Setlist: add, rename, duplicate, reorder, and delete songs; each keeps its own settings. Prev / Next move through the list while playing 曲の追加・名前の変更・複製・並べ替え・削除。曲ごとに設定を保持し、「前」「次」で再生しながら移動
• Tempo: 20–300 BPM with ±1 / ±5 buttons, a slider, direct input, and tap tempo. Shows the tempo marking (Largo … Presto) 20〜300 BPM。±1・±5 のボタン、スライダー、直接入力、タップテンポ。テンポ記号も表示
• Time signature: any top number from 1 to 15 over 2, 4, 8, or 16, with accent / normal / silent for each beat 分子 1〜15、分母 2・4・8・16。拍ごとに強拍・普通・鳴らさないを設定
• Rhythm and sound: 4 beat, 8ths, 16ths, triplets, shuffle and 16th shuffle with adjustable swing; click, woodblock, beep, cowbell, or a drum pattern (Web Audio API) 4ビート・8ビート・16ビート・3連符・シャッフル・16シャッフル（ハネ具合を調整可）。クリック・ウッドブロック・電子音・カウベル・ドラム（Web Audio API）
• Steady timing: notes are scheduled on the audio clock from a worker timer, and the screen is kept on while playing 音声用の時計で予約して鳴らし、タイマーは Worker で動かす。再生中は画面を消さない
• Installable PWA that also works offline after the first visit ホーム画面に追加でき、一度開けばオフラインでも動作
• English / Japanese UI, chosen automatically from your browser language. /setlistmetronome/ja/ is always Japanese, and ?lang=en / ?lang=ja overrides both 英語・日本語の表示に対応。ブラウザの言語で自動選択。/setlistmetronome/ja/ は常に日本語で、?lang=en / ?lang=ja で切り替えも可能

Privacy / プライバシー

• The sound is made only in your browser, and your songs are saved only in your browser. Nothing you enter is sent to a server. The app has no accounts, cookies, ads, or third-party libraries.

• Your setlist (song titles, tempo, time signature, rhythm, sound, accents, and volume) and, for offline use, the app itself are saved in your browser's storage. Clear this site's data to remove them.

• The site is hosted on Cloudflare, which keeps standard access logs (IP address, time, requested page) for operation and security. Page views are counted with Cloudflare Web Analytics, which uses no cookies.

• 音はブラウザ内で作り、セットリストもブラウザ内だけに保存します。入力した内容はサーバーに送信されません。アカウント登録・Cookie・広告・外部ライブラリはありません。

• セットリスト（曲名・テンポ・拍子・ビート・音色・アクセント・音量）と、オフラインで使うためのアプリ本体をブラウザ内に保存します。サイトデータを削除すると消えます。

• サイトは Cloudflare で配信しており、運用・セキュリティのために標準的なアクセスログ（IP アドレス、日時、アクセスしたページ）が記録されます。閲覧数は Cookie を使わない Cloudflare Web Analytics で集計しています。

The same notice is shown in the app under ⚙ → Privacy. The full privacy policy is at /setlistmetronome/privacy/ (Japanese: /setlistmetronome/ja/privacy/), and the operator information is at /setlistmetronome/about/. アプリ内の ⚙ → プライバシー でも同じ内容を表示しています。プライバシーポリシーは /setlistmetronome/ja/privacy/、運営者情報は /setlistmetronome/ja/about/ にあります。

Project structure / 構成

public/
  _headers                      # security headers (CSP etc.)
  404.html                      # page for unknown URLs under /setlistmetronome/ (status 404)
  setlistmetronome/
    index.html                  # the app (HTML / CSS / JS, English and Japanese text)
    timer.js                    # worker that ticks the metronome's scheduler (keeps running in a background tab)
    ja/index.html               # Japanese page, generated from index.html (do not edit)
    <slug>/  ja/<slug>/         # 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                       # Service Worker (network first, offline fallback)
    manifest.json               # PWA manifest
    icons/                      # icon.svg and PNGs (scripts/render-icons.mjs)
    og-image.png                # image for search results and social media shares
    THIRD_PARTY_LICENSES.md     # third-party notices (shown in About)
scripts/
  build-ja.mjs                  # generates ja/index.html from index.html
  build-pages.mjs               # generates the articles, info pages, and sitemap.xml from scripts/pages/
  pages/                        # page content (one file per page, English and Japanese), layout, metronome.mjs
  check-metronome.mjs           # checks that metronome.mjs matches the app (run by build-pages.mjs)
  render-guide-images.mjs       # takes the guide screenshots (Playwright)
  update-third-party-licenses.mjs
  og-image.html                 # source of og-image.png
  render-og-image.mjs           # renders og-image.html to og-image.png (Playwright)
  render-icons.mjs              # renders icons/icon.svg to the PNG icons (Playwright)
wrangler.jsonc                  # Cloudflare Workers (static assets, route ktkwmr.com/setlistmetronome*)
CLAUDE.md                       # instructions for Claude Code
docs/baseline-status.md         # status of the shared web app baseline items

This is the third app on ktkwmr.com. Its Worker only serves /setlistmetronome/*; the domain root (/, robots.txt, the root sitemap.xml, and 404 for other paths) belongs to the ktkwmr-home Worker (ktkwmr/ktkwmr.com), so this app does not depend on any other app. ktkwmr.com の 3 つ目のアプリです。この Worker は /setlistmetronome/* だけを配信し、ドメイン直下（/、robots.txt、ルートの sitemap.xml、その他のパスの 404）は Chord Transposer の Worker が持っています。

When you load a script or data from a new external host, add it to the Content-Security-Policy in public/_headers, or the browser will block it. Also update the privacy text (see below). 新しい外部サイトからスクリプトやデータを読み込むときは、public/_headers の Content-Security-Policy にそのホストを追加してください（追加しないとブラウザにブロックされます）。プライバシーの説明も同時に直します（下記）。

Development / 開発

Serve public/ with a local server and open /setlistmetronome/. Opening index.html as a file:// URL does not work (the Service Worker and the license file need a server). ローカルのサーバーで public/ を配信して /setlistmetronome/ を開きます。file:// で直接開くと Service Worker などが動きません。

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

On Windows PowerShell, use npx.cmd if npx is blocked by the execution policy. Windows の PowerShell で npx が止められるときは npx.cmd を使います。

If the app shows an old version, reload the page (or restart the installed app); the Service Worker fetches the latest files first and uses the cache only when offline. 古い画面が出るときは再読み込み（ホーム画面のアプリは再起動）してください。Service Worker はネットワークを優先し、キャッシュはオフライン時だけ使います。

Deploy / デプロイ

The app is served with Cloudflare Workers static assets. With Workers Builds connected to this repository, a push to main deploys automatically, and other branches get preview builds. To deploy by hand:

npx wrangler deploy

Generated files / 生成ファイル

Edit only public/setlistmetronome/index.html, timer.js, and scripts/. These files are generated and must not be edited by hand:

• public/setlistmetronome/ja/index.html – index.html with Japanese <head> (title, description, canonical, Open Graph, JSON-LD) and Japanese UI text, so search engines can index the Japanese version. The Japanese title and description are in scripts/build-ja.mjs; UI text comes from I18N.ja in index.html.
• The articles (guide, tempo-markings, time-signatures, shuffle-and-swing, faq), the info pages (about, privacy), their ja/ versions, and sitemap.xml – from scripts/pages/<slug>.mjs (English and Japanese written separately) and scripts/pages/layout.mjs. The tables in the articles are calculated by scripts/pages/metronome.mjs, and scripts/check-metronome.mjs stops the build if its rules no longer match the app.

They are regenerated automatically by npx wrangler deploy / npx wrangler dev (build.command in wrangler.jsonc) and by the Build generated pages GitHub Actions workflow on push to main. To run them manually:

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)

To add an article, create scripts/pages/<slug>.mjs and add the slug to PAGES in scripts/build-pages.mjs; it is added to the footer of every page and to the sitemap. A person checks every new or changed article in the preview build before it is merged (see docs/article-review.md).

When a service that receives visitors' information is added or removed (for example ads), update scripts/pages/privacy.mjs and its dates, the Privacy text in the app (privacy.body in index.html), and this README in the same change.

編集するのは public/setlistmetronome/index.html・timer.js と scripts/ だけです。ja/index.html、記事、情報ページ（運営者情報・プライバシーポリシー）、sitemap.xml は生成ファイルなので手で編集しません。デプロイ時（wrangler deploy / wrangler dev）と main への push 時（GitHub Actions）に自動で再生成されます。外部サービスを足す・外すときは、プライバシーポリシー（scripts/pages/privacy.mjs）、アプリ内の privacy.body、この README を同時に直してください。

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)

With Chrome or Edge installed, npm install --no-save playwright-core and PW_CHANNEL=msedge (or chrome) also work.

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

The app uses no third-party libraries. If a CDN library (cdn.jsdelivr.net/npm/… or unpkg.com/…) is added under public/, the Update third-party licenses GitHub Actions workflow adds its entry and license text to public/setlistmetronome/THIRD_PARTY_LICENSES.md on push to main. Pin the version in the URL, and add the host to the CSP.

node scripts/update-third-party-licenses.mjs          # add missing entries
node scripts/update-third-party-licenses.mjs --check  # exit 1 if the file would change

License / ライセンス

MIT © 2026 ktkwmr