簡譜練習產生器

一個給鋼琴老師/學生使用的簡譜(數字譜)隨機練習譜產生器，深色主題，可安裝成 iPad 上的獨立 App。生成的譜子不追求音樂性，純粹依照設定的規則隨機排列，用來訓練視奏與節拍掌握。

主要功能

基本設定(工具列)

• 每小節拍數：一小節有幾拍
• 小節數：總共生成幾小節，每小節各佔一行
• 最小拍值 (1/n)：每一拍最小可以分割成幾分之一拍(例如 4 代表最細可以到 1/4 拍)
• 附點：是否允許附點音符

節奏是用遞迴二分法生成的，所以除了平均分割(例如四個十六分音符)以外，也會產生像「一個八分音符 + 兩個十六分音符」這種不對稱的真實記譜組合，並支援三連音(當拍值可以被 3 整除時)。

進階設定(點工具列右上角的齒輪圖示展開)

• 允許休止符：讓部分音符變成休止符(顯示為 0),可調整出現機率，訓練數空拍的節奏穩定度
• 音符範圍(含八度)：從低音 1 到高音 7 共 21 個音高選擇，數字上方的點代表高八度、下方的點代表低八度，取代原本只能在 1–7 單一八度內選擇的限制
• 雙手模式：同時生成上(右手)下(左手)兩行譜。設定的音域會自動分為左手低音區與右手高音區，中央保留三個音作為緩衝，避免兩手按到相同或相近的鍵；至少需選擇七個音。

節拍器

點工具列的節拍器圖示開啟：

• 縱向拉桿調整速度(40–240 BPM),旁邊也有 −/+ 按鈕可以微調
• 用真實五線譜的符桿+符尾圖示選擇每拍要響幾下(1 / 2 / 3 / 4 下)
• 每拍的第一個聲音會比同一拍的其他聲音大聲、音高也較高，方便抓拍子重音
• 關閉視窗不會停止節拍器，可以邊看譜邊聽節拍

其他

• 深色主題，每次生成會套用新的隨機深色紋理背景(格線/交織/圓點/條紋/散點)
• 上次的所有設定與生成結果會存在瀏覽器 localStorage，重新整理頁面會自動還原
• 在譜子區域頂部下拉：短距離下拉會重新生成一份新譜子；長距離下拉(超過閾值,指示圈會變藍色放大)會清除快取並強制重新整理頁面，安裝成 App 後也能抓到新版本
• 支援加入 iPad 主畫面成為全螢幕 App(PWA),含 Service Worker 離線快取

部署方式

這是純靜態網頁，不需要建置流程，任何靜態檔案伺服器都能跑。

方法一：搭配 tailscale serve

tailscale serve --bg --set-path / /path/to/piano-practice-generator

方法二：內建的 Node 伺服器

node server.js                # HTTP，預設 port 6010
node server.js --port 3000    # 自訂 port
node server.js --https        # HTTPS(自動產生自簽憑證)

也可以用 start.sh / stop.sh 在背景管理這個伺服器程序(重複執行 start.sh 會自動停掉舊的再啟動新的)：

./start.sh            # 背景啟動，預設 port 6010
./start.sh 3000        # 指定 port
./start.sh --https     # 啟用 HTTPS
./stop.sh              # 停止

方法三：Docker

docker compose up -d

預設對外開放 6010 port(可用 PORT 環境變數覆蓋)。

檔案結構

index.html    主頁面結構
404.html      找不到頁面時顯示的錯誤頁(樣式內嵌)
style.css     深色主題樣式
app.js        節奏生成、渲染、節拍器、進階設定、下拉手勢等邏輯
manifest.webmanifest / sw.js   PWA 安裝與離線快取
server.js     零依賴的 Node 靜態伺服器(HTTP/HTTPS)
start.sh / stop.sh             伺服器背景管理腳本
Dockerfile / docker-compose.yml
icons/        PWA 圖示