@onjmin/dtm 1.0.6 → 1.0.7

package/dist/index.d.mts

@@ -1996,6 +1996,16 @@ declare const drawGrid: (noteLengthSteps?: number) => void;
  * 指定されたノートの配列を描画します。
  */
 declare const drawNotes: (notes: Note[], color?: number[]) => void;
+/**
+ * ノートの上に歌詞（かな）を重ねて描画します。
+ *
+ * 音節の割り当ては発音側（StreamVoiceTrack の組み立て）と同じ規則で、
+ * startStep 昇順に並べたノートの i 番目へ syllables[i] を対応させます。
+ * 音節が足りないぶんのノートには何も描きません。
+ *
+ * 文字はノート矩形でクリップするため、隣のノートへはみ出しません。
+ */
+declare const drawNoteLyrics: (notes: Note[], syllables: string[]) => void;
 /**
  * 選択範囲の四角形を描画します。
  */
@@ -2473,4 +2483,4 @@ declare const encodeWavPCM16: (channels: Float32Array[], sampleRate: number) =>
 /** Float32Array のチャンクを1本へ連結する。 */
 declare const concatFloat32: (chunks: Float32Array[]) => Float32Array;
 
-export { type AddNoteOptions, type AnyDrumPattern, type ApplyChordOptions, type ChordPatternType, type ChordPlacement, type ChordPlayerInstance, type ConsumedSyllable, type CoreEventHandlers, type CustomVocalDef, DAW_CSS, DEFAULT_BPM, DEFAULT_GATE, DEFAULT_PAN, DEFAULT_PLAYBACK_VELOCITY, DEFAULT_STEPS_PER_BAR, DEFAULT_VELOCITY, DEFAULT_VOCAL_VOLUME, DRUM_FONT, DRUM_KEYS, DRUM_PATTERNS, type DawInstance, type DawMode, type DawOptions, type DawViewState, type DrumPattern, type DrumPatternDef, type DtmStudio, type DtmStudioEngines, type DtmStudioOptions, type ExportMidiOptions, type FadeScheduleParams, GM_INSTRUMENT_NAMES, INSTRUMENT_PRESETS, type InstrumentPreset, KOE_BASE_URL, KOE_VOICEBANKS, KOE_VOICEBANK_LABELS, KOE_VOICEBANK_TERMS, type KoeVoiceOptions, LinkedList, type LoopConfig, type LoopPoint, type LyricSyllable, type LyricSyncData, type LyricTrack, type LyricsConductor, MAX_VOCAL_VOLUME, MMLCore, type MMLDisplayToken, type MMLNotePlacement, MML_END_MARKER, type MidiExtraction, type MidiNotePlacement, MidiSearchClient, type MidiSearchConfig, type MidiTrackAnalysis, type MmlMeta, type MmlPlayback, type MmlPlayerInstance, type MmlPlayerOptions, type ModeSwitchInstance, type ModeSwitchOptions, type MountChordPlayerOptions, type MountEditorOptions, type MountPlayerOptions, type Note, type NoteData, type NoteRemove, type OctaveUnisonMode, PITCH_MAP, PREWARM_NOTES, type ParseMMLOptions, type ParseMidiFn, type ParsedMML, type PianoRollInstance, type PianoRollOptions, type PicotuneSearchParams, type PicotuneSong, type PitchToken, type PlayChordsOptions, type PlayDrumEvent, type PlayMmlOptions, type PlayNoteEvent, type PlayNoteOptions, type PlayPlacementsOptions, type PlaySingingMmlOptions, type PlaybackCue, type PlaybackState, type PresetSelectInstance, type PresetSelectOptions, type PreviewSoundCallback, type RenderConfig, type Sequencer, type SequencerOptions, type SequencerTrack, type SingingVoices, type SingingVoicesOptions, type StreamPlaybackOptions, type StreamVoiceNote, type StreamVoiceTrack, type Synth, TRACKS_ADVANCED, TRACKS_SIMPLE, type ToolMode, type TrackConfig, VIBRATO_MIN_SEC, VOICE_IMAGES, VOICE_IMAGE_KEY, type VoiceExpression, type VoiceModel, type VoiceRegistry, analyzeMidiTracks, applyHarmonicFilter, applyMonophonic, buildChordPlacements, buildDrumPatternJson, buildNameToKeyMapping, collectPitchTokens, concatFloat32, createAudioContext, createDtmStudio, createKlattVoice, createKoeVoice, createLyricsConductor, createPianoRoll, createSequencer, createSingingVoices, createSynth, createVoiceRegistry, decodeMml, decomposeToMonophonic, drawGrid, drawHeader, drawKeyboard, drawNotes, drawSelectedNotes, drawSelectionRect, encodeMml, encodeWavPCM16, exportMIDI, extractDrumPatternFromNotes, extractMidiDrumPattern, extractMidiPlacements, extractMidiPlacementsByTrack, formatMmlMeta, freqFromPitch, generateRandomPattern, getDrawOffset, getDrumPatternKeys, getGridCanvas, getGridContext, getGridPosition, getHeaderCanvas, getMidiBPM, getRenderConfig, getXY, icon, init, injectStyles, isChordHeavyTrack, isPlausibleMidiTranscription, isValidHttpUrl, koeUrl, mountChordPlayer, mountDAW, mountMmlPlayer, normalizeDrumPatterns, normalizeLyrics, onClick, panToStereo, parseCustomVocals, parseLyrics, parseMML, parseMmlMeta, playChords, playMML, playNote, playPlacements, playSingingMML, resolveDrumPattern, resolveLoopPoint, setBackgroundActive, setDrawOffset, shiftNotes, showLoadingOverlay, stripCustomVocals, stripLyrics, stripMmlMeta, transposeNotes, vocalVolumeToGain };
+export { type AddNoteOptions, type AnyDrumPattern, type ApplyChordOptions, type ChordPatternType, type ChordPlacement, type ChordPlayerInstance, type ConsumedSyllable, type CoreEventHandlers, type CustomVocalDef, DAW_CSS, DEFAULT_BPM, DEFAULT_GATE, DEFAULT_PAN, DEFAULT_PLAYBACK_VELOCITY, DEFAULT_STEPS_PER_BAR, DEFAULT_VELOCITY, DEFAULT_VOCAL_VOLUME, DRUM_FONT, DRUM_KEYS, DRUM_PATTERNS, type DawInstance, type DawMode, type DawOptions, type DawViewState, type DrumPattern, type DrumPatternDef, type DtmStudio, type DtmStudioEngines, type DtmStudioOptions, type ExportMidiOptions, type FadeScheduleParams, GM_INSTRUMENT_NAMES, INSTRUMENT_PRESETS, type InstrumentPreset, KOE_BASE_URL, KOE_VOICEBANKS, KOE_VOICEBANK_LABELS, KOE_VOICEBANK_TERMS, type KoeVoiceOptions, LinkedList, type LoopConfig, type LoopPoint, type LyricSyllable, type LyricSyncData, type LyricTrack, type LyricsConductor, MAX_VOCAL_VOLUME, MMLCore, type MMLDisplayToken, type MMLNotePlacement, MML_END_MARKER, type MidiExtraction, type MidiNotePlacement, MidiSearchClient, type MidiSearchConfig, type MidiTrackAnalysis, type MmlMeta, type MmlPlayback, type MmlPlayerInstance, type MmlPlayerOptions, type ModeSwitchInstance, type ModeSwitchOptions, type MountChordPlayerOptions, type MountEditorOptions, type MountPlayerOptions, type Note, type NoteData, type NoteRemove, type OctaveUnisonMode, PITCH_MAP, PREWARM_NOTES, type ParseMMLOptions, type ParseMidiFn, type ParsedMML, type PianoRollInstance, type PianoRollOptions, type PicotuneSearchParams, type PicotuneSong, type PitchToken, type PlayChordsOptions, type PlayDrumEvent, type PlayMmlOptions, type PlayNoteEvent, type PlayNoteOptions, type PlayPlacementsOptions, type PlaySingingMmlOptions, type PlaybackCue, type PlaybackState, type PresetSelectInstance, type PresetSelectOptions, type PreviewSoundCallback, type RenderConfig, type Sequencer, type SequencerOptions, type SequencerTrack, type SingingVoices, type SingingVoicesOptions, type StreamPlaybackOptions, type StreamVoiceNote, type StreamVoiceTrack, type Synth, TRACKS_ADVANCED, TRACKS_SIMPLE, type ToolMode, type TrackConfig, VIBRATO_MIN_SEC, VOICE_IMAGES, VOICE_IMAGE_KEY, type VoiceExpression, type VoiceModel, type VoiceRegistry, analyzeMidiTracks, applyHarmonicFilter, applyMonophonic, buildChordPlacements, buildDrumPatternJson, buildNameToKeyMapping, collectPitchTokens, concatFloat32, createAudioContext, createDtmStudio, createKlattVoice, createKoeVoice, createLyricsConductor, createPianoRoll, createSequencer, createSingingVoices, createSynth, createVoiceRegistry, decodeMml, decomposeToMonophonic, drawGrid, drawHeader, drawKeyboard, drawNoteLyrics, drawNotes, drawSelectedNotes, drawSelectionRect, encodeMml, encodeWavPCM16, exportMIDI, extractDrumPatternFromNotes, extractMidiDrumPattern, extractMidiPlacements, extractMidiPlacementsByTrack, formatMmlMeta, freqFromPitch, generateRandomPattern, getDrawOffset, getDrumPatternKeys, getGridCanvas, getGridContext, getGridPosition, getHeaderCanvas, getMidiBPM, getRenderConfig, getXY, icon, init, injectStyles, isChordHeavyTrack, isPlausibleMidiTranscription, isValidHttpUrl, koeUrl, mountChordPlayer, mountDAW, mountMmlPlayer, normalizeDrumPatterns, normalizeLyrics, onClick, panToStereo, parseCustomVocals, parseLyrics, parseMML, parseMmlMeta, playChords, playMML, playNote, playPlacements, playSingingMML, resolveDrumPattern, resolveLoopPoint, setBackgroundActive, setDrawOffset, shiftNotes, showLoadingOverlay, stripCustomVocals, stripLyrics, stripMmlMeta, transposeNotes, vocalVolumeToGain };

