演奏動作紀錄Action log · 0
樂譜辨識Score recognition
將印刷五線譜或簡譜(PDF / JPG / PNG)轉成可演奏的樂譜。辨識在背景執行,可隨時取消;所有處理都在你的瀏覽器中進行,檔案不會上傳。Turns printed staff notation or jianpu (PDF / JPG / PNG) into a playable score. Recognition runs in the background and can be cancelled; everything stays in your browser and files are never uploaded.
辨識結果為近似值,最適合清晰、正向的印刷樂譜(掃描建議 300 dpi 以上)。可辨識:譜號、調號、音高、全/二分/四分/八分/十六分音符、附點、臨時記號、小節線、三連音、連結線,以及反覆線與第一/第二結尾。開啟「文字辨識」後還能讀取速度文字(如 ♩ = 72、Allegro、中板、rit.、a tempo)、D.C. / D.S. / Fine / Coda 與歌詞(只取第一段)。文字辨識第一次使用會下載語言檔(英文約 2 MB、繁中約 2 MB),需要網路。另外可辨識:休止符(全、二分、四分、八分、十六分、附點)、圓滑線(演奏時連奏)、Segno / Coda 記號、倚音、漣音、逆漣音、迴音、琶音與延長記號;開啟文字辨識時也會讀取 tr(顫音)。多小節休止只算一小節,裝飾記號的辨識率低於音符。v3 新增:上下符桿分離的雙聲部、譜中途換調號/拍號/譜號、打擊樂譜(× 符頭與鼓件位置)。簡譜可辨識:數字 0–7、高低音點、減時線(八分/十六分)、增時線、附點、升降記號、三連音、連音線/圓滑線、小節線與反覆記號,並讀取「1=D」「3/4」「♩=88」與歌詞。載入後可在「樂譜」區切換「五線譜」檢視、點「編修」修正錯誤,再用「輸出」存成 JSON、MIDI、MusicXML 或 WAV。
Results are approximate and work best on clear, upright printed scores (scan at 300 dpi or more). Recognized: clefs, key signature, pitch, whole/half/quarter/eighth/16th notes, dots, accidentals, barlines, triplets, ties, repeat barlines and 1st/2nd endings. With Text OCR on it also reads tempo text (e.g. ♩ = 72, Allegro, rit., a tempo), D.C. / D.S. / Fine / Coda and lyrics (first verse). Text OCR downloads its language data on first use (about 2 MB each) and needs a connection. It also recognizes rests (whole, half, quarter, eighth, 16th, dotted), slurs (played legato), segno / coda signs, grace notes, mordents, inverted mordents, turns, arpeggios and fermatas; with Text OCR on it also reads tr (trill). Multi-measure rests count as one measure, and ornaments are recognized less reliably than notes. New in v3: two voices split by stem direction, mid-score key / time / clef changes, and percussion staves (x noteheads and drum positions). For jianpu it reads digits 0–7, octave dots, underlines (eighths / 16ths), dashes, dots, sharps and flats, triplets, ties / slurs, barlines and repeats, plus the "1=D", "3/4", "♩=88" header and lyrics. After loading, switch the score area to Notation view, click Edit to fix mistakes, then export to JSON, MIDI, MusicXML or WAV.
舞台背景Stage art
選一張預設背景(以 OpenArt 生成),或上傳自己的圖片、貼上圖片網址。Pick a preset backdrop (made with OpenArt), or upload your own image or paste an image URL.
預設背景(OpenArt 生成)Preset backdrops (made with OpenArt)
自訂背景Your own image
自訂按鍵Custom key mappings
點選右側按鍵後,按下新的鍵即可指定;同一個鍵只會對應一個音。Click a key button, then press the new key. Each key maps to one sound only.
AI 編曲AI arrangement
保留原本的旋律,判斷調性與和弦,再用道地的伴奏型態重新編寫鍵盤、吉他、貝斯、鼓組與弦樂;主歌較輕、副歌較滿,伴奏音域永遠在旋律下方。結果另存為新樂譜,可在「卷軸 / 五線譜區」的和弦列逐小節修改和弦後重新編曲。Keeps your melody, finds the key and chords, then writes keys, guitar, bass, drums and strings from idiomatic accompaniment patterns: lighter verses, fuller choruses, and the accompaniment always below the melody. The result is saved as a new score; edit its chords bar by bar in the chord lane of the score area and re-arrange.
基本Basics
分軌設定Parts
和弦進行Chord progression
大型語言模型判斷和弦Chords from a large language model
「巴哈四部和聲」與「AI 鼓組律動」使用 Google Magenta 的模型(第一次約 5–10 MB,在瀏覽器中執行),無法下載時自動改用伴奏型態。Bach chorale and AI drum groove use Google Magenta models (about 5-10 MB on first use, run in your browser); pattern-based arranging is used if they cannot be downloaded.
線上使用說明書User manual
1. 快速開始1. Quick start
- 按左上角的 ▶ 播放,聆聽目前的示範歌曲;再按一次暫停,■ 停止並回到開頭。
- 點舞台上任一樂器(例如鋼琴),下方會出現該樂器的鍵盤或鼓墊,用滑鼠、觸控或電腦鍵盤演奏。
- 在「③ 輸入 / 輸出區」的「樂譜列表」切換歌曲,或按醒目的「匯入樂譜」載入自己的 MIDI / MusicXML / OVE 檔(可一次多首);按「AI 編曲」可自動配上伴奏。
- 手上只有紙本或 PDF 樂譜時,按「樂譜辨識」,把五線譜或簡譜轉成可演奏的樂譜。
- 按「全螢幕」可放大整個樂團;按「說明書」隨時回到本頁。
- Press ▶ Play at the top left to hear the current demo song; press again to pause, and ■ to stop and rewind.
- Click any instrument on the stage (for example the piano). Its keyboard or drum pads appear below; play with the mouse, touch, or your computer keyboard.
- Pick another song from the score list in ③ Input / Output, or press the highlighted Import button to load your own MIDI / MusicXML / OVE files (several at once); AI arrange adds an accompaniment for you.
- If you only have a paper or PDF score, press Score recognition to turn staff notation or jianpu into a playable score.
- Press Fullscreen to enlarge the whole band; press Manual to come back here at any time.
2. 介面導覽:六個功能區2. A tour of the screen: six areas
- 頁首:全螢幕、說明書、快速說明。
- ① 播放區:播放、停止、循環、錄製、時間與進度條、速度、音量、歌詞列。
- ② 設定區:語言(預設中文)、色系、繪圖、畫質、高音質音色、MIDI 鍵盤、混音台、自訂按鍵、舞台背景,以及「匯入後播放 / 顯示樂譜 / 顯示歌詞 / 可愛音符」開關。
- ③ 輸入 / 輸出區:匯入樂譜(可一次多首)、樂譜辨識、AI 編曲、樂譜列表與存檔 / 讀檔,以及輸出目前樂譜(JSON、MIDI、MusicXML、WAV)。
- ④ 樂器區:舞台上的 16 種樂器與右側的「開啟 / 關閉 / 自動」清單。
- ⑤ 彈奏區:目前選取樂器的鋼琴鍵盤或鼓墊,以及八度與力度。
- ⑥ 卷軸 / 五線譜區:鋼琴捲軸或五線譜檢視、編輯音符與演奏動作紀錄。
- Header: Fullscreen, Manual and quick Help.
- ① Playback: play, stop, loop, record, time and seek bar, tempo, volume and the lyric bar.
- ② Settings: language (Chinese by default), theme, renderer, quality, HQ sounds, MIDI keyboard, Mixer, key mapping, stage art, and the Play after import / Show score / Show lyrics / Cute notes switches.
- ③ Input / Output: Import (several files at once), Score recognition, AI arrange, the score list with Save / Load, and export of the current score (JSON, MIDI, MusicXML, WAV).
- ④ Instruments: the 16 instruments on the stage and the On / Off / Auto list.
- ⑤ Play the instrument: keyboard or drum pads of the selected instrument, with octave and velocity.
- ⑥ Piano roll / Notation: the score views, note editing and the action log.
3. 樂器與三種模式3. Instruments and their three modes
樂團有弦樂、銅管、薩克斯風、長笛、手風琴、鐘琴、合成器鋪底、合成器主奏、鋼琴、電鋼琴、打擊樂器、木吉他、電吉他、主唱、貝斯與爵士鼓,共 16 種。每個樂器都有三種模式:
The band has 16 instruments: strings, brass, saxophone, flute, accordion, bells, synth pad, synth lead, piano, electric piano, percussion, acoustic guitar, electric guitar, vocal, bass and drum kit. Each has three modes:
| 模式Mode | 作用What it does |
|---|---|
| 自動Auto | 播放樂譜中這個樂器的聲部(預設)。Plays this instrument's part from the score (default). |
| 開啟On | 樂譜聲部靜音,由你親自演奏;你錄下的音符仍會播放。適合練習。Mutes the score part so you play it yourself; your recorded notes still play. Good for practice. |
| 關閉Off | 完全靜音,也不能演奏。Silent, and cannot be played. |
清單下方的「全部自動 / 全部開啟 / 全部關閉」可一次切換所有樂器。
All Auto / All On / All Off below the list switch every instrument at once.
4. 演奏:滑鼠、觸控、電腦鍵盤、MIDI 鍵盤4. Playing: mouse, touch, computer keyboard, MIDI keyboard
- 舞台:點樂器即可發聲;點在樂器左右不同位置會有不同音高,鼓則依位置對應不同鼓件。
- 鍵盤 / 鼓墊:用滑鼠或手指按下方的琴鍵或鼓墊。
- 電腦鍵盤:先點一下樂團畫面,讓它取得焦點。旋律樂器下排 Z S X D C V G B H N J M 為一個八度,上排 Q 2 W 3 E R 5 T 6 Y 7 U(以及 I 9 O 0 P)為高一個八度;鼓組依序為 A S D F G H J K L ;。
- 其他快捷鍵:空白鍵 播放 / 暫停;- 與 = 降低 / 升高八度;Esc 關閉對話框。
- MIDI 鍵盤:用 USB 接上 MIDI 鍵盤,按「MIDI 鍵盤」並允許瀏覽器存取,即可演奏目前選取的樂器,支援力度與延音踏板。頁面有多個樂團時,由最後操作的那個接收。建議使用 Chrome 或 Edge。
- Stage: click an instrument to sound it. The left / right position changes pitch; on drums the spot picks the drum.
- Keyboard / pads: press the keys or pads below with the mouse or a finger.
- Computer keyboard: click the band once so it has focus. For melodic instruments the bottom row Z S X D C V G B H N J M is one octave and the top row Q 2 W 3 E R 5 T 6 Y 7 U (and I 9 O 0 P) is an octave higher. Drum pads are A S D F G H J K L ;.
- Other shortcuts: Space play / pause; - and = octave down / up; Esc closes dialogs.
- MIDI keyboard: connect it by USB, press MIDI keyboard and allow access; it plays the selected instrument with velocity and sustain pedal. With several bands on a page, the one you used last receives MIDI. Chrome or Edge recommended.
按「自訂按鍵」可重新指定每個電腦按鍵,設定會保存在這台電腦的瀏覽器中。
Key mapping lets you reassign any computer key; the mapping is saved in this browser.
5. 播放、速度、音色與混音台5. Playback, tempo, sounds and the mixer
- 速度 50%–150%,不會改變音高;音量 為總音量;循環 會讓歌曲結束後重新開始;拖曳進度條可跳到任意位置。
- 高音質音色:開啟後從網路載入真實樂器取樣(FluidR3 GM SoundFont),第一次需要數秒到數十秒;載入完成前與離線時,會自動改用內建合成音色。
- 混音台:每個樂器可調音量、左右聲道(Pan)、靜音 M 與獨奏 S,下方可調整殘響;「重設」回到預設值。混音設定也會套用到 WAV 輸出。
- Tempo 50%–150% without changing pitch; Volume is the master level; Loop restarts the song at the end; drag the seek bar to jump anywhere.
- HQ sounds streams real instrument samples (FluidR3 GM SoundFont); the first load takes a few seconds or more. Until loaded, or offline, the built-in synth voices are used.
- Mixer: volume, pan, mute (M) and solo (S) per instrument, plus reverb; Reset restores defaults. The mix is also used for WAV export.
6. 示範歌曲與匯入樂譜6. Demo songs and importing scores
- 示範歌曲皆為原創:霓虹衝刺、晨間月台、紙彗星、午夜街機。
- 「匯入樂譜」支援 MIDI(.mid)、MusicXML(.musicxml / .xml)、壓縮 MusicXML(.mxl)、Overture(.ove)與本頁輸出的 JSON;可一次選取多個檔案,也可以直接把檔案拖進樂團畫面。選擇 PDF / JPG / PNG 會自動開啟「樂譜辨識」。
- OVE 檔會讀取音軌、音符、連結線、速度、拍號與反覆線;第一 / 第二結尾、歌詞與裝飾記號目前不會讀取。
- 存檔 / 讀檔:「存檔」把整個樂譜列表(所有匯入、辨識與 AI 編曲的樂譜,以及目前選取的那首)存成一個 .aemlband 檔;「讀檔」選擇這個檔就會恢復列表。換電腦或清除瀏覽器資料後也能接著用。
- MusicXML 會展開反覆記號、第一 / 第二結尾、D.C. / D.S. / Fine / Coda,讀取第一段歌詞,並演奏圓滑奏、斷奏、延長記號、倚音、顫音、漣音、迴音與琶音。
- 「匯入後播放」(預設關閉)會在載入完成後自動開始播放。匯入的樂譜會出現在示範選單的「已匯入」群組中。
- 開啟「顯示歌詞」(預設關閉),播放時會逐字顯示歌詞。
- All demo songs are original: Neon Sprint, Morning Platform, Paper Comet, Midnight Arcade.
- Import accepts MIDI (.mid), MusicXML (.musicxml / .xml), compressed MusicXML (.mxl), Overture (.ove) and JSON exported here. You can choose several files at once or drag files onto the band. A PDF / JPG / PNG opens Score recognition.
- OVE files bring in tracks, notes, ties, tempo, time signature and repeat barlines; 1st / 2nd endings, lyrics and ornaments are not read yet.
- Save / Load: Save writes the whole score list (every imported, scanned and AI-arranged score, plus the one selected) to one .aemlband file; Load restores it, even on another computer or after clearing browser data.
- MusicXML repeats, 1st / 2nd endings and D.C. / D.S. / Fine / Coda are expanded, the first verse of lyrics is read, and slurs, staccato, fermatas, grace notes, trills, mordents, turns and arpeggios are performed.
- Play after import (off by default) starts playback once loaded. Imported scores are listed under Imported in the demo menu.
- Turn on Show lyrics (off by default) to see lyrics highlighted while playing.
7. 樂譜辨識(五線譜與簡譜)7. Score recognition (staff notation and jianpu)
- 按「樂譜辨識」,把 PDF / JPG / PNG 拖進虛線框,或點選選擇檔案。
- 「樂譜類型」通常保持「自動偵測」;簡譜若沒有寫「1=C」之類的調性,請在「簡譜調性」手動指定。
- 開啟「文字辨識」可讀取速度、反覆文字與歌詞(第一次使用會下載約 2 MB 語言檔);不需要時選「關閉」會快很多。
- 辨識在背景執行,可繼續操作頁面,也可按「取消」中止。完成後會顯示預覽圖(點一下放大)與統計。
- 按「載入到樂團」或「載入並播放」。
- Press Score recognition and drop a PDF / JPG / PNG into the dashed box, or click to choose a file.
- Leave Score type on Auto detect. If a jianpu score has no key text such as "1=C", set Jianpu key yourself.
- Turn on Text OCR to read tempo text, repeat words and lyrics (about 2 MB language data the first time); choose Off for much faster results.
- Recognition runs in the background, so you can keep using the page or press Cancel. When it finishes you get a preview (click to enlarge) and a summary.
- Press Load into band or Load & play.
五線譜可辨識:譜號、調號、拍號、音高、全 / 二分 / 四分 / 八分 / 十六分音符、附點、臨時記號、休止符、小節線、三連音、連結線、圓滑線、反覆線與第一 / 第二結尾、Segno / Coda、倚音、裝飾音、琶音、延長記號、上下符桿分離的雙聲部、中途換調號 / 拍號 / 譜號,以及打擊樂譜(× 符頭)。
Staff notation: clefs, key and time signatures, pitch, whole to 16th notes, dots, accidentals, rests, barlines, triplets, ties, slurs, repeats and 1st / 2nd endings, segno / coda, grace notes, ornaments, arpeggios, fermatas, two voices split by stem direction, mid-score key / time / clef changes, and percussion staves (x noteheads).
簡譜可辨識:數字 0–7(0 為休止)、高音點(上)與低音點(下)、減時線(一條 = 八分、兩條 = 十六分)、增時線「–」、附點、# / b、三連音「3」、連音線與圓滑線、小節線與反覆記號,以及譜頭的「1=D」「3/4」「♩=88」與歌詞。
Jianpu: digits 0–7 (0 is a rest), octave dots above / below, underlines (one = eighth, two = 16th), dashes "–", dots, sharps / flats, triplet "3", ties and slurs, barlines and repeats, plus the "1=D", "3/4", "♩=88" header and lyrics.
提高準確度的技巧:使用清晰、正向的印刷樂譜(掃描 300 dpi 以上);避免陰影、彎曲與手寫;拍照時讓譜面填滿畫面並保持水平;一次一頁效果最好。辨識結果是近似值,可在載入後用「編輯音符」修正。
Tips: use clear, upright printed scores (300 dpi or more); avoid shadows, curved pages and handwriting; when photographing, fill the frame and keep it level. Results are approximate; fix mistakes afterwards with Edit notes.
所有處理都在你的瀏覽器中進行,檔案不會上傳到任何伺服器。
Everything runs in your browser; files are never uploaded.
8. AI 編曲8. AI arrangement
在「③ 輸入 / 輸出區」按「AI 編曲」。程式保留原本的旋律,判斷調性與和弦,再用伴奏型態庫重新編寫鍵盤、吉他、貝斯、鼓組與弦樂。第一段較輕、副歌較滿,伴奏音域保持在旋律下方。結果另存為新的樂譜,原曲不受影響。所有選項的預設都是「自動」。
In ③ Input / Output press AI arrange. Your melody is kept; the key and chords are found and keys, guitar, bass, drums and strings are written from a library of accompaniment patterns, lighter in the first section and fuller in choruses, always below the melody. The result is saved as a new score. Every option defaults to Auto.
- 風格(17 種):抒情鋼琴、華語抒情、民謠吉他、流行、搖滾、City Pop、R&B、福音、爵士搖擺、Lo-fi、Bossa Nova、華爾茲、進行曲、兒歌、電子舞曲、管弦樂、巴哈四部和聲(AI 模型)。「自動」依速度與拍號選擇。
- 分軌設定:鼓組(關閉 / 輕 / 中 / 強,自動時依段落變化)、鍵盤型態(分解、柱式、切分、阿爾貝蒂、爵士伴奏…)、吉他(刷奏、指彈、分解、強力和弦、Bossa、切音)、低音(長音、根音五度、低音線、八分、走路低音…)、弦樂 / 鋪底(全曲、副歌、只在高潮)。
- 變化版本:A / B / C 會改變伴奏細節與過門,同樣設定可以多產生幾版比較。
- 和弦進行:視窗中列出「基本(三和弦)」、「流行(sus、add9、轉位低音)」、「豐富(七和弦、副屬和弦、借用和弦)」等候選,點選後再產生;若樂譜已有和弦列,也可選「我的和弦」。
- 和弦列:「⑥ 卷軸 / 五線譜區」上方顯示每小節的和弦,播放時標示目前和弦。點一個和弦可改根音、和弦種類與低音(例如改成 Am7 或 C/E),可先按 ▶ 試聽;改好後按「依和弦重新編曲」,伴奏會照你的和弦重寫,不滿意可按「還原上一版」。一般樂譜可按「分析和弦」先產生和弦列。
- Styles (17): piano ballad, Mandopop ballad, acoustic folk, pop, rock, City pop, R&B, gospel, jazz swing, lo-fi, bossa nova, waltz, march, children's song, EDM, orchestral, and Bach chorale (AI model). Auto picks one from the tempo and meter.
- Parts: drums (off / light / medium / strong; Auto follows the sections), keys pattern (broken, block, syncopated, Alberti, jazz comping…), guitar (strumming, fingerpicking, arpeggio, power chords, bossa, funk cutting), bass (long notes, root-fifth, bass line, 8ths, walking…), strings / pad (whole song, choruses, climax only).
- Variation: A / B / C change accompaniment details and fills, so you can make several versions with the same settings.
- Chord progression: the dialog lists candidates such as Basic (triads), Pop (sus, add9, slash bass) and Rich (sevenths, secondary dominants, borrowed chords); pick one, then arrange. If the score already has a chord lane you can choose My chords.
- Chord lane: above the score views, the chord of every bar is shown and the current one lights up while playing. Click a chord to change its root, type and bass (for example Am7 or C/E) and press ▶ to hear it; then press Re-arrange with these chords and the accompaniment is rewritten, with Undo if you prefer the previous version. For other scores, Analyse chords creates a chord lane first.
大型語言模型判斷和弦(預設關閉)Chords from a large language model (off by default)
把「大型語言模型判斷和弦」設為「開啟」,程式會把旋律與樂曲資訊填入提示詞,請模型(例如 Claude)建議每小節的和弦,再用伴奏型態產生音符。提示詞可以修改,「還原建議提示詞」會回到預設內容;可用的代入欄位有 {key}、{meter}、{bpm}、{bars}、{per}、{style}、{melody}。模型必須回傳 JSON 格式的和弦,格式錯誤或連線失敗時會自動改用內建和弦。
Set Chords from a large language model to On and the melody and song details are filled into the prompt, a model such as Claude suggests the chords for each bar, and the notes still come from the pattern library. You can edit the prompt; Restore the suggested prompt brings back the default. Placeholders: {key}, {meter}, {bpm}, {bars}, {per}, {style}, {melody}. The model must answer with JSON chords; on a bad reply or a connection failure the built-in chords are used.
連線方式:自己使用時可直接填 API 金鑰(只存在你的瀏覽器);放在公開部落格給別人用時,千萬不要把金鑰寫進網頁,請架一個代理伺服器,把網址填在「代理伺服器網址」。以下是 Cloudflare Worker 的範例(把金鑰設為環境變數 ANTHROPIC_API_KEY,並把網址換成你的部落格):
Connecting: for your own use you can enter an API key (kept only in your browser). On a public blog never put the key into the page; set up a proxy and enter its URL as the Proxy URL. A Cloudflare Worker example (store the key as the ANTHROPIC_API_KEY variable and use your blog address):
export default {
async fetch(req, env) {
const cors = {'Access-Control-Allow-Origin': 'https://YOUR-BLOG.blogspot.com',
'Access-Control-Allow-Methods': 'POST, OPTIONS', 'Access-Control-Allow-Headers': 'content-type'};
if (req.method === 'OPTIONS') return new Response(null, {headers: cors});
const r = await fetch('https://api.anthropic.com/v1/messages', {method: 'POST',
headers: {'content-type': 'application/json', 'x-api-key': env.ANTHROPIC_API_KEY,
'anthropic-version': '2023-06-01'}, body: await req.text()});
return new Response(await r.text(), {status: r.status,
headers: {...cors, 'content-type': 'application/json'}});
}
};
巴哈四部和聲與 AI 鼓組律動(GrooVAE)使用 Google Magenta 的模型,第一次約 5–10 MB,在瀏覽器中執行;無法下載時自動改用伴奏型態。
Bach chorale and AI drum groove (GrooVAE) use Google Magenta models (about 5-10 MB on first use) that run in your browser; pattern-based arranging is used if they cannot be downloaded.
可愛音符:在「② 設定區」開啟後,播放時會有可愛的小圖案在五線譜或鋼琴捲軸上,隨著正在演奏的音符跳動(預設關閉)。
Cute notes: turn it on in ② Settings and little characters hop on the notes being played, on the staff or the piano roll (off by default).
9. 樂譜檢視、修改五線譜與編輯音符9. Score views, editing the staff and editing notes
- 鋼琴捲簾:每一列是一個樂器,橫軸為時間;播放時有游標跟隨。
- 五線譜:以 Verovio 排版(第一次需要網路載入),播放時會以顏色標示目前的音符;點音符可跳到該處。
- 修改五線譜:切到「五線譜」後按「編輯音符」,點選譜上的音符(會變成藍色),再用工具列或鍵盤修改:↑ / ↓ 升降半音(Shift 為八度)、← / → 選上一個 / 下一個音符、Shift+← / → 提早 / 延後十六分音符、] 加長、[ 縮短、. 附點、Insert 在後面新增、Delete 刪除、Ctrl+Z / Ctrl+Y 復原 / 重做。修改後譜面會立即重新排版。適合修正樂譜辨識的錯誤。
- 編輯音符:在鋼琴捲簾中按「編輯音符」,選擇要編修的樂器,然後:雙擊空白處新增音符、拖曳移動、拖曳右端改長度、Delete 刪除;↑ / ↓ 調半音(Shift 為八度),← / → 移動(Shift 改長度);Ctrl+Z 復原、Ctrl+Y 重做。
- Piano roll: one row per instrument, time runs left to right, with a cursor during playback.
- Notation: engraved by Verovio (loaded from the internet the first time); current notes are highlighted while playing, and clicking a note seeks there.
- Edit staff: switch to Notation and press Edit notes, click a note on the staff (it turns blue), then use the toolbar or keys: ↑ / ↓ semitone (Shift = octave), ← / → previous / next note, Shift+← / → earlier / later by a 16th, ] longer, [ shorter, . dot, Insert adds a note after it, Delete removes it, Ctrl+Z / Ctrl+Y undo / redo. The staff is re-engraved right away, which makes it handy for fixing recognition mistakes.
- Edit notes: in the piano roll press Edit notes and choose an instrument, then double-click to add a note, drag to move, drag the right end to resize, Delete to remove; ↑ / ↓ semitone (Shift = octave), ← / → move (Shift = length); Ctrl+Z undo, Ctrl+Y redo.
10. 錄製與輸出10. Recording and export
- 按「錄製」後開始演奏(可同時播放樂譜伴奏),再按一次停止;錄下的音符會加入樂譜。「清除錄製」可刪除它們。
- JSON:完整保存樂譜、錄製與演奏動作紀錄,可再匯入本頁。
- MIDI:可用於大多數音樂軟體。
- MusicXML:可用 MuseScore 等記譜軟體開啟與列印;三連音會以近似節奏表示。
- 音檔 WAV:依目前混音設定產生的 44.1 kHz 立體聲音檔。
- PNG:舞台工具列的相機按鈕可輸出舞台圖片。
- Press Record and play (the score can accompany you); press again to stop. Your notes are added to the score; Clear recording removes them.
- JSON: the full score, recordings and action log; can be imported again here.
- MIDI: works with most music software.
- MusicXML: opens and prints in MuseScore and similar programs; triplets are approximated.
- WAV: a 44.1 kHz stereo file rendered with the current mix.
- PNG: the camera button on the stage toolbar saves a picture of the stage.
11. 全螢幕、繪圖與畫質、縮放與背景11. Fullscreen, renderer & quality, zoom and backdrops
- 全螢幕(頁首):整個樂團填滿螢幕;再按一次或按 Esc 離開。
- 舞台全螢幕(舞台工具列):只放大舞台,適合投影或演出。
- 不支援全螢幕 API 的裝置(例如部分 iPhone)會改用「填滿視窗」模式,按同一個按鈕或 Esc 離開。
- 全螢幕時按「匯入樂譜」、「樂譜辨識」或「上傳圖片」,瀏覽器在開啟選檔視窗時會強制離開全螢幕;樂團會先自動填滿視窗,選完檔案後在畫面上點一下就回到全螢幕。
- 繪圖:「WebGPU 硬體」(預設)用顯示卡繪製舞台背景、光束與地板光暈,最省 CPU;瀏覽器不支援 WebGPU 時會自動改用 Canvas 硬體加速。「軟體」完全由 CPU 繪製,適合顯示卡驅動有問題的電腦。
- 畫質:「流暢」(預設,最高約 1600×900、每秒 30 張)、「標準」(最高 1920×1080、每秒 60 張)、「高」(最高 3840×2160 / 4K、每秒 60 張)。設定旁會顯示目前的繪圖方式、解析度與實際張數。播放卡頓時請選「流暢」;畫面只影響影像,不影響聲音的時間。
- 縮放:滑鼠滾輪縮放、拖曳移動、雙擊重設;觸控裝置可用工具列按鈕。
- 色系:頁首「色系」可選深夜(深色)或象牙、白紙、晴空、櫻花、薄荷五種淺色;文字、按鈕、對話框與樂譜區的顏色會一起改變以保持清楚易讀,設定會記在這台電腦的瀏覽器。舞台本身維持劇場風格的深色背景。
- 舞台背景:四張預設背景(音樂廳、黃昏屋頂、水彩、星空),也可上傳圖片或貼上圖片網址,並調整背景暗度。
- Fullscreen (header): the whole band fills the screen; press again or Esc to leave.
- Stage fullscreen (stage toolbar): enlarges only the stage, for projection or performance.
- Devices without the Fullscreen API (some iPhones) use a fill-the-window mode instead; the same button or Esc leaves it.
- When you press Import, Score recognition or Upload image in fullscreen, the browser leaves fullscreen to show the file chooser. The band keeps filling the window, and one click on it after choosing a file returns to fullscreen.
- Renderer: WebGPU hardware (default) draws the stage backdrop, light beams and floor glow on the graphics card and saves the most CPU; without WebGPU support it falls back to GPU-accelerated Canvas. Software draws everything on the CPU, for computers with graphics-driver problems.
- Quality: Smooth (default, up to about 1600×900 at 30 fps), Standard (up to 1920×1080 at 60 fps), High (up to 3840×2160 / 4K at 60 fps). The status next to it shows the renderer, resolution and actual frame rate. Choose Smooth if playback stutters; it only affects the picture, not the timing of the sound.
- Zoom: mouse wheel zooms, drag pans, double-click resets; on touch devices use the toolbar buttons.
- Theme: the header Theme menu offers Night (dark) or five light themes: Ivory, Paper, Sky, Sakura and Mint. Text, buttons, dialogs and the score area change color together so everything stays readable; the choice is remembered in this browser. The stage itself keeps its dark theater look.
- Stage art: four preset backdrops (concert hall, twilight rooftop, watercolor, starry night), or upload an image or paste an image URL, and set how dark it is.
12. 手機與平板12. Phones and tablets
- 版面會自動改為單欄,按鈕加大以便觸控;琴鍵可左右滑動,鼓墊為三欄。
- 第一次發聲前請先點一下畫面(瀏覽器規定須由使用者觸發聲音)。iPhone 請確認側邊的靜音開關沒有開啟。
- 橫向擺放並使用「全螢幕」可得到最大的舞台與鍵盤。
- 樂譜辨識在手機上也能使用,但大型 PDF 會比較慢,建議先關閉文字辨識。
- The layout becomes a single column with larger touch targets; the keyboard scrolls sideways and the pads use three columns.
- Tap the page once before the first sound (browsers require a user gesture). On iPhone, make sure the silent switch is off.
- Hold the device sideways and use Fullscreen for the largest stage and keyboard.
- Score recognition works on phones too, but large PDFs are slower; turn Text OCR off first.
13. 放到部落格(Blogger)與多個樂團13. Putting it on a blog (Blogger) and several bands
- 在 Blogger 文章編輯器切換到「HTML 檢視」,把 aeml-band.html 的全部內容貼上並發布。
- 同一篇文章要放更多樂團,在任何位置再貼一行:
<div class="aeml-band-slot" data-demo="comet" data-lang="en" data-art="starry"></div> - 選項:
data-demo= neon / morning / comet / arcade;data-lang= zh / zhen / en;data-art= hall / rooftop / watercolor / starry;data-theme= night / ivory / paper / sky / sakura / mint;data-render= webgpu / soft;data-quality= smooth / standard / high;data-src= 樂譜檔網址(MIDI / MusicXML / JSON,需允許跨網域讀取)。 - 開始播放其中一個樂團時,其他樂團會自動暫停。
- 網址加上
#aeml-manual會在開啟頁面時直接顯示本說明書,方便分享給學生。
- In the Blogger post editor switch to HTML view, paste the whole of aeml-band.html and publish.
- For more bands in the same post, add this line anywhere:
<div class="aeml-band-slot" data-demo="comet" data-lang="en" data-art="starry"></div> - Options:
data-demo= neon / morning / comet / arcade;data-lang= zh / zhen / en;data-art= hall / rooftop / watercolor / starry;data-theme= night / ivory / paper / sky / sakura / mint;data-render= webgpu / soft;data-quality= smooth / standard / high;data-src= URL of a score file (MIDI / MusicXML / JSON; the server must allow cross-origin reads). - Starting one band pauses the others.
- Add
#aeml-manualto the page address to open this manual on arrival, handy for sharing with students.
14. 常見問題14. FAQ
- 播放斷續、不流暢?
- 把「畫質」改為「流暢」,「繪圖」維持「WebGPU 硬體」;關閉其他耗資源的分頁。全螢幕在高解析度螢幕上需要繪製的像素最多。
- 沒有聲音?
- 先點一下樂團畫面;檢查音量滑桿、裝置音量、iPhone 靜音開關,以及該樂器是否為「關閉」或在混音台被靜音。
- 電腦鍵盤沒反應?
- 先點一下樂團畫面讓它取得焦點;輸入框或選單有焦點時按鍵不會演奏。
- 高音質一直在載入?
- 需要網路連線,且學校或公司網路可能封鎖 cdn.jsdelivr.net;此時會自動使用內建音色。
- 辨識結果有錯?
- 換用更清晰的掃描、手動指定拍號 / 調號 / 簡譜調性,或載入後用「編輯音符」修正。
- MIDI 鍵盤無法連接?
- 請使用 Chrome / Edge,允許 MIDI 存取,並確認網頁為 https。
- 頁尾出現「modified」?
- 表示程式碼被修改過,不是 AEML, NTUST 的原始版本;請重新貼上原始檔。
- Playback stutters?
- Set Quality to Smooth and keep Renderer on WebGPU hardware; close other heavy tabs. Fullscreen on a high-resolution screen has the most pixels to draw.
- No sound?
- Click the band first; check the volume slider, device volume, iPhone silent switch, and whether the instrument is Off or muted in the Mixer.
- Computer keys do nothing?
- Click the band so it has focus; keys don't play while a text box or menu has focus.
- HQ sounds keep loading?
- They need a connection, and school or company networks may block cdn.jsdelivr.net; the built-in voices are used instead.
- Recognition made mistakes?
- Use a cleaner scan, set the time / key signature or jianpu key yourself, or fix notes with Edit notes after loading.
- MIDI keyboard won't connect?
- Use Chrome / Edge, allow MIDI access, and make sure the page is served over https.
- The footer says "modified"?
- The code was changed and is not the AEML, NTUST original; paste the original file again.
15. 版權與隱私15. Copyright and privacy
AEML Online Band © 2026 AEML, NTUST(國立臺灣科技大學)。程式碼含簽章與完整性檢查,修改後會在頁尾標示為修改版。本頁不收集任何個人資料;按鍵設定與背景選擇只保存在你的瀏覽器中。高音質音色、五線譜排版、PDF 與文字辨識引擎於使用時從公開 CDN 載入。
AEML Online Band © 2026 AEML, NTUST (National Taiwan University of Science and Technology). The code is signed and integrity-checked; modified copies are marked in the footer. The page collects no personal data; key mappings and backdrop choices stay in your browser. HQ samples, notation engraving, PDF and OCR engines are loaded from public CDNs when used.
使用說明How to use
- 每個樂器有三種模式:自動=播放樂譜中的聲部;開啟=樂譜聲部靜音,由你親自演奏(錄製的音符仍會播放);關閉=完全靜音、不能演奏。預設皆為自動。
- 點選舞台上的樂器即可演奏(點在樂器左右不同位置有不同音高;鼓的不同位置對應不同鼓件),下方會開啟鍵盤或鼓墊,可用電腦鍵盤演奏。
- 滑鼠滾輪縮放、拖曳移動、雙擊重設;右上角可全螢幕或輸出 PNG。
- 「匯入樂譜」支援 .mid、.musicxml / .xml、.mxl 與本頁輸出的 .json;選擇 PDF / JPG / PNG 會自動開啟「樂譜辨識」。
- 按「錄製」記錄你的演奏,停止後會加入樂譜,可輸出為 JSON 或 MIDI。
- 舞台右上角的背景按鈕可快速切換四張預設背景(音樂廳、黃昏屋頂、水彩、星空,以 OpenArt 生成);「舞台背景」也可上傳圖片、貼上網址,或連到 OpenArt 生成新背景。
- MusicXML 匯入會展開反覆記號(反覆線、第一/第二結尾、D.C. / D.S. / Fine / Coda),讀取第一段歌詞,並演奏圓滑奏、斷奏、延長記號、倚音、顫音、漣音、迴音與琶音。
- 開啟「顯示歌詞」後,播放時會在上方逐字顯示歌詞,樂譜區下方也會顯示歌詞列(預設關閉)。
- 開啟「高音質」會從網路載入真實樂器取樣(FluidR3 GM SoundFont,第一次較慢);關閉則使用內建合成音色。
- 接上 MIDI 鍵盤後按「MIDI」即可用實體鍵盤演奏目前選取的樂器(支援延音踏板);「混音台」可調整每個樂器的音量、左右聲道、靜音/獨奏與殘響。
- 樂譜區可切換「鋼琴捲簾」與「五線譜」(Verovio 排版,播放時會標示目前音符);按「編修」可新增(雙擊)、拖曳、刪除音符,支援復原/重做(Ctrl+Z / Ctrl+Y)。
- 「輸出」可存成 JSON、MIDI、MusicXML(可用 MuseScore 開啟)或 WAV 音檔(依目前混音離線算出)。
- 同一篇文章可放多個樂團:在文章中再貼上
<div class="aeml-band-slot" data-demo="comet" data-lang="en" data-art="starry"></div>,開始播放其中一個時其他樂團會自動暫停。 - AI 編曲、OVE 匯入、樂譜列表存檔 / 讀檔與可愛音符的說明,請看「說明書」。
- Each instrument has three modes: Auto plays its part from the score; On mutes the score part so you play it yourself (your recorded notes still play); Off silences it completely. Default is Auto.
- Click an instrument on the stage to play it (left/right position changes pitch; on drums, the spot picks the drum). Its keyboard or drum pads open below and respond to your computer keyboard.
- Mouse wheel zooms, drag pans, double-click resets. Use the top-right buttons for fullscreen or PNG export.
- Import accepts .mid, .musicxml / .xml, .mxl and .json files exported here. Choosing a PDF / JPG / PNG opens Score recognition.
- Press Record to capture your playing; when you stop, it is added to the score and can be exported as JSON or MIDI.
- The backdrop button at the top right of the stage cycles four preset backdrops (concert hall, twilight rooftop, watercolor, starry night, made with OpenArt); Stage art also lets you upload an image, paste a URL, or generate a new one on OpenArt.
- MusicXML import expands repeats (repeat barlines, 1st/2nd endings, D.C. / D.S. / Fine / Coda), reads the first verse of lyrics, and performs slurs (legato), staccato, fermatas, grace notes, trills, mordents, turns and arpeggios.
- Turn on Show lyrics to see the lyrics highlighted as they are sung, plus a lyric lane in the score view (off by default).
- Turn on HQ to stream real instrument samples (FluidR3 GM SoundFont; slower the first time); off uses the built-in synth voices.
- Connect a MIDI keyboard and press MIDI to play the selected instrument (sustain pedal supported). The Mixer sets volume, pan, mute / solo per instrument and the reverb amount.
- The score area switches between Piano roll and Notation (engraved by Verovio, with the current notes highlighted). Press Edit to add (double-click), drag or delete notes, with undo / redo (Ctrl+Z / Ctrl+Y).
- Export saves JSON, MIDI, MusicXML (opens in MuseScore) or a WAV file rendered offline with the current mix.
- You can put several bands in one post: add
<div class="aeml-band-slot" data-demo="comet" data-lang="en" data-art="starry"></div>anywhere in the post. Starting one band pauses the others. - See the Manual for AI arrangement, OVE import, saving / loading the score list and cute notes.
完整操作請看For full instructions see the 線上使用說明書User manual
JSON
{"format":"AEML-BAND-SCORE","version":1,"title":"My Song","bpm":120,
"noteFormat":"[time_s, dur_s, midi, velocity_0_1, recorded_0_1]",
"tracks":[{"ins":"piano","notes":[[0,0.5,60,0.8,0],[0.5,0.5,64,0.8,0]]},
{"ins":"drums","notes":[[0,0.1,36,1,0]]}]}
ins: vocal piano epiano synth pad strings brass sax flute accordion
aguitar eguitar bass bells drums perc
© 2026 AEML, NTUST
No comments:
Post a Comment