@onjmin/dtm 0.1.25 → 0.1.27

package/dist/index.mjs

@@ -7,34 +7,6 @@ function createAudioContext() {
   drumGainNode.connect(audioCtx.destination);
   return { audioCtx, gainNode, drumGainNode };
 }
-function setupRecorder(audioCtx, gainNode, drumGainNode) {
-  let isRecording = false;
-  let recordedData = [[], []];
-  const recorderProcessor = audioCtx.createScriptProcessor(4096, 2, 2);
-  recorderProcessor.onaudioprocess = (e) => {
-    if (!isRecording) return;
-    const left = e.inputBuffer.getChannelData(0);
-    const right = e.inputBuffer.getChannelData(1);
-    recordedData[0].push(left.slice());
-    recordedData[1].push(right.slice());
-  };
-  gainNode.connect(recorderProcessor);
-  drumGainNode.connect(recorderProcessor);
-  recorderProcessor.connect(audioCtx.destination);
-  return {
-    startRecording: () => {
-      isRecording = true;
-    },
-    stopRecording: () => {
-      isRecording = false;
-    },
-    getRecordedData: () => recordedData,
-    isRecording: () => isRecording,
-    clearRecordedData: () => {
-      recordedData = [[], []];
-    }
-  };
-}
 async function fetchSoundFontList(ttl) {
   const res = await fetch(`https://rpgen3.github.io/soundfont/list/${ttl}.txt`);
   const str = await res.text();
@@ -1131,8 +1103,9 @@ var buildUI = (target, options) => {
   target.innerHTML = `
 <div class="dtm-daw" data-dtm="root">
   <div class="dtm-topbar" data-dtm="transport">
+    <button class="dtm-iconbtn" data-dtm="prev-bar" title="1\u5C0F\u7BC0\u524D">${icon("chevronLeft")}</button>
     <button class="dtm-play" data-dtm="play" disabled>${icon("play")}<span>\u8A66\u8074</span></button>
-    <button class="dtm-iconbtn dtm-rec" data-dtm="rec" title="\u9332\u97F3">${icon("record")}</button>
+    <button class="dtm-iconbtn" data-dtm="next-bar" title="1\u5C0F\u7BC0\u5F8C">${icon("chevronRight")}</button>
     <label class="dtm-toggle"><input type="checkbox" data-dtm="solo"><span>\u30BD\u30ED</span></label>
     <span class="dtm-topbar-loading dtm-blink" data-dtm="topbar-loading">... LOADING ...</span>
     <span class="dtm-grow"></span>
@@ -1297,10 +1270,12 @@ var buildUI = (target, options) => {
       </div>
       <div class="dtm-output dtm-hidden" data-dtm="output-container">
         <p class="dtm-label" data-dtm="output-status"></p>
+        <div class="dtm-output-label">\u6539\u884C\u3042\u308A\u7248</div>
         <div class="dtm-output-row">
           <pre><code data-dtm="output-full"></code></pre>
           <button class="dtm-btn dtm-btn--primary dtm-btn--icon" data-dtm="copy-full" title="\u30B3\u30D4\u30FC">${icon("copy")}</button>
         </div>
+        <div class="dtm-output-label">\uFF11\u884C\u7248</div>
         <div class="dtm-output-row">
           <pre><code data-dtm="output-mini"></code></pre>
           <button class="dtm-btn dtm-btn--primary dtm-btn--icon" data-dtm="copy-mini" title="\u30B3\u30D4\u30FC">${icon("copy")}</button>
@@ -1328,7 +1303,8 @@ var buildUI = (target, options) => {
     topbar: sel("transport"),
     topbarLoading: sel("topbar-loading"),
     playBtn: sel("play"),
-    recBtn: sel("rec"),
+    prevBarBtn: sel("prev-bar"),
+    nextBarBtn: sel("next-bar"),
     soloCheckbox: sel("solo"),
     toolPen: sel("tool-pen"),
     toolSelect: sel("tool-select"),
@@ -2633,7 +2609,7 @@ var createKoeVoice = async (ctx, destination, options) => {
   return model;
 };
 var PREWARM_NOTES = 3;
-var STREAM_LOOKAHEAD_SEC = 1.5;
+var STREAM_LOOKAHEAD_SEC = 6;
 var STREAM_POLL_MS = 100;
 var FALLBACK_MODEL = "klatt";
 var createSingingVoices = (ctx, destination, options = {}) => {
@@ -2697,7 +2673,7 @@ var createSingingVoices = (ctx, destination, options = {}) => {
       if (!m?.renderToCache) continue;
       let n = 0;
       forEachSungNote(track, (note, prevVowel) => {
-        if (n >= count) return;
+        if (n >= count && note.startSec >= STREAM_LOOKAHEAD_SEC) return;
         n++;
         promises.push(
           m.renderToCache?.(
@@ -2730,14 +2706,18 @@ var createSingingVoices = (ctx, destination, options = {}) => {
         if (opts?.isAudible && !opts.isAudible(track)) continue;
         const t0 = anchorTime + note.startSec;
         if (model.renderToCache && model.scheduleCached) {
-          const key = await model.renderToCache(
-            note.syllable,
-            prevVowel,
-            note.pitch,
-            note.durationSec * 1e3
-          );
-          if (session !== streamSession) return;
-          if (key) model.scheduleCached(key, t0, peak, track.pan);
+          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) scheduleCached(key, t0, peak, track.pan);
+          })();
         } else {
           const when = t0 - ctx.currentTime;
           model(note.syllable, {
@@ -4146,7 +4126,7 @@ var PITCH_MAP2 = {
   b: 11
 };
 var clamp2 = (value, lo, hi) => Math.min(hi, Math.max(lo, value));
-var META_DIRECTIVE = /#(inst|drum|volume|mode)=([\w-]+)/gi;
+var META_DIRECTIVE = /#(inst|drum|volume|drumvolume|mode)=([\w-]+)/gi;
 var parseMmlMeta = (mml) => {
   const meta = {};
   for (const m of mml.matchAll(META_DIRECTIVE)) {
@@ -4156,6 +4136,9 @@ var parseMmlMeta = (mml) => {
     else if (key === "volume") {
       const v = Number.parseInt(m[2], 10);
       if (!Number.isNaN(v)) meta.volume = v;
+    } else if (key === "drumvolume") {
+      const dv = Number.parseInt(m[2], 10);
+      if (!Number.isNaN(dv)) meta.drumVolume = dv;
     } else if (key === "mode") {
       if (m[2] === "simple" || m[2] === "advanced") {
         meta.mode = m[2];
@@ -4170,6 +4153,8 @@ var formatMmlMeta = (meta) => {
   if (meta.instrument) parts.push(`#inst=${meta.instrument}`);
   if (meta.drum) parts.push(`#drum=${meta.drum}`);
   if (meta.volume !== void 0) parts.push(`#volume=${meta.volume}`);
+  if (meta.drumVolume !== void 0)
+    parts.push(`#drumvolume=${meta.drumVolume}`);
   if (meta.mode) parts.push(`#mode=${meta.mode}`);
   return parts.join(" ");
 };
@@ -4891,7 +4876,7 @@ var DAW_CSS = `
   top: 0;
   z-index: 20;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
   gap: var(--dtm-gap);
   padding: 6px;
@@ -4901,6 +4886,17 @@ var DAW_CSS = `
     inset 0 0 0 2px var(--c-black),
     0 0 0 2px var(--dtm-success),
     4px 4px 0 var(--c-black);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.dtm-topbar::-webkit-scrollbar {
+  display: none;
+}
+.dtm-topbar > * {
+  flex-shrink: 0;
+}
+.dtm-topbar > .dtm-grow {
+  flex-shrink: 1;
 }
 
 /* PLAY\u30DC\u30BF\u30F3 \u2014 \u30B2\u30FC\u30E0\u306E\u300C\u6C7A\u5B9A\u30DC\u30BF\u30F3\u300D\u7684\u5B58\u5728\u611F */
@@ -5251,6 +5247,15 @@ var DAW_CSS = `
   line-height: 1.8;
   color: var(--dtm-success);
 }
+.dtm-output-label {
+  font-size: 11px;
+  color: var(--dtm-muted);
+  font-family: var(--dtm-font);
+  margin-top: 10px;
+}
+.dtm-output-label:first-of-type {
+  margin-top: 0;
+}
 .dtm-output-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
 .dtm-output-row pre { flex: 1; }
 
@@ -6094,6 +6099,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
   const drumPatternDict = options.drumPatterns ?? DRUM_PATTERNS;
   const drumPattern = meta.drum ? drumPatternDict[meta.drum] ?? null : null;
   const trackVolume = meta.volume ?? options.volume ?? 100;
+  const drumVolume = meta.drumVolume ?? 80;
   const colors = options.trackColors ?? DEFAULT_TRACK_COLORS;
   const useSynth = options.synth ?? !options.onPlayNote;
   const secondsPerStep = 60 / bpm / STEPS_PER_BEAT3;
@@ -6710,9 +6716,9 @@ var mountMmlPlayer = (target, mml, options = {}) => {
   }
   target.appendChild(root);
   let consentOverlayEl = null;
-  const checkConsentAndShow = () => {
+  const checkConsentAndShow = (onAgree) => {
     try {
-      if (options.skipConsent) return;
+      if (options.skipConsent) return false;
       const unagreed = termsModels.filter((model) => {
         if (agreedModelsInSession.has(model)) return false;
         try {
@@ -6726,7 +6732,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
           return true;
         }
       });
-      if (unagreed.length === 0) return;
+      if (unagreed.length === 0) return false;
       const consentOverlay = doc.createElement("div");
       consentOverlay.className = "dtm-consent-overlay";
       const modal = doc.createElement("div");
@@ -6769,17 +6775,19 @@ var mountMmlPlayer = (target, mml, options = {}) => {
         }
         consentOverlay.remove();
         consentOverlayEl = null;
+        if (onAgree) onAgree();
       };
       footer.appendChild(btn);
       modal.append(header, body2, footer);
       consentOverlay.appendChild(modal);
       doc.body.appendChild(consentOverlay);
       consentOverlayEl = consentOverlay;
+      return true;
     } catch (err2) {
       console.error("[dtm-player] Error in checkConsentAndShow:", err2);
+      return false;
     }
   };
-  checkConsentAndShow();
   const autoScroll = (lane, el) => {
     if (el.offsetWidth === 0 || lane.clientWidth === 0) return;
     const elementCenter = el.offsetLeft + el.offsetWidth / 2;
@@ -6838,7 +6846,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
       if (useSynth) ensureSynth().playNote(e);
     },
     onPlayDrum: (e) => {
-      const velocity = e.velocity * (trackVolume / 100);
+      const velocity = e.velocity * (drumVolume / 100) * (trackVolume / 100);
       options.onPlayDrum?.({ ...e, velocity });
       if (useSynth) ensureSynth().playDrum({ ...e, velocity });
     },
@@ -6912,6 +6920,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
   };
   const play = () => {
     if (playing || trackIndices.length === 0) return;
+    if (checkConsentAndShow(() => play())) return;
     if (activePlayer && activePlayer !== instance) activePlayer.stop();
     activePlayer = instance;
     setPlayingUI(true);
@@ -7940,7 +7949,7 @@ var mountDAW = (target, options = {}) => {
   };
   const updateTransport = () => {
     const playing = playbackState === "playing";
-    const label = playing ? "\u4E00\u6642\u505C\u6B62" : playbackState === "paused" ? "\u518D\u958B" : "\u8A66\u8074";
+    const label = playing ? "\u505C\u6B62" : playbackState === "paused" ? "\u518D\u958B" : "\u8A66\u8074";
     refs.playBtn.innerHTML = `${icon(playing ? "pause" : "play")}<span>${label}</span>`;
     refs.playBtn.classList.toggle("dtm-play--stop", playing);
   };
@@ -8208,6 +8217,7 @@ var mountDAW = (target, options = {}) => {
       instrument: currentInstrument || void 0,
       drum: currentDrumPattern !== "none" ? currentDrumPattern : void 0,
       volume: masterVolume,
+      drumVolume,
       mode
     });
     if (refs.decomposeChordToggle.checked) {
@@ -8359,6 +8369,11 @@ var mountDAW = (target, options = {}) => {
       refs.masterVolume.value = String(meta.volume);
       refs.masterVolumeLabel.textContent = `${meta.volume}%`;
     }
+    if (meta.drumVolume !== void 0) {
+      drumVolume = meta.drumVolume;
+      refs.drumVolume.value = String(meta.drumVolume);
+      refs.drumVolumeLabel.textContent = `${meta.drumVolume}%`;
+    }
     for (const t of trackStates) {
       t.lyrics = "";
       t.lyricModel = "";
@@ -8512,8 +8527,17 @@ var mountDAW = (target, options = {}) => {
   const wireEvents = () => {
     refs.playBtn.addEventListener("click", togglePlay);
     refs.playBtn.disabled = false;
-    refs.recBtn.addEventListener("click", () => options.onToggleRecord?.());
-    refs.recBtn.style.display = options.onToggleRecord ? "" : "none";
+    refs.prevBarBtn.addEventListener("click", () => {
+      const targetStep = Math.max(
+        0,
+        Math.floor((getCurrentPlayStep() - 1) / renderConfig.stepsPerBar) * renderConfig.stepsPerBar
+      );
+      jumpTo(targetStep);
+    });
+    refs.nextBarBtn.addEventListener("click", () => {
+      const targetStep = Math.floor(getCurrentPlayStep() / renderConfig.stepsPerBar + 1) * renderConfig.stepsPerBar;
+      jumpTo(targetStep);
+    });
     refs.soloCheckbox.addEventListener("change", () => {
       isSolo = refs.soloCheckbox.checked;
     });
@@ -8876,6 +8900,20 @@ var mountDAW = (target, options = {}) => {
     if (playbackState === "paused") return pausedPlayStep;
     return playStartStep;
   };
+  const jumpTo = async (step) => {
+    const wasPlaying = playbackState === "playing";
+    if (wasPlaying) {
+      sequencer.stop();
+      options.singingVoices?.stopStream();
+      playStartStep = step;
+      pausedPlayStep = step;
+      currentPlayStep = step;
+      playbackState = "paused";
+      await play();
+    } else {
+      forcePauseAt(step);
+    }
+  };
   const forcePauseAt = (step) => {
     playStartStep = step;
     pausedPlayStep = step;
@@ -8950,6 +8988,7 @@ var playMML = (mml, options = {}) => {
   const drumPatternDict = options.drumPatterns ?? DRUM_PATTERNS;
   const drumPattern = meta.drum ? drumPatternDict[meta.drum] ?? null : null;
   let masterVolume = meta.volume ?? options.volume ?? 100;
+  let drumVolume = meta.drumVolume ?? 80;
   const trackIndices = [...new Set(placements.map((p) => p.trackIndex))].sort(
     (a, b) => a - b
   );
@@ -8986,7 +9025,7 @@ var playMML = (mml, options = {}) => {
       synth?.playNote(e);
     },
     onPlayDrum: (e) => {
-      const velocity = e.velocity * (masterVolume / 100);
+      const velocity = e.velocity * (drumVolume / 100) * (masterVolume / 100);
       options.onPlayDrum?.({ ...e, velocity });
       synth?.playDrum({ ...e, velocity });
     },
@@ -9544,7 +9583,6 @@ var importFrom = async (url2, name) => {
 var createDtmStudio = async (options = {}) => {
   const cdn = { ...DEFAULT_CDN, ...options.cdn };
   const features = {
-    recorder: true,
     midi: true,
     chord: true,
     presetUI: true,
@@ -9583,68 +9621,6 @@ var createDtmStudio = async (options = {}) => {
   const singingVoices = createSingingVoices(audioCtx, masterGain, {
     voiceWorkerUrl
   });
-  const recorder = features.recorder ? setupRecorder(audioCtx, masterGain, drumGain) : null;
-  const downloadWav = () => {
-    if (!recorder) return;
-    const recordedData = recorder.getRecordedData();
-    const ch = recordedData.length;
-    const len = recordedData[0].length;
-    if (len === 0) return;
-    const bufSize = recordedData[0][0].length;
-    const wave = new Float32Array(ch * len * bufSize);
-    let idx = 0;
-    for (let i = 0; i < len; i++)
-      for (let j = 0; j < bufSize; j++)
-        for (let k = 0; k < ch; k++) wave[idx++] = recordedData[k][i][j];
-    const sampleRate = audioCtx.sampleRate;
-    const channels = 2;
-    const bitRate = 16;
-    const step = bitRate / 8;
-    const blockSize = channels * step;
-    const byteLen = wave.length * step;
-    const view = new DataView(new ArrayBuffer(44 + byteLen));
-    const ws = (off2, s) => {
-      for (let i = 0; i < s.length; i++)
-        view.setUint8(off2 + i, s.charCodeAt(i));
-    };
-    ws(0, "RIFF");
-    view.setUint32(4, 32 + byteLen, true);
-    ws(8, "WAVE");
-    ws(12, "fmt ");
-    view.setUint32(16, 16, true);
-    view.setUint16(20, 1, true);
-    view.setUint16(22, channels, true);
-    view.setUint32(24, sampleRate, true);
-    view.setUint32(28, sampleRate * blockSize, true);
-    view.setUint16(32, blockSize, true);
-    view.setUint16(34, bitRate, true);
-    ws(36, "data");
-    view.setUint32(40, byteLen, true);
-    const clamp4 = (n, a2, b) => Math.max(a2, Math.min(b, n));
-    let off = 44;
-    for (let i = 0; i < wave.length; i++, off += step)
-      view.setInt16(
-        off,
-        clamp4(Math.round(wave[i] * 32768), -32768, 32767),
-        true
-      );
-    const blob2 = new Blob([view], { type: "audio/wav" });
-    const url2 = URL.createObjectURL(blob2);
-    const a = document.createElement("a");
-    a.href = url2;
-    a.download = "record.wav";
-    a.click();
-    URL.revokeObjectURL(url2);
-  };
-  const onToggleRecord = recorder ? () => {
-    if (recorder.isRecording()) {
-      recorder.stopRecording();
-      downloadWav();
-    } else {
-      recorder.clearRecordedData();
-      recorder.startRecording();
-    }
-  } : void 0;
   const listReady = new Promise((resolve) => {
     SoundFont_list.init();
     SoundFont_list.onload(() => resolve());
@@ -9851,7 +9827,6 @@ var createDtmStudio = async (options = {}) => {
       onPlayDrum: playDrum,
       singingVoices,
       parseMidi,
-      onToggleRecord,
       onInstrumentChange: handleInstrumentChange,
       ...dawOverrides
     };
@@ -10142,7 +10117,6 @@ export {
   playMML,
   playSingingMML,
   setDrawOffset,
-  setupRecorder,
   shiftNotes,
   stripLyrics,
   stripMmlMeta,

package/package.json

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