package/dist/index.d.ts

@@ -1996,6 +1996,16 @@ declare const drawGrid: (noteLengthSteps?: number) => void;
  * 指定されたノートの配列を描画します。
  */
 declare const drawNotes: (notes: Note[], color?: number[]) => void;
+/**
+ * ノートの上に歌詞（かな）を重ねて描画します。
+ *
+ * 音節の割り当ては発音側（StreamVoiceTrack の組み立て）と同じ規則で、
+ * startStep 昇順に並べたノートの i 番目へ syllables[i] を対応させます。
+ * 音節が足りないぶんのノートには何も描きません。
+ *
+ * 文字はノート矩形でクリップするため、隣のノートへはみ出しません。
+ */
+declare const drawNoteLyrics: (notes: Note[], syllables: string[]) => void;
 /**
  * 選択範囲の四角形を描画します。
  */
@@ -2473,4 +2483,4 @@ declare const encodeWavPCM16: (channels: Float32Array[], sampleRate: number) =>
 /** Float32Array のチャンクを1本へ連結する。 */
 declare const concatFloat32: (chunks: Float32Array[]) => Float32Array;
 
-export { type AddNoteOptions, type AnyDrumPattern, type ApplyChordOptions, type ChordPatternType, type ChordPlacement, type ChordPlayerInstance, type ConsumedSyllable, type CoreEventHandlers, type CustomVocalDef, DAW_CSS, DEFAULT_BPM, DEFAULT_GATE, DEFAULT_PAN, DEFAULT_PLAYBACK_VELOCITY, DEFAULT_STEPS_PER_BAR, DEFAULT_VELOCITY, DEFAULT_VOCAL_VOLUME, DRUM_FONT, DRUM_KEYS, DRUM_PATTERNS, type DawInstance, type DawMode, type DawOptions, type DawViewState, type DrumPattern, type DrumPatternDef, type DtmStudio, type DtmStudioEngines, type DtmStudioOptions, type ExportMidiOptions, type FadeScheduleParams, GM_INSTRUMENT_NAMES, INSTRUMENT_PRESETS, type InstrumentPreset, KOE_BASE_URL, KOE_VOICEBANKS, KOE_VOICEBANK_LABELS, KOE_VOICEBANK_TERMS, type KoeVoiceOptions, LinkedList, type LoopConfig, type LoopPoint, type LyricSyllable, type LyricSyncData, type LyricTrack, type LyricsConductor, MAX_VOCAL_VOLUME, MMLCore, type MMLDisplayToken, type MMLNotePlacement, MML_END_MARKER, type MidiExtraction, type MidiNotePlacement, MidiSearchClient, type MidiSearchConfig, type MidiTrackAnalysis, type MmlMeta, type MmlPlayback, type MmlPlayerInstance, type MmlPlayerOptions, type ModeSwitchInstance, type ModeSwitchOptions, type MountChordPlayerOptions, type MountEditorOptions, type MountPlayerOptions, type Note, type NoteData, type NoteRemove, type OctaveUnisonMode, PITCH_MAP, PREWARM_NOTES, type ParseMMLOptions, type ParseMidiFn, type ParsedMML, type PianoRollInstance, type PianoRollOptions, type PicotuneSearchParams, type PicotuneSong, type PitchToken, type PlayChordsOptions, type PlayDrumEvent, type PlayMmlOptions, type PlayNoteEvent, type PlayNoteOptions, type PlayPlacementsOptions, type PlaySingingMmlOptions, type PlaybackCue, type PlaybackState, type PresetSelectInstance, type PresetSelectOptions, type PreviewSoundCallback, type RenderConfig, type Sequencer, type SequencerOptions, type SequencerTrack, type SingingVoices, type SingingVoicesOptions, type StreamPlaybackOptions, type StreamVoiceNote, type StreamVoiceTrack, type Synth, TRACKS_ADVANCED, TRACKS_SIMPLE, type ToolMode, type TrackConfig, VIBRATO_MIN_SEC, VOICE_IMAGES, VOICE_IMAGE_KEY, type VoiceExpression, type VoiceModel, type VoiceRegistry, analyzeMidiTracks, applyHarmonicFilter, applyMonophonic, buildChordPlacements, buildDrumPatternJson, buildNameToKeyMapping, collectPitchTokens, concatFloat32, createAudioContext, createDtmStudio, createKlattVoice, createKoeVoice, createLyricsConductor, createPianoRoll, createSequencer, createSingingVoices, createSynth, createVoiceRegistry, decodeMml, decomposeToMonophonic, drawGrid, drawHeader, drawKeyboard, drawNotes, drawSelectedNotes, drawSelectionRect, encodeMml, encodeWavPCM16, exportMIDI, extractDrumPatternFromNotes, extractMidiDrumPattern, extractMidiPlacements, extractMidiPlacementsByTrack, formatMmlMeta, freqFromPitch, generateRandomPattern, getDrawOffset, getDrumPatternKeys, getGridCanvas, getGridContext, getGridPosition, getHeaderCanvas, getMidiBPM, getRenderConfig, getXY, icon, init, injectStyles, isChordHeavyTrack, isPlausibleMidiTranscription, isValidHttpUrl, koeUrl, mountChordPlayer, mountDAW, mountMmlPlayer, normalizeDrumPatterns, normalizeLyrics, onClick, panToStereo, parseCustomVocals, parseLyrics, parseMML, parseMmlMeta, playChords, playMML, playNote, playPlacements, playSingingMML, resolveDrumPattern, resolveLoopPoint, setBackgroundActive, setDrawOffset, shiftNotes, showLoadingOverlay, stripCustomVocals, stripLyrics, stripMmlMeta, transposeNotes, vocalVolumeToGain };
+export { type AddNoteOptions, type AnyDrumPattern, type ApplyChordOptions, type ChordPatternType, type ChordPlacement, type ChordPlayerInstance, type ConsumedSyllable, type CoreEventHandlers, type CustomVocalDef, DAW_CSS, DEFAULT_BPM, DEFAULT_GATE, DEFAULT_PAN, DEFAULT_PLAYBACK_VELOCITY, DEFAULT_STEPS_PER_BAR, DEFAULT_VELOCITY, DEFAULT_VOCAL_VOLUME, DRUM_FONT, DRUM_KEYS, DRUM_PATTERNS, type DawInstance, type DawMode, type DawOptions, type DawViewState, type DrumPattern, type DrumPatternDef, type DtmStudio, type DtmStudioEngines, type DtmStudioOptions, type ExportMidiOptions, type FadeScheduleParams, GM_INSTRUMENT_NAMES, INSTRUMENT_PRESETS, type InstrumentPreset, KOE_BASE_URL, KOE_VOICEBANKS, KOE_VOICEBANK_LABELS, KOE_VOICEBANK_TERMS, type KoeVoiceOptions, LinkedList, type LoopConfig, type LoopPoint, type LyricSyllable, type LyricSyncData, type LyricTrack, type LyricsConductor, MAX_VOCAL_VOLUME, MMLCore, type MMLDisplayToken, type MMLNotePlacement, MML_END_MARKER, type MidiExtraction, type MidiNotePlacement, MidiSearchClient, type MidiSearchConfig, type MidiTrackAnalysis, type MmlMeta, type MmlPlayback, type MmlPlayerInstance, type MmlPlayerOptions, type ModeSwitchInstance, type ModeSwitchOptions, type MountChordPlayerOptions, type MountEditorOptions, type MountPlayerOptions, type Note, type NoteData, type NoteRemove, type OctaveUnisonMode, PITCH_MAP, PREWARM_NOTES, type ParseMMLOptions, type ParseMidiFn, type ParsedMML, type PianoRollInstance, type PianoRollOptions, type PicotuneSearchParams, type PicotuneSong, type PitchToken, type PlayChordsOptions, type PlayDrumEvent, type PlayMmlOptions, type PlayNoteEvent, type PlayNoteOptions, type PlayPlacementsOptions, type PlaySingingMmlOptions, type PlaybackCue, type PlaybackState, type PresetSelectInstance, type PresetSelectOptions, type PreviewSoundCallback, type RenderConfig, type Sequencer, type SequencerOptions, type SequencerTrack, type SingingVoices, type SingingVoicesOptions, type StreamPlaybackOptions, type StreamVoiceNote, type StreamVoiceTrack, type Synth, TRACKS_ADVANCED, TRACKS_SIMPLE, type ToolMode, type TrackConfig, VIBRATO_MIN_SEC, VOICE_IMAGES, VOICE_IMAGE_KEY, type VoiceExpression, type VoiceModel, type VoiceRegistry, analyzeMidiTracks, applyHarmonicFilter, applyMonophonic, buildChordPlacements, buildDrumPatternJson, buildNameToKeyMapping, collectPitchTokens, concatFloat32, createAudioContext, createDtmStudio, createKlattVoice, createKoeVoice, createLyricsConductor, createPianoRoll, createSequencer, createSingingVoices, createSynth, createVoiceRegistry, decodeMml, decomposeToMonophonic, drawGrid, drawHeader, drawKeyboard, drawNoteLyrics, drawNotes, drawSelectedNotes, drawSelectionRect, encodeMml, encodeWavPCM16, exportMIDI, extractDrumPatternFromNotes, extractMidiDrumPattern, extractMidiPlacements, extractMidiPlacementsByTrack, formatMmlMeta, freqFromPitch, generateRandomPattern, getDrawOffset, getDrumPatternKeys, getGridCanvas, getGridContext, getGridPosition, getHeaderCanvas, getMidiBPM, getRenderConfig, getXY, icon, init, injectStyles, isChordHeavyTrack, isPlausibleMidiTranscription, isValidHttpUrl, koeUrl, mountChordPlayer, mountDAW, mountMmlPlayer, normalizeDrumPatterns, normalizeLyrics, onClick, panToStereo, parseCustomVocals, parseLyrics, parseMML, parseMmlMeta, playChords, playMML, playNote, playPlacements, playSingingMML, resolveDrumPattern, resolveLoopPoint, setBackgroundActive, setDrawOffset, shiftNotes, showLoadingOverlay, stripCustomVocals, stripLyrics, stripMmlMeta, transposeNotes, vocalVolumeToGain };

