@onjmin/dtm 0.1.66 → 0.1.68

package/dist/index.mjs

@@ -2653,54 +2653,73 @@ var createSingingVoices = (ctx, destination, options = {}) => {
       forEachSungNote(track, (note, prevVowel) => {
         items.push({ note, prevVowel });
       });
+      if (items.length === 0) return;
       const peak = Math.max(1e-4, track.volume);
-      for (const { note, prevVowel } of items) {
-        if (session !== streamSession) return;
-        while (note.startSec - (ctx.currentTime - anchorTime) > STREAM_LOOKAHEAD_SEC) {
-          await new Promise((resolve) => setTimeout(resolve, STREAM_POLL_MS));
+      const loopStartSec = opts?.loopStartSec ?? 0;
+      let loopOffsetSec = 0;
+      let pass = 0;
+      do {
+        for (const { note, prevVowel } of items) {
           if (session !== streamSession) return;
-        }
-        if (opts?.isAudible && !opts.isAudible(track)) continue;
-        const t0 = anchorTime + note.startSec;
-        if (model.renderToCache && model.scheduleCached) {
-          const renderToCache = model.renderToCache;
-          const scheduleCached = model.scheduleCached;
-          void (async () => {
-            const key = await renderToCache(
-              note.syllable,
-              prevVowel,
-              note.pitch,
-              note.durationSec * 1e3
-            );
+          if (pass > 0 && note.startSec < loopStartSec - 1e-4) {
+            continue;
+          }
+          if (opts?.loopLengthSec && opts.loopLengthSec > 0 && note.startSec >= loopStartSec + opts.loopLengthSec - 1e-4) {
+            continue;
+          }
+          const startSec = note.startSec + loopOffsetSec;
+          while (startSec - (ctx.currentTime - anchorTime) > STREAM_LOOKAHEAD_SEC) {
+            await new Promise((resolve) => setTimeout(resolve, STREAM_POLL_MS));
             if (session !== streamSession) return;
-            if (key) {
-              const delay = ctx.currentTime - t0;
-              if (delay < 0.05) {
-                scheduleCached(key, t0, peak, track.pan);
-                opts?.onScheduled?.(track, note, t0);
-              } else {
-                console.warn(
-                  `[dtm] Synthesizer late skip: ${note.syllable.kana} at ${note.startSec}s (delayed by ${delay.toFixed(3)}s)`
-                );
-                opts?.onLateSkip?.(note, delay);
+          }
+          if (opts?.isAudible && !opts.isAudible(track)) continue;
+          const t0 = anchorTime + startSec;
+          if (model.renderToCache && model.scheduleCached) {
+            const renderToCache = model.renderToCache;
+            const scheduleCached = model.scheduleCached;
+            void (async () => {
+              const key = await renderToCache(
+                note.syllable,
+                prevVowel,
+                note.pitch,
+                note.durationSec * 1e3
+              );
+              if (session !== streamSession) return;
+              if (key) {
+                const delay = ctx.currentTime - t0;
+                if (delay < 0.05) {
+                  scheduleCached(key, t0, peak, track.pan);
+                  opts?.onScheduled?.(track, note, t0);
+                } else {
+                  console.warn(
+                    `[dtm] Synthesizer late skip: ${note.syllable.kana} at ${startSec}s (delayed by ${delay.toFixed(3)}s)`
+                  );
+                  opts?.onLateSkip?.(note, delay);
+                }
               }
-            }
-          })();
+            })();
+          } else {
+            const when = t0 - ctx.currentTime;
+            model(note.syllable, {
+              trackId: "",
+              pitch: note.pitch,
+              velocity: 100,
+              volume: peak,
+              when,
+              duration: note.durationSec,
+              pan: track.pan
+            });
+            opts?.onScheduled?.(track, note, t0);
+            await new Promise((resolve) => setTimeout(resolve, 0));
+          }
+        }
+        if (opts?.loopLengthSec && opts.loopLengthSec > 0) {
+          loopOffsetSec += opts.loopLengthSec;
+          pass++;
         } else {
-          const when = t0 - ctx.currentTime;
-          model(note.syllable, {
-            trackId: "",
-            pitch: note.pitch,
-            velocity: 100,
-            volume: peak,
-            when,
-            duration: note.durationSec,
-            pan: track.pan
-          });
-          opts?.onScheduled?.(track, note, t0);
-          await new Promise((resolve) => setTimeout(resolve, 0));
+          break;
         }
-      }
+      } while (session === streamSession);
     };
     for (const track of tracks) void runTrack(track);
   };
@@ -4673,6 +4692,58 @@ var DAW_CSS = `
   margin-left: 8px;
   font-weight: bold;
 }
+.dtm-player-seek-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.dtm-player-seek {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 12px;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.dtm-player-seek:disabled { cursor: default; opacity: 0.4; }
+.dtm-player-seek::-webkit-slider-runnable-track {
+  height: 6px;
+  background: var(--dtm-border2);
+  border: 2px solid var(--c-black);
+}
+.dtm-player-seek::-moz-range-track {
+  height: 6px;
+  background: var(--dtm-border2);
+  border: 2px solid var(--c-black);
+}
+.dtm-player-seek::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 16px;
+  margin-top: -7px;
+  background: var(--dtm-primary);
+  border: 2px solid var(--c-black);
+  box-shadow: 2px 2px 0 var(--c-black);
+  cursor: pointer;
+}
+.dtm-player-seek::-moz-range-thumb {
+  width: 12px;
+  height: 16px;
+  background: var(--dtm-primary);
+  border: 2px solid var(--c-black);
+  box-shadow: 2px 2px 0 var(--c-black);
+  cursor: pointer;
+  border-radius: 0;
+}
+.dtm-player-time {
+  flex: 0 0 auto;
+  font-family: 'k8x12', monospace;
+  font-size: 11px;
+  color: var(--dtm-text);
+  white-space: nowrap;
+}
 .dtm-player-dots {
   margin-left: auto;
   display: flex;
@@ -5949,6 +6020,31 @@ var mountMmlPlayer = (target, mml, options = {}) => {
   beatRow.appendChild(chordEl);
   head.append(playBtn, beatRow, dots, mmlHeader);
   root.appendChild(head);
+  const seekRow = doc.createElement("div");
+  seekRow.className = "dtm-player-seek-row";
+  const seekInput = doc.createElement("input");
+  seekInput.type = "range";
+  seekInput.className = "dtm-player-seek";
+  seekInput.min = "0";
+  seekInput.max = String(Math.max(1, maxStep));
+  seekInput.step = "1";
+  seekInput.value = "0";
+  seekInput.disabled = trackIndices.length === 0;
+  const timeEl = doc.createElement("span");
+  timeEl.className = "dtm-player-time";
+  timeEl.textContent = "0:00 / 0:00";
+  seekRow.append(seekInput, timeEl);
+  root.appendChild(seekRow);
+  const formatTime = (step) => {
+    const totalSec = Math.max(0, step * secondsPerStep);
+    const m = Math.floor(totalSec / 60);
+    const s = Math.floor(totalSec % 60);
+    return `${m}:${String(s).padStart(2, "0")}`;
+  };
+  const updateTimeLabel = (step) => {
+    timeEl.textContent = `${formatTime(step)} / ${formatTime(maxStep)}`;
+  };
+  updateTimeLabel(0);
   const msgArea = doc.createElement("div");
   msgArea.className = "dtm-player-message";
   msgArea.style.display = "none";
@@ -6167,10 +6263,15 @@ var mountMmlPlayer = (target, mml, options = {}) => {
   };
   const renderPlayhead = (step) => {
     const intStep = Math.floor(step);
+    playStep = intStep;
     const beatIndex = Math.floor(step / STEPS_PER_BEAT2) % 4;
     for (let i = 0; i < 4; i++)
       beatDots[i].classList.toggle("dtm-player-beat-dot--on", i === beatIndex);
     barEl.textContent = String(Math.floor(step / STEPS_PER_BAR2) + 1);
+    if (!isSeeking) {
+      seekInput.value = String(Math.min(maxStep, Math.max(0, intStep)));
+      updateTimeLabel(intStep);
+    }
     const chordName = stepChords[intStep] ?? "";
     if (chordEl.textContent !== chordName) {
       chordEl.textContent = chordName;
@@ -6191,9 +6292,12 @@ var mountMmlPlayer = (target, mml, options = {}) => {
     }
   };
   const resetPlayhead = () => {
+    playStep = 0;
     for (const d of beatDots) d.classList.remove("dtm-player-beat-dot--on");
     barEl.textContent = "-";
     chordEl.textContent = "";
+    seekInput.value = "0";
+    updateTimeLabel(0);
     for (const view of laneViews) {
       for (const t of view.tokens) t.el.classList.remove("is-active");
       view.lane.scrollLeft = 0;
@@ -6229,9 +6333,10 @@ var mountMmlPlayer = (target, mml, options = {}) => {
   });
   let playing = false;
   let skipSinging = false;
+  let playStep = 0;
   const setPlayingUI = (on) => {
     playing = on;
-    playBtn.innerHTML = icon(on ? "stop" : "play", 12);
+    playBtn.innerHTML = icon(on ? "pause" : "play", 12);
     playBtn.classList.toggle("dtm-player-play--stop", on);
   };
   const finish = () => {
@@ -6245,7 +6350,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
     masterVolume = volume;
     peekVoices()?.setVolume(trackVolume / 100 * (masterVolume / 100));
   };
-  const buildStreamTracks = () => [...lyricTracks.entries()].map(([index, lt]) => {
+  const buildStreamTracks = (fromStep) => [...lyricTracks.entries()].map(([index, lt]) => {
     const seqTrack = seqTracks.find((t) => Number(t.id) === index);
     const sorted = [...seqTrack?.notes ?? []].sort(
       (a, b) => a.startStep - b.startStep
@@ -6256,10 +6361,11 @@ var mountMmlPlayer = (target, mml, options = {}) => {
     const notes = [];
     for (let i = 0; i < count; i++) {
       const n = sorted[i];
+      if (n.startStep < fromStep) continue;
       notes.push({
         syllable: lt.syllables[i],
         pitch: n.pitch + semis,
-        startSec: n.startStep * secondsPerStep,
+        startSec: (n.startStep - fromStep) * secondsPerStep,
         durationSec: n.durationSteps * secondsPerStep * gate
       });
     }
@@ -6271,9 +6377,9 @@ var mountMmlPlayer = (target, mml, options = {}) => {
       notes
     };
   });
-  const startWhenReady = async () => {
+  const startWhenReady = async (fromStep) => {
     const streaming = voicesAvailable && lyricTracks.size > 0;
-    const tracks = streaming ? buildStreamTracks() : [];
+    const tracks = streaming ? buildStreamTracks(fromStep) : [];
     if (streaming) {
       const v = ensureVoices();
       const overlay = showLoadingOverlay(body, {
@@ -6282,7 +6388,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
           if (!playing || activePlayer !== instance) return;
           skipSinging = true;
           overlay.remove();
-          seq.start(0);
+          seq.start(fromStep);
         }
       });
       try {
@@ -6315,7 +6421,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
       }
       if (!playing || activePlayer !== instance || skipSinging) return;
     }
-    seq.start(0);
+    seq.start(fromStep);
     if (streaming && !skipSinging) {
       const v = ensureVoices();
       v.setVolume(trackVolume / 100 * (masterVolume / 100));
@@ -6329,9 +6435,9 @@ var mountMmlPlayer = (target, mml, options = {}) => {
       });
     }
   };
-  const play = () => {
+  const play = (fromStep = 0) => {
     if (playing || trackIndices.length === 0) return;
-    if (checkConsentAndShow(() => play())) return;
+    if (checkConsentAndShow(() => play(fromStep))) return;
     if (activePlayer && activePlayer !== instance) activePlayer.stop();
     activePlayer = instance;
     skipSinging = false;
@@ -6347,7 +6453,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
       if (resumes.length > 0) await Promise.all(resumes);
       if (!playing || activePlayer !== instance) return;
       if (voicesAvailable && lyricTracks.size > 0) ensureVoices().reset();
-      await startWhenReady();
+      await startWhenReady(fromStep);
     })();
   };
   const stop = () => {
@@ -6356,9 +6462,40 @@ var mountMmlPlayer = (target, mml, options = {}) => {
     peekVoices()?.stopStream();
     finish();
   };
+  const pause = () => {
+    if (!playing) return;
+    seq.stop();
+    peekVoices()?.stopStream();
+    clearJumpTimers();
+    setPlayingUI(false);
+    if (activePlayer === instance) activePlayer = null;
+    options.onStop?.();
+  };
+  let isSeeking = false;
+  const seekTo = (step) => {
+    const clamped = Math.min(maxStep, Math.max(0, Math.round(step)));
+    renderPlayhead(clamped);
+    if (playing) {
+      seq.stop();
+      peekVoices()?.stopStream();
+      clearJumpTimers();
+      setPlayingUI(false);
+      play(clamped);
+    }
+  };
+  seekInput.addEventListener("pointerdown", () => {
+    isSeeking = true;
+  });
+  seekInput.addEventListener("input", () => {
+    renderPlayhead(Number(seekInput.value));
+  });
+  seekInput.addEventListener("change", () => {
+    isSeeking = false;
+    seekTo(Number(seekInput.value));
+  });
   playBtn.addEventListener("click", () => {
-    if (playing) stop();
-    else play();
+    if (playing) pause();
+    else play(Number(seekInput.value));
   });
   const destroy = () => {
     doc.removeEventListener("click", handleOutsideClick);
@@ -12888,12 +13025,234 @@ var mountDAW = (target, options = {}) => {
 };
 
 // src/headless-singing-player.ts
-var playSingingMML = (_mml, _options = {}) => {
-  return Promise.reject(
-    new Error(
-      "playSingingMML is not implemented yet. See implementation notes at the top of headless-singing-player.ts."
-    )
+var STEPS_PER_BEAT4 = 48;
+var STEPS_PER_BAR3 = 192;
+var playSingingMML = async (mml, options = {}) => {
+  const {
+    placements,
+    bpm: parsedBpm,
+    meta,
+    lyrics
+  } = parseMML(mml, {
+    collectLyrics: true
+  });
+  const lyricTracks = lyrics ?? /* @__PURE__ */ new Map();
+  const customVocalByKey = new Map(
+    parseCustomVocals(mml).map((d) => [d.key, d])
+  );
+  const bpm = parsedBpm ?? options.defaultBpm ?? DEFAULT_BPM;
+  const secondsPerStep = 60 / bpm / STEPS_PER_BEAT4;
+  const drumPatternDict = options.drumPatterns ?? DRUM_PATTERNS;
+  const drumPattern = meta.drum ? drumPatternDict[meta.drum] ?? null : null;
+  const drumVolume = meta.drumVolume ?? 80;
+  const trackVolume = meta.volume ?? 100;
+  let masterVolume = options.volume ?? 100;
+  const trackIndices = [...new Set(placements.map((p) => p.trackIndex))].sort(
+    (a, b) => a - b
   );
+  const seqTracks = trackIndices.map((index) => {
+    let id = 0;
+    const notes = placements.filter((p) => p.trackIndex === index).map((p) => ({
+      id: id++,
+      startStep: p.startStep,
+      durationSteps: p.durationSteps,
+      pitch: p.pitch,
+      velocity: p.velocity
+    }));
+    return {
+      id: String(index),
+      volume: trackVolume / 100 * masterVolume,
+      notes
+    };
+  });
+  const ownsCtx = !options.audioContext;
+  const ctx = options.audioContext ?? new AudioContext();
+  const destination = options.destination ?? ctx.destination;
+  const useSynth = options.synth ?? !options.onPlayNote;
+  const synth = useSynth ? createSynth(ctx, destination) : null;
+  const pauseWhenHidden = options.pauseWhenHidden ?? ownsCtx;
+  let playing = false;
+  let destroyed = false;
+  let voices = options.singingVoices ?? null;
+  const buildStreamTracks = (fromStep) => [...lyricTracks.entries()].map(([index, lt]) => {
+    const seqTrack = seqTracks.find((t) => Number(t.id) === index);
+    const sorted = [...seqTrack?.notes ?? []].sort(
+      (a, b) => a.startStep - b.startStep
+    );
+    const gate = (lt.gate ?? DEFAULT_GATE) / 100;
+    const semis = (lt.octave ?? 0) * 12;
+    const count = Math.min(sorted.length, lt.syllables.length);
+    const notes = [];
+    for (let i = 0; i < count; i++) {
+      const n = sorted[i];
+      if (n.startStep < fromStep) continue;
+      notes.push({
+        syllable: lt.syllables[i],
+        pitch: n.pitch + semis,
+        startSec: (n.startStep - fromStep) * secondsPerStep,
+        durationSec: n.durationSteps * secondsPerStep * gate
+      });
+    }
+    return {
+      id: String(index),
+      model: lt.model,
+      volume: vocalVolumeToGain(lt.volume ?? DEFAULT_VOCAL_VOLUME),
+      pan: panToStereo(lt.pan ?? DEFAULT_PAN),
+      notes
+    };
+  });
+  const seq = createSequencer({
+    getTracks: () => seqTracks,
+    getBpm: () => bpm,
+    getPlayStartStep: () => 0,
+    getDrumPattern: () => drumPattern,
+    getSoloTrackId: () => null,
+    getLoop: () => options.loop ?? false,
+    cues: options.cues,
+    onCue: options.onCue,
+    getAudioTime: () => ctx.currentTime,
+    onPlayNote: (e) => {
+      const trackIdx = Number(e.trackId);
+      if (lyricTracks.has(trackIdx)) return;
+      options.onPlayNote?.(e);
+      synth?.playNote(e);
+    },
+    onPlayDrum: (e) => {
+      const velocity = e.velocity * (drumVolume / 100) * (trackVolume / 100) * (masterVolume / 100);
+      options.onPlayDrum?.({ ...e, velocity });
+      synth?.playDrum({ ...e, velocity });
+    },
+    onTick: (step) => {
+      options.onTick?.(step);
+    },
+    onEnd: (_interrupted) => finish(),
+    stepsPerBar: STEPS_PER_BAR3
+  });
+  const finish = () => {
+    if (!playing) return;
+    playing = false;
+    voices?.stopStream();
+    options.onStop?.();
+  };
+  const onVisibilityChange = () => {
+    if (!playing) return;
+    if (document.hidden) {
+      void ctx.suspend();
+    } else if (ctx.state === "suspended") {
+      void ctx.resume();
+    }
+  };
+  if (pauseWhenHidden && typeof document !== "undefined") {
+    document.addEventListener("visibilitychange", onVisibilityChange);
+  }
+  const stop = () => {
+    if (!playing) return;
+    seq.stop();
+    finish();
+  };
+  const setVolume = (volume) => {
+    masterVolume = volume;
+    const effectiveTrackVolume = trackVolume / 100 * masterVolume;
+    for (const t of seqTracks) t.volume = effectiveTrackVolume;
+    voices?.setVolume(trackVolume / 100 * (masterVolume / 100));
+  };
+  const suspend = () => ctx.suspend();
+  const resume = () => ctx.resume();
+  const destroy = () => {
+    seq.stop();
+    playing = false;
+    destroyed = true;
+    voices?.reset();
+    if (pauseWhenHidden && typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    }
+    if (ownsCtx && ctx.state !== "closed") {
+      void ctx.close();
+    }
+  };
+  const playback = {
+    stop,
+    isPlaying: () => playing,
+    setVolume,
+    suspend,
+    resume,
+    destroy
+  };
+  playing = true;
+  try {
+    const resumes = [];
+    const r = options.onResumeAudio?.();
+    if (r) resumes.push(Promise.resolve(r));
+    if (ctx.state === "suspended") resumes.push(ctx.resume());
+    if (resumes.length > 0) await Promise.all(resumes);
+    if (!playing || destroyed) {
+      return playback;
+    }
+    if (lyricTracks.size > 0) {
+      if (!voices) {
+        voices = createSingingVoices(ctx, destination, {
+          voiceWorkerUrl: options.voiceWorkerUrl
+        });
+      }
+      if (customVocalByKey.size > 0 && voices.registerVoicebanks) {
+        voices.registerVoicebanks(
+          Object.fromEntries([...customVocalByKey].map(([k, d]) => [k, d.url]))
+        );
+      }
+      const streamTracks = buildStreamTracks(0);
+      await voices.loadModels(streamTracks.map((t) => t.model));
+      if (!playing || destroyed) {
+        return playback;
+      }
+      await voices.warm(streamTracks, PREWARM_NOTES);
+      if (!playing || destroyed) {
+        return playback;
+      }
+      let loopLengthSec;
+      let loopStartSec;
+      const loopOption = options.loop ?? false;
+      if (loopOption) {
+        let loopStartStep = 0;
+        let loopEndStep = -1;
+        if (typeof loopOption === "object") {
+          loopStartStep = loopOption.start ? resolveLoopPoint(
+            loopOption.start,
+            bpm,
+            STEPS_PER_BAR3,
+            secondsPerStep
+          ) : 0;
+          const endVal = loopOption.end ? resolveLoopPoint(
+            loopOption.end,
+            bpm,
+            STEPS_PER_BAR3,
+            secondsPerStep
+          ) : null;
+          loopEndStep = endVal !== null ? endVal : -1;
+        }
+        if (loopEndStep === -1) {
+          let maxEndStep = 0;
+          for (const p of placements) {
+            maxEndStep = Math.max(maxEndStep, p.startStep + p.durationSteps);
+          }
+          loopEndStep = maxEndStep;
+        }
+        loopStartSec = loopStartStep * secondsPerStep;
+        loopLengthSec = (loopEndStep - loopStartStep) * secondsPerStep;
+      }
+      seq.start(0);
+      voices.setVolume(trackVolume / 100 * (masterVolume / 100));
+      voices.startStream(streamTracks, seq.getStartTime(), {
+        loopLengthSec,
+        loopStartSec
+      });
+    } else {
+      seq.start(0);
+    }
+  } catch (err2) {
+    stop();
+    throw err2;
+  }
+  return playback;
 };
 
 // src/piano-roll.ts
@@ -14251,6 +14610,7 @@ export {
   playNote,
   playPlacements,
   playSingingMML,
+  resolveLoopPoint,
   setBackgroundActive,
   setDrawOffset,
   shiftNotes,

package/package.json

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