package/dist/index.js

@@ -72,6 +72,7 @@ __export(index_exports, {
   drawGrid: () => drawGrid,
   drawHeader: () => drawHeader,
   drawKeyboard: () => drawKeyboard,
+  drawNoteLyrics: () => drawNoteLyrics,
   drawNotes: () => drawNotes,
   drawSelectedNotes: () => drawSelectedNotes,
   drawSelectionRect: () => drawSelectionRect,
@@ -13140,6 +13141,43 @@ var drawNotes = (notes, color = [59, 130, 246, 1]) => {
     g_grid_ctx.fillRect(renderX + 1, renderY + 1, w - 2, h - 2);
   }
 };
+var drawNoteLyrics = (notes, syllables) => {
+  if (syllables.length === 0) return;
+  const { keyHeight, stepWidth, keyCount, pitchRangeStart } = g_config;
+  if (keyHeight < 10) return;
+  const fontSize = Math.min(12, Math.floor(keyHeight * 0.85));
+  const sorted = [...notes].sort((a, b) => a.startStep - b.startStep);
+  const count = Math.min(sorted.length, syllables.length);
+  g_grid_ctx.save();
+  g_grid_ctx.font = `${fontSize}px 'k8x12',sans-serif`;
+  g_grid_ctx.textAlign = "left";
+  g_grid_ctx.textBaseline = "middle";
+  g_grid_ctx.lineWidth = 3;
+  g_grid_ctx.lineJoin = "round";
+  for (let i2 = 0; i2 < count; i2++) {
+    const kana = syllables[i2];
+    if (!kana) continue;
+    const note = sorted[i2];
+    const renderX = note.startStep * stepWidth - g_draw_offset_x;
+    const renderY = (keyCount - 1 - (note.pitch - pitchRangeStart)) * keyHeight - g_draw_offset_y;
+    const w = note.durationSteps * stepWidth;
+    if (w < 6) continue;
+    if (renderX + w < 0 || renderX > g_grid_canvas.width) continue;
+    if (renderY + keyHeight < 0 || renderY > g_grid_canvas.height) continue;
+    const textX = renderX + 2;
+    const textY = renderY + keyHeight / 2;
+    g_grid_ctx.save();
+    g_grid_ctx.beginPath();
+    g_grid_ctx.rect(renderX + 1, renderY + 1, w - 2, keyHeight - 2);
+    g_grid_ctx.clip();
+    g_grid_ctx.strokeStyle = "rgba(0,0,0,0.85)";
+    g_grid_ctx.strokeText(kana, textX, textY);
+    g_grid_ctx.fillStyle = "#fff1e8";
+    g_grid_ctx.fillText(kana, textX, textY);
+    g_grid_ctx.restore();
+  }
+  g_grid_ctx.restore();
+};
 var drawSelectionRect = (rect) => {
   if (!rect) return;
   g_grid_ctx.save();
@@ -14491,6 +14529,19 @@ var mountDAW = (target, options = {}) => {
     return map;
   };
   const getActive = () => trackStates.find((t) => t.config.id === activeTrackId) ?? trackStates[0];
+  let lyricKanaCacheText = "";
+  let lyricKanaCache = [];
+  const getActiveLyricKana = () => {
+    const t = getActive();
+    if (!t?.lyricModel.trim()) return [];
+    const text = t.lyrics.trim();
+    if (!text) return [];
+    if (text !== lyricKanaCacheText) {
+      lyricKanaCacheText = text;
+      lyricKanaCache = normalizeLyrics(text).map((sy) => sy.kana);
+    }
+    return lyricKanaCache;
+  };
   let showModal;
   const getSongEndStepExact = () => {
     let maxEndStep = 0;
@@ -14555,12 +14606,16 @@ var mountDAW = (target, options = {}) => {
   };
   const redrawAll = () => {
     drawGrid(gridLineSteps);
+    let lyricTargetNotes = null;
     for (const t of trackStates) {
       if (hiddenTracks.has(t.config.id)) continue;
       if (isSolo && t.config.id !== activeTrackId) continue;
       const [r, g, b] = t.config.color;
-      const a = t.config.id === activeTrackId ? 1 : 0.3;
-      drawNotes(t.core.getNotes(), [r, g, b, a]);
+      const isActive = t.config.id === activeTrackId;
+      const a = isActive ? 1 : 0.3;
+      const notes = t.core.getNotes();
+      drawNotes(notes, [r, g, b, a]);
+      if (isActive) lyricTargetNotes = notes;
     }
     if (activeToolMode === "select" && selectionRect) {
       const ctx = getGridContext();
@@ -14591,6 +14646,8 @@ var mountDAW = (target, options = {}) => {
         1
       ]);
     }
+    if (lyricTargetNotes)
+      drawNoteLyrics(lyricTargetNotes, getActiveLyricKana());
     drawStartLine();
     if (playbackState === "playing") drawPlayhead();
     updateScrollbars();
@@ -16057,6 +16114,7 @@ var mountDAW = (target, options = {}) => {
         syncLyricVisibility();
         syncInstDisabled();
         syncVelocityDisabled();
+        redrawAll();
         fireLyricsChange(active);
         reloadVoicesForModel(active.lyricModel);
       });
@@ -16098,6 +16156,7 @@ var mountDAW = (target, options = {}) => {
           label: existing?.label
         });
         active.lyricModel = key;
+        redrawAll();
         fireLyricsChange(active);
         updateTrackPanel();
         reloadVoicesForModel(key);
@@ -16117,6 +16176,7 @@ var mountDAW = (target, options = {}) => {
       lyricInput.addEventListener("input", () => {
         active.lyrics = lyricInput.value;
         updateLyricCount();
+        redrawAll();
         fireLyricsChange(active);
       });
       lyricVol.addEventListener("input", () => {
@@ -18268,6 +18328,7 @@ var mountDAW = (target, options = {}) => {
       t.vocalBreathiness = data.vocalBreathiness ?? 50;
       t.vocalTension = data.vocalTension ?? 50;
       t.vocalOctaveUnison = data.vocalOctaveUnison ?? "none";
+      if (t.config.id === activeTrackId) redrawAll();
     },
     applyTrackInstrument: (trackIndex, instrumentName) => {
       const t = trackStates[trackIndex];
@@ -20457,6 +20518,7 @@ var createDtmStudio = async (options = {}) => {
   drawGrid,
   drawHeader,
   drawKeyboard,
+  drawNoteLyrics,
   drawNotes,
   drawSelectedNotes,
   drawSelectionRect,

package/dist/index.mjs

@@ -13007,6 +13007,43 @@ var drawNotes = (notes, color = [59, 130, 246, 1]) => {
     g_grid_ctx.fillRect(renderX + 1, renderY + 1, w - 2, h - 2);
   }
 };
+var drawNoteLyrics = (notes, syllables) => {
+  if (syllables.length === 0) return;
+  const { keyHeight, stepWidth, keyCount, pitchRangeStart } = g_config;
+  if (keyHeight < 10) return;
+  const fontSize = Math.min(12, Math.floor(keyHeight * 0.85));
+  const sorted = [...notes].sort((a, b) => a.startStep - b.startStep);
+  const count = Math.min(sorted.length, syllables.length);
+  g_grid_ctx.save();
+  g_grid_ctx.font = `${fontSize}px 'k8x12',sans-serif`;
+  g_grid_ctx.textAlign = "left";
+  g_grid_ctx.textBaseline = "middle";
+  g_grid_ctx.lineWidth = 3;
+  g_grid_ctx.lineJoin = "round";
+  for (let i2 = 0; i2 < count; i2++) {
+    const kana = syllables[i2];
+    if (!kana) continue;
+    const note = sorted[i2];
+    const renderX = note.startStep * stepWidth - g_draw_offset_x;
+    const renderY = (keyCount - 1 - (note.pitch - pitchRangeStart)) * keyHeight - g_draw_offset_y;
+    const w = note.durationSteps * stepWidth;
+    if (w < 6) continue;
+    if (renderX + w < 0 || renderX > g_grid_canvas.width) continue;
+    if (renderY + keyHeight < 0 || renderY > g_grid_canvas.height) continue;
+    const textX = renderX + 2;
+    const textY = renderY + keyHeight / 2;
+    g_grid_ctx.save();
+    g_grid_ctx.beginPath();
+    g_grid_ctx.rect(renderX + 1, renderY + 1, w - 2, keyHeight - 2);
+    g_grid_ctx.clip();
+    g_grid_ctx.strokeStyle = "rgba(0,0,0,0.85)";
+    g_grid_ctx.strokeText(kana, textX, textY);
+    g_grid_ctx.fillStyle = "#fff1e8";
+    g_grid_ctx.fillText(kana, textX, textY);
+    g_grid_ctx.restore();
+  }
+  g_grid_ctx.restore();
+};
 var drawSelectionRect = (rect) => {
   if (!rect) return;
   g_grid_ctx.save();
@@ -14358,6 +14395,19 @@ var mountDAW = (target, options = {}) => {
     return map;
   };
   const getActive = () => trackStates.find((t) => t.config.id === activeTrackId) ?? trackStates[0];
+  let lyricKanaCacheText = "";
+  let lyricKanaCache = [];
+  const getActiveLyricKana = () => {
+    const t = getActive();
+    if (!t?.lyricModel.trim()) return [];
+    const text = t.lyrics.trim();
+    if (!text) return [];
+    if (text !== lyricKanaCacheText) {
+      lyricKanaCacheText = text;
+      lyricKanaCache = normalizeLyrics(text).map((sy) => sy.kana);
+    }
+    return lyricKanaCache;
+  };
   let showModal;
   const getSongEndStepExact = () => {
     let maxEndStep = 0;
@@ -14422,12 +14472,16 @@ var mountDAW = (target, options = {}) => {
   };
   const redrawAll = () => {
     drawGrid(gridLineSteps);
+    let lyricTargetNotes = null;
     for (const t of trackStates) {
       if (hiddenTracks.has(t.config.id)) continue;
       if (isSolo && t.config.id !== activeTrackId) continue;
       const [r, g, b] = t.config.color;
-      const a = t.config.id === activeTrackId ? 1 : 0.3;
-      drawNotes(t.core.getNotes(), [r, g, b, a]);
+      const isActive = t.config.id === activeTrackId;
+      const a = isActive ? 1 : 0.3;
+      const notes = t.core.getNotes();
+      drawNotes(notes, [r, g, b, a]);
+      if (isActive) lyricTargetNotes = notes;
     }
     if (activeToolMode === "select" && selectionRect) {
       const ctx = getGridContext();
@@ -14458,6 +14512,8 @@ var mountDAW = (target, options = {}) => {
         1
       ]);
     }
+    if (lyricTargetNotes)
+      drawNoteLyrics(lyricTargetNotes, getActiveLyricKana());
     drawStartLine();
     if (playbackState === "playing") drawPlayhead();
     updateScrollbars();
@@ -15924,6 +15980,7 @@ var mountDAW = (target, options = {}) => {
         syncLyricVisibility();
         syncInstDisabled();
         syncVelocityDisabled();
+        redrawAll();
         fireLyricsChange(active);
         reloadVoicesForModel(active.lyricModel);
       });
@@ -15965,6 +16022,7 @@ var mountDAW = (target, options = {}) => {
           label: existing?.label
         });
         active.lyricModel = key;
+        redrawAll();
         fireLyricsChange(active);
         updateTrackPanel();
         reloadVoicesForModel(key);
@@ -15984,6 +16042,7 @@ var mountDAW = (target, options = {}) => {
       lyricInput.addEventListener("input", () => {
         active.lyrics = lyricInput.value;
         updateLyricCount();
+        redrawAll();
         fireLyricsChange(active);
       });
       lyricVol.addEventListener("input", () => {
@@ -18135,6 +18194,7 @@ var mountDAW = (target, options = {}) => {
       t.vocalBreathiness = data.vocalBreathiness ?? 50;
       t.vocalTension = data.vocalTension ?? 50;
       t.vocalOctaveUnison = data.vocalOctaveUnison ?? "none";
+      if (t.config.id === activeTrackId) redrawAll();
     },
     applyTrackInstrument: (trackIndex, instrumentName) => {
       const t = trackStates[trackIndex];
@@ -20322,6 +20382,7 @@ export {
   drawGrid,
   drawHeader,
   drawKeyboard,
+  drawNoteLyrics,
   drawNotes,
   drawSelectedNotes,
   drawSelectionRect,

package/package.json

@@ -2,7 +2,7 @@
   "author": "onjmin",
   "license": "MIT",
   "name": "@onjmin/dtm",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "MMLを中間言語に用いた、モバイルファーストなDAW / ピアノロール打ち込みコンポーネント",
   "homepage": "https://onjmin.github.io/dtm",
   "repository": {