@onjmin/dtm 0.1.24 → 0.1.26

package/dist/index.js

@@ -99,7 +99,6 @@ __export(index_exports, {
   playMML: () => playMML,
   playSingingMML: () => playSingingMML,
   setDrawOffset: () => setDrawOffset,
-  setupRecorder: () => setupRecorder,
   shiftNotes: () => shiftNotes,
   stripLyrics: () => stripLyrics,
   stripMmlMeta: () => stripMmlMeta,
@@ -116,34 +115,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();
@@ -1240,8 +1211,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>
@@ -1406,10 +1378,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>
@@ -1428,6 +1402,7 @@ var buildUI = (target, options) => {
       <div class="dtm-modal-body" data-dtm="modal-body"></div>
     </div>
   </div>
+
 </div>`;
   const root = q(target, '[data-dtm="root"]');
   const sel = (name) => q(root, `[data-dtm="${name}"]`);
@@ -1436,7 +1411,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"),
@@ -2611,7 +2587,20 @@ var createWorkerBackend = async (workerUrl, options) => {
   };
 };
 var createKoeVoice = async (ctx, destination, options) => {
-  const backend = options.voiceWorkerUrl ? await createWorkerBackend(options.voiceWorkerUrl, options) : await createLocalBackend(options);
+  let backend;
+  if (options.voiceWorkerUrl) {
+    try {
+      backend = await createWorkerBackend(options.voiceWorkerUrl, options);
+    } catch (err2) {
+      console.warn(
+        "[dtm] Failed to spawn voice worker. Falling back to local backend.",
+        err2
+      );
+      backend = await createLocalBackend(options);
+    }
+  } else {
+    backend = await createLocalBackend(options);
+  }
   const renderCache = /* @__PURE__ */ new Map();
   const inflight = /* @__PURE__ */ new Map();
   const active = /* @__PURE__ */ new Set();
@@ -2792,7 +2781,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 >= 3) return;
         n++;
         promises.push(
           m.renderToCache?.(
@@ -2825,14 +2814,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, {
@@ -4126,6 +4119,110 @@ var isChordHeavyTrack = (notes, threshold = 0.6) => {
   return chordNotes / notes.length >= threshold;
 };
 
+// src/mml-info.ts
+var MML_INFO_HTML = `
+<div class="dtm-modal-body-content">
+  <h4>1. \u97F3\u7B26\u3068\u4F11\u7B26</h4>
+  <p><code>c</code>(\u30C9) <code>d</code>(\u30EC) <code>e</code>(\u30DF) <code>f</code>(\u30D5\u30A1) <code>g</code>(\u30BD) <code>a</code>(\u30E9) <code>b</code>(\u30B7) \u306E\u30A2\u30EB\u30D5\u30A1\u30D9\u30C3\u30C8\u3067\u8868\u3057\u307E\u3059\u3002</p>
+  <ul>
+    <li>\u534A\u97F3\u4E0A\u3052\u308B: <code>c#</code> \u307E\u305F\u306F <code>c+</code></li>
+    <li>\u534A\u97F3\u4E0B\u3052\u308B: <code>d-</code></li>
+    <li>\u4F11\u7B26: <code>r</code></li>
+  </ul>
+
+  <h4>2. \u97F3\u306E\u9577\u3055</h4>
+  <p>\u97F3\u540D\u3084\u4F11\u7B26\u306E\u5F8C\u306B\u6570\u5024\u3067\u6307\u5B9A\u3057\u307E\u3059\uFF08\u4F8B: <code>4</code> = 4\u5206\u97F3\u7B26, <code>8</code> = 8\u5206\u97F3\u7B26, <code>16</code> = 16\u5206\u97F3\u7B26\uFF09\u3002</p>
+  <ul>
+    <li><code>c4</code> : 4\u5206\u97F3\u7B26\u306E\u30C9</li>
+    <li><code>r8</code> : 8\u5206\u4F11\u7B26</li>
+    <li><code>c4.</code> : \u4ED8\u70B94\u5206\u97F3\u7B26\u306E\u30C9\uFF08\u9577\u3055\u30921.5\u500D\u306B\uFF09</li>
+    <li>\u6570\u5024\u3092\u7701\u7565\u3059\u308B\u3068\u3001<code>l</code> \u30B3\u30DE\u30F3\u30C9\u3067\u8A2D\u5B9A\u3055\u308C\u305F\u30C7\u30D5\u30A9\u30EB\u30C8\u9577\uFF08\u901A\u5E3816\u5206\uFF09\u306B\u306A\u308A\u307E\u3059\u3002</li>
+  </ul>
+
+  <h4>3. \u30AA\u30AF\u30BF\u30FC\u30D6\uFF08\u97F3\u306E\u9AD8\u3055\uFF09</h4>
+  <ul>
+    <li><code>o4</code>, <code>o5</code> : \u9AD8\u3055\u3092\u76F4\u63A5\u6307\u5B9A\uFF08\u3075\u3064\u3046\u306F o4 \u304B o5\uFF09</li>
+    <li><code>&gt;</code> : 1\u30AA\u30AF\u30BF\u30FC\u30D6\u4E0A\u3052\u308B</li>
+    <li><code>&lt;</code> : 1\u30AA\u30AF\u30BF\u30FC\u30D6\u4E0B\u3052\u308B</li>
+  </ul>
+
+  <h4>4. \u30C6\u30F3\u30DD</h4>
+  <ul>
+    <li><code>t120</code> : \u66F2\u306E\u901F\u3055\u3092BPM120\u306B\u6307\u5B9A\u3002\u203B\u30E1\u30ED\u30C7\u30A3\uFF08@0\uFF09\u306E\u30C6\u30F3\u30DD\u6307\u5B9A\u304C\u66F2\u5168\u4F53\u306B\u53CD\u6620\u3055\u308C\u307E\u3059\u3002</li>
+  </ul>
+
+  <h4>5. \u548C\u97F3</h4>
+  <p>\u97F3\u7B26\u3092 <code>[</code> \u3068 <code>]</code> \u3067\u56F2\u3080\u3068\u540C\u6642\u306B\u767A\u97F3\u3057\u307E\u3059\u3002</p>
+  <pre>\u4F8B: [ceg]4 \uFF08\u30C9\u30FB\u30DF\u30FB\u30BD\u30924\u5206\u97F3\u7B26\u3067\u540C\u6642\u306B\u767A\u97F3\uFF09</pre>
+
+  <h4>6. \u30C8\u30E9\u30C3\u30AF\u306E\u533A\u5207\u308A</h4>
+  <p><code>;</code> \u307E\u305F\u306F <code>@0</code>\u301C<code>@3</code> \u3067\u30C8\u30E9\u30C3\u30AF\u3092\u5207\u308A\u66FF\u3048\u307E\u3059\u3002</p>
+  <ul>
+    <li><code>@0</code>: \u30E1\u30ED\u30C7\u30A3</li>
+    <li><code>@1</code>: \u30B5\u30D6\u30E1\u30ED</li>
+    <li><code>@2</code>: \u30D9\u30FC\u30B9</li>
+    <li><code>@3</code>: \u4F34\u594F</li>
+  </ul>
+
+  <h4>7. \u6B4C\u58F0\u30FB\u6B4C\u8A5E\u5165\u529B</h4>
+  <p><code>@@&lt;\u30C8\u30E9\u30C3\u30AF\u756A\u53F7&gt; &lt;\u97F3\u6E90\u540D&gt; &lt;\u6B4C\u8A5E&gt;</code> \u306E\u5F62\u5F0F\u3067\u3001\u97F3\u7B26\u3068\u540C\u671F\u3059\u308B\u6B4C\u8A5E\u3092\u5165\u529B\u3067\u304D\u307E\u3059\u3002</p>
+  <pre>\u4F8B: @@0 tsukuyomi \u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D\u3069\u3093\u3050\u308A\u3053</pre>
+  <p style="margin-top:4px; margin-bottom:16px;"><small>\uFF08\u97F3\u6E90\u540D\u306F <code>tsukuyomi</code> \u3084 <code>klatt</code>, <code>roze</code> \u306A\u3069\u306E\u97F3\u58F0\u30E2\u30C7\u30EB\u3092\u6307\u5B9A\u3067\u304D\u307E\u3059\uFF09</small></p>
+
+  <h4 style="margin-top: 18px; border-top: 1px solid var(--dtm-border2); padding-top: 8px;">\u30B5\u30F3\u30D7\u30EB\u66F2\uFF08\u8A66\u8074\u30FB\u30B3\u30D4\u30FC\uFF09</h4>
+
+  <!-- \u30B5\u30F3\u30D7\u30EB1 -->
+  <div class="dtm-modal-sample-box">
+    <div class="dtm-modal-sample-header">
+      <span class="dtm-modal-sample-tag">1. \u57FA\u672C\u306E\u30E1\u30ED\u30C7\u30A3</span>
+      <button class="dtm-btn dtm-btn--ghost dtm-btn--xs dtm-modal-sample-copy-btn" data-mml="@0 t120 l8 o5 c d e f g a b > c">\u{1F4CB} \u30B3\u30D4\u30FC</button>
+    </div>
+    <pre style="margin: 0; padding: 6px;">@0 t120 l8 o5 c d e f g a b &gt; c</pre>
+    <div class="dtm-modal-sample-desc">
+      \u57FA\u672C\u7684\u306A\u30E1\u30ED\u30C7\u30A3\u306E\u66F8\u304D\u65B9\uFF08\u97F3\u540D\u30FB\u9577\u3055\u30FB\u30AA\u30AF\u30BF\u30FC\u30D6\u3068\u30C6\u30F3\u30DD\uFF09\u3002
+    </div>
+    <div style="margin-top: 8px;">
+      <button class="dtm-btn dtm-btn--primary dtm-btn--xs dtm-modal-sample-play-btn" data-mml="@0 t120 l8 o5 c d e f g a b > c">\u25B6 \u8A66\u8074</button>
+    </div>
+    <div class="dtm-modal-sample-player-container"></div>
+  </div>
+
+  <!-- \u30B5\u30F3\u30D7\u30EB2 -->
+  <div class="dtm-modal-sample-box">
+    <div class="dtm-modal-sample-header">
+      <span class="dtm-modal-sample-tag">2. \u8907\u6570\u30C8\u30E9\u30C3\u30AF\u3068\u548C\u97F3</span>
+      <button class="dtm-btn dtm-btn--ghost dtm-btn--xs dtm-modal-sample-copy-btn" data-mml="@0 t120 o5 c e g2 ; @3 o4 [ceg]2 [ceg]2">\u{1F4CB} \u30B3\u30D4\u30FC</button>
+    </div>
+    <pre style="margin: 0; padding: 6px;">@0 t120 o5 c e g2 ;
+@3 o4 [ceg]2 [ceg]2</pre>
+    <div class="dtm-modal-sample-desc">
+      ; \u3067\u30C8\u30E9\u30C3\u30AF\uFF08\u4E0A\uFF1D\u30E1\u30ED\u30C7\u30A3\uFF0F\u4E0B\uFF1D\u4F34\u594F\uFF09\u3092\u5206\u3051\u3001[ceg] \u3067\u548C\u97F3\u3092\u9CF4\u3089\u3057\u307E\u3059\u3002
+    </div>
+    <div style="margin-top: 8px;">
+      <button class="dtm-btn dtm-btn--primary dtm-btn--xs dtm-modal-sample-play-btn" data-mml="@0 t120 o5 c e g2 ; @3 o4 [ceg]2 [ceg]2">\u25B6 \u8A66\u8074</button>
+    </div>
+    <div class="dtm-modal-sample-player-container"></div>
+  </div>
+
+  <!-- \u30B5\u30F3\u30D7\u30EB3 -->
+  <div class="dtm-modal-sample-box">
+    <div class="dtm-modal-sample-header">
+      <span class="dtm-modal-sample-tag">3. \u6B4C\u5531\u4ED8\u304D (\u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D)</span>
+      <button class="dtm-btn dtm-btn--ghost dtm-btn--xs dtm-modal-sample-copy-btn" data-mml="@0 t120 v100 o4g8 g8 e8 e8 f8 e8 d8 c8 g8 g8 e8 e8 d4.; @@0 tsukuyomi \u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D\u3069\u3093\u3050\u308A\u3053;">\u{1F4CB} \u30B3\u30D4\u30FC</button>
+    </div>
+    <pre style="margin: 0; padding: 6px;">@0 t120 v100 o4g8 g8 e8 e8 f8 e8 d8 c8 g8 g8 e8 e8 d4.;
+@@0 tsukuyomi \u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D\u3069\u3093\u3050\u308A\u3053;</pre>
+    <div class="dtm-modal-sample-desc">
+      @@0 tsukuyomi \u6B4C\u8A5E... \u3067\u30E1\u30ED\u30C7\u30A3\u30C8\u30E9\u30C3\u30AF\u306B\u6B4C\u8A5E\u3092\u540C\u671F\u3055\u305B\u3066\u6B4C\u308F\u305B\u307E\u3059\u3002\u203B\u72EC\u81EA\u62E1\u5F35
+    </div>
+    <div style="margin-top: 8px;">
+      <button class="dtm-btn dtm-btn--primary dtm-btn--xs dtm-modal-sample-play-btn" data-mml="@0 t120 v100 o4g8 g8 e8 e8 f8 e8 d8 c8 g8 g8 e8 e8 d4.; @@0 tsukuyomi \u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D\u3069\u3093\u3050\u308A\u3053;">\u25B6 \u8A66\u8074</button>
+    </div>
+    <div class="dtm-modal-sample-player-container"></div>
+  </div>
+</div>
+`;
+
 // src/mml-parser.ts
 var PITCH_MAP2 = {
   c: 0,
@@ -4137,7 +4234,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)) {
@@ -4147,6 +4244,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];
@@ -4161,6 +4261,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(" ");
 };
@@ -4748,9 +4850,13 @@ var DAW_CSS = `
 /* \u30C7\u30B6\u30A4\u30F3\u30C8\u30FC\u30AF\u30F3\u306F\u7DE8\u96C6UI\u672C\u4F53\uFF08.dtm-daw\uFF09\u306B\u52A0\u3048\u3001\u305D\u306E\u5916\u5074\u306B\u5DEE\u3057\u8FBC\u307E\u308C\u308B
    \u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u30D0\u30FC\uFF08.dtm-controlbar\uFF09\u306B\u3082\u4F9B\u7D66\u3059\u308B\u3002mountPresetSelect /
    mountModeSwitch \u306EUI\u306F .dtm-daw \u306E\u5144\u5F1F\u3068\u3057\u3066\u7F6E\u304B\u308C\u308B\u305F\u3081\u3001\u3053\u3053\u3067\u914D\u3089\u306A\u3044\u3068
-   var(--dtm-*) \u304C\u89E3\u6C7A\u3067\u304D\u305A\u7121\u88C5\u98FE\uFF08\u767D\u5730\u30FB\u65E2\u5B9A\u30D5\u30A9\u30F3\u30C8\uFF09\u306B\u306A\u3063\u3066\u3057\u307E\u3046\u3002 */
+   var(--dtm-*) \u304C\u89E3\u6C7A\u3067\u304D\u305A\u7121\u88C5\u98FE\uFF08\u767D\u5730\u30FB\u65E2\u5B9A\u30D5\u30A9\u30F3\u30C8\uFF09\u306B\u306A\u3063\u3066\u3057\u307E\u3046\u3002
+   \u518D\u751F\u5C02\u7528\u30D3\u30E5\u30FC\u306E\u30E2\u30FC\u30C0\u30EB\uFF0F\u5229\u7528\u898F\u7D04\u30AB\u30D0\u30FC\u306F document.body \u76F4\u4E0B\u3078\u91CD\u306D\u308B\u305F\u3081\u3001
+   .dtm-daw \u306E\u5916\u306B\u51FA\u308B\u3002\u3053\u308C\u3089\u3082\u540C\u69D8\u306B\u30C8\u30FC\u30AF\u30F3\u3092\u4F9B\u7D66\u3057\u306A\u3044\u3068\u9ED2\u5730\u30FB\u767D\u6587\u5B57\u306B\u306A\u308B\u3002 */
 .dtm-daw,
-.dtm-controlbar {
+.dtm-controlbar,
+.dtm-modal-overlay,
+.dtm-consent-overlay {
   /* PICO-8 16\u8272\u30D1\u30EC\u30C3\u30C8\u3088\u308A */
   --c-black:   #000000;
   --c-navy:    #1d2b53;
@@ -4878,7 +4984,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;
@@ -4888,6 +4994,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 */
@@ -5238,6 +5355,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; }
 
@@ -5348,10 +5474,76 @@ var DAW_CSS = `
   justify-content: center;
   padding: 16px;
   backdrop-filter: blur(2px);
+  /* body\u76F4\u4E0B\u306B\u91CD\u306D\u305F\u5834\u5408\uFF08\u518D\u751F\u5C02\u7528\u30D3\u30E5\u30FC\uFF09\u3067\u3082\u6587\u5B57\u8272\u30FB\u30D5\u30A9\u30F3\u30C8\u304C
+     .dtm-daw \u304B\u3089\u7D99\u627F\u3067\u304D\u306A\u3044\u305F\u3081\u3001\u3053\u3053\u3067\u660E\u793A\u3059\u308B\u3002 */
+  color: var(--dtm-text);
+  font-family: var(--dtm-font);
 }
 .dtm-modal-overlay[hidden] {
   display: none !important;
 }
+
+/* \u2500\u2500\u2500 \u5229\u7528\u898F\u7D04\u540C\u610F\u30AB\u30D0\u30FC \u2500\u2500\u2500 */
+.dtm-consent-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10100;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  backdrop-filter: blur(2px);
+  /* body\u76F4\u4E0B\u306B\u91CD\u306D\u308B\u305F\u3081 .dtm-daw \u304B\u3089\u7D99\u627F\u3067\u304D\u306A\u3044\u6587\u5B57\u8272\u30FB\u30D5\u30A9\u30F3\u30C8\u3092\u660E\u793A\u3002 */
+  color: var(--dtm-text);
+  font-family: var(--dtm-font);
+}
+.dtm-consent-overlay[hidden] {
+  display: none !important;
+}
+.dtm-consent-modal {
+  max-width: 450px;
+  width: 100%;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--dtm-surface);
+  border: 2px solid var(--c-black);
+  box-shadow:
+    inset 0 0 0 2px var(--c-black),
+    0 0 0 2px var(--dtm-primary),
+    4px 4px 0 var(--c-black);
+  overflow-y: auto;
+}
+.dtm-consent-header {
+  background: var(--dtm-deep);
+  color: var(--dtm-text);
+  padding: 8px 12px;
+  border-bottom: 2px solid var(--c-black);
+  font-weight: bold;
+  text-align: center;
+  font-size: 14px;
+}
+.dtm-consent-body {
+  padding: 12px 16px;
+  font-size: 13px;
+  line-height: 1.6;
+}
+.dtm-consent-body a {
+  color: var(--dtm-primary);
+  text-decoration: underline;
+}
+.dtm-consent-body a:hover {
+  color: var(--dtm-accent);
+}
+.dtm-consent-footer {
+  padding: 8px;
+  border-top: 2px solid var(--c-black);
+  background: var(--dtm-deep);
+  display: flex;
+  justify-content: center;
+}
+
 .dtm-modal {
   max-width: 500px;
   width: 100%;
@@ -5485,18 +5677,19 @@ var DAW_CSS = `
 }
 
 .dtm-hidden { display: none !important; }
-/* \u8AAD\u8FBC\u6642\u306E\u63A7\u3048\u3081\u306A\u304A\u77E5\u3089\u305B\uFF08\u4F8B: \u30B7\u30F3\u30D7\u30EB\u30E2\u30FC\u30C9\u3067\u306E\u30C8\u30E9\u30C3\u30AF\u5408\u7B97\uFF09\u3002\u4E3B\u5F35\u3057\u3059\u304E\u306A\u3044 muted \u8868\u793A\u3002 */
+/* \u8AAD\u8FBC\u6642\u306E\u8B66\u544A\u304A\u77E5\u3089\u305B\uFF08\u4F8B: \u30B7\u30F3\u30D7\u30EB\u30E2\u30FC\u30C9\u3067\u306E\u30C8\u30E9\u30C3\u30AF\u5408\u7B97\uFF09\u3002 */
 .dtm-load-note {
   margin: 6px 0 0;
   padding: 0 2px;
   font-family: var(--dtm-font);
-  font-size: 10px;
+  font-size: 11px;
   line-height: 1.5;
   letter-spacing: .04em;
-  color: var(--dtm-muted);
-  opacity: .85;
+  color: var(--dtm-warn); /* \u8B66\u544A\u8272\uFF08\u30AA\u30EC\u30F3\u30B8\uFF09 */
+  font-weight: bold;
+  opacity: 1.0;
 }
-.dtm-load-note::before { content: "\u24D8 "; }
+.dtm-load-note::before { content: "\u26A0 "; }
 .dtm-grow { flex: 1 1 auto; }
 .dtm-lyric-icon {
   flex: 0 0 auto;
@@ -5897,6 +6090,7 @@ var STEPS_PER_BEAT3 = 48;
 var STEPS_PER_BAR = 192;
 var DEFAULT_TRACK_COLORS = ["#00e436", "#29adff", "#ff77a8", "#ffec27"];
 var activePlayer = null;
+var agreedModelsInSession = /* @__PURE__ */ new Set();
 var LYRIC_MODEL_LABELS = {
   klatt: "\u8EFD\u91CF\u30ED\u30DC\u58F0",
   ...KOE_VOICEBANK_LABELS
@@ -6013,6 +6207,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;
@@ -6152,16 +6347,21 @@ var mountMmlPlayer = (target, mml, options = {}) => {
   const menuDropdown = doc.createElement("div");
   menuDropdown.className = "dtm-player-menu";
   menuDropdown.style.display = "none";
-  const copyMmlItem = doc.createElement("button");
-  copyMmlItem.type = "button";
-  copyMmlItem.className = "dtm-player-menu-item";
-  copyMmlItem.textContent = "MML\u30B3\u30D4\u30FC";
-  const embedItem = doc.createElement("button");
-  embedItem.type = "button";
-  embedItem.className = "dtm-player-menu-item";
-  embedItem.textContent = "\u57CB\u3081\u8FBC\u3080";
-  menuDropdown.appendChild(copyMmlItem);
+  const makeMenuItem = (label) => {
+    const item = doc.createElement("button");
+    item.type = "button";
+    item.className = "dtm-player-menu-item";
+    item.textContent = label;
+    return item;
+  };
+  const showMmlItem = makeMenuItem("MML\u3092\u8868\u793A");
+  const mmlInfoItem = makeMenuItem("MML\u66F8\u5F0F\u3068\u306F");
+  const embedItem = makeMenuItem("\u57CB\u3081\u8FBC\u3080");
+  const copyMmlItem = makeMenuItem("MML\u30B3\u30D4\u30FC");
+  menuDropdown.appendChild(showMmlItem);
+  menuDropdown.appendChild(mmlInfoItem);
   menuDropdown.appendChild(embedItem);
+  menuDropdown.appendChild(copyMmlItem);
   menuContainer.appendChild(menuDropdown);
   mmlHeader.appendChild(menuContainer);
   const toggleMenu = (show) => {
@@ -6184,38 +6384,200 @@ var mountMmlPlayer = (target, mml, options = {}) => {
     e.stopPropagation();
     toggleMenu();
   });
-  copyMmlItem.addEventListener("click", async (e) => {
-    e.stopPropagation();
-    const success = await copyToClipboard(doc, mml);
-    if (success) {
-      copyMmlItem.textContent = "\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F\uFF01";
-    } else {
-      copyMmlItem.textContent = "\u30B3\u30D4\u30FC\u5931\u6557";
+  let infoModalEl = null;
+  let modalSamplePlayer = null;
+  const closeInfoModal = () => {
+    if (modalSamplePlayer) {
+      modalSamplePlayer.stop();
+      modalSamplePlayer.destroy();
+      modalSamplePlayer = null;
+    }
+    infoModalEl?.remove();
+    infoModalEl = null;
+  };
+  const openInfoModal = (title) => {
+    closeInfoModal();
+    const overlay = doc.createElement("div");
+    overlay.className = "dtm-modal-overlay";
+    const modal = doc.createElement("div");
+    modal.className = "dtm-win dtm-modal";
+    const header = doc.createElement("div");
+    header.className = "dtm-modal-header";
+    const titleEl = doc.createElement("span");
+    titleEl.className = "dtm-modal-title";
+    titleEl.textContent = title;
+    const closeBtn = doc.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.className = "dtm-modal-close";
+    closeBtn.innerHTML = "&times;";
+    closeBtn.title = "\u9589\u3058\u308B";
+    header.append(titleEl, closeBtn);
+    const modalBody = doc.createElement("div");
+    modalBody.className = "dtm-modal-body";
+    modal.append(header, modalBody);
+    overlay.appendChild(modal);
+    closeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      closeInfoModal();
+    });
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) closeInfoModal();
+    });
+    doc.body.appendChild(overlay);
+    infoModalEl = overlay;
+    return modalBody;
+  };
+  const appendCopyButton = (parent, text) => {
+    const actions = doc.createElement("div");
+    actions.style.marginTop = "8px";
+    const copyBtn = doc.createElement("button");
+    copyBtn.type = "button";
+    copyBtn.className = "dtm-btn dtm-btn--primary dtm-btn--xs";
+    copyBtn.textContent = "\u{1F4CB} \u30B3\u30D4\u30FC";
+    copyBtn.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      const ok = await copyToClipboard(doc, text);
+      copyBtn.textContent = ok ? "\u2713 \u30B3\u30D4\u30FC\u5B8C\u4E86" : "\u30B3\u30D4\u30FC\u5931\u6557";
+      if (ok) copyBtn.classList.add("dtm-btn--success");
+      setTimeout(() => {
+        copyBtn.textContent = "\u{1F4CB} \u30B3\u30D4\u30FC";
+        copyBtn.classList.remove("dtm-btn--success");
+      }, 1200);
+    });
+    actions.appendChild(copyBtn);
+    parent.appendChild(actions);
+  };
+  const wireSampleButtons = (modalBody) => {
+    const copyBtns = modalBody.querySelectorAll(".dtm-modal-sample-copy-btn");
+    for (const btn of copyBtns) {
+      const el = btn;
+      el.addEventListener("click", async (e) => {
+        e.stopPropagation();
+        const sampleMml = el.getAttribute("data-mml") ?? "";
+        const original = el.textContent;
+        const ok = await copyToClipboard(doc, sampleMml);
+        el.textContent = ok ? "\u2713 \u30B3\u30D4\u30FC\u5B8C\u4E86" : "\u30B3\u30D4\u30FC\u5931\u6557";
+        if (ok) el.classList.add("dtm-btn--success");
+        setTimeout(() => {
+          el.textContent = original;
+          el.classList.remove("dtm-btn--success");
+        }, 1200);
+      });
     }
-    setTimeout(() => {
-      copyMmlItem.textContent = "MML\u30B3\u30D4\u30FC";
-    }, 2e3);
+    let activeSampleBtn = null;
+    const resetSampleBtn = (b) => {
+      if (!b) return;
+      b.textContent = "\u25B6 \u8A66\u8074";
+      b.classList.remove("dtm-btn--danger");
+      b.classList.add("dtm-btn--primary");
+    };
+    const markPlaying = (b) => {
+      b.textContent = "\u25A0 \u505C\u6B62";
+      b.classList.remove("dtm-btn--primary");
+      b.classList.add("dtm-btn--danger");
+    };
+    const playBtns = modalBody.querySelectorAll(".dtm-modal-sample-play-btn");
+    for (const btn of playBtns) {
+      const el = btn;
+      el.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const sampleMml = el.getAttribute("data-mml") ?? "";
+        if (activeSampleBtn === el && modalSamplePlayer) {
+          if (modalSamplePlayer.isPlaying()) {
+            modalSamplePlayer.stop();
+          } else {
+            modalSamplePlayer.play();
+            markPlaying(el);
+          }
+          return;
+        }
+        if (modalSamplePlayer) {
+          modalSamplePlayer.stop();
+          modalSamplePlayer.destroy();
+          modalSamplePlayer = null;
+        }
+        resetSampleBtn(activeSampleBtn);
+        activeSampleBtn = el;
+        const sampleBox = el.closest(".dtm-modal-sample-box");
+        const container = sampleBox?.querySelector(
+          ".dtm-modal-sample-player-container"
+        );
+        if (!container) return;
+        container.innerHTML = "";
+        modalSamplePlayer = mountMmlPlayer(container, sampleMml, {
+          onPlayNote: options.onPlayNote,
+          onPlayDrum: options.onPlayDrum,
+          onResumeAudio: options.onResumeAudio,
+          getAudioTime: options.getAudioTime,
+          singingVoices: options.singingVoices,
+          drumPatterns: options.drumPatterns,
+          volume: trackVolume,
+          // 解説モーダル内の試聴サンプルは規約同意を要求しない。
+          skipConsent: true,
+          onStop: () => {
+            if (activeSampleBtn === el) resetSampleBtn(el);
+          }
+        });
+        markPlaying(el);
+        modalSamplePlayer.play();
+      });
+    }
+  };
+  showMmlItem.addEventListener("click", (e) => {
+    e.stopPropagation();
+    toggleMenu(false);
+    const modalBody = openInfoModal("MML");
+    const pre = doc.createElement("pre");
+    pre.textContent = mml;
+    pre.style.whiteSpace = "pre-wrap";
+    pre.style.wordBreak = "break-all";
+    modalBody.appendChild(pre);
+    appendCopyButton(modalBody, mml);
+  });
+  mmlInfoItem.addEventListener("click", (e) => {
+    e.stopPropagation();
+    toggleMenu(false);
+    const modalBody = openInfoModal("MML\u306E\u66F8\u304D\u65B9\u89E3\u8AAC");
+    modalBody.innerHTML = MML_INFO_HTML;
+    wireSampleButtons(modalBody);
   });
   embedItem.addEventListener("click", async (e) => {
     e.stopPropagation();
-    embedItem.textContent = "\u751F\u6210\u4E2D...";
+    toggleMenu(false);
+    const modalBody = openInfoModal("\u57CB\u3081\u8FBC\u307F");
+    const loading = doc.createElement("p");
+    loading.textContent = "\u751F\u6210\u4E2D...";
+    modalBody.appendChild(loading);
     try {
       const embedBase = options.embedUrl ?? "https://onjmin.github.io/dtm/demo/embed.html";
       const payload = await encodeMml(mml);
       const url2 = `${embedBase}#${payload}`;
       const snippet = `<iframe src="${url2}" width="100%" height="260" frameborder="0" loading="lazy" title="@onjmin/dtm player"></iframe>`;
-      const success = await copyToClipboard(doc, snippet);
-      if (success) {
-        embedItem.textContent = "\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F\uFF01";
-      } else {
-        embedItem.textContent = "\u30B3\u30D4\u30FC\u5931\u6557";
-      }
+      if (!modalBody.isConnected) return;
+      loading.remove();
+      const desc = doc.createElement("p");
+      desc.textContent = "\u3053\u306EHTML\u3092\u30D6\u30ED\u30B0\u3084\u30B5\u30A4\u30C8\u306B\u8CBC\u308A\u4ED8\u3051\u308B\u3068\u3001\u30D7\u30EC\u30A4\u30E4\u30FC\u3092\u305D\u306E\u307E\u307E\u57CB\u3081\u8FBC\u3081\u307E\u3059\u3002";
+      const pre = doc.createElement("pre");
+      pre.textContent = snippet;
+      pre.style.whiteSpace = "pre-wrap";
+      pre.style.wordBreak = "break-all";
+      modalBody.append(desc, pre);
+      appendCopyButton(modalBody, snippet);
     } catch (err2) {
       console.error("[dtm] failed to generate embed snippet", err2);
-      embedItem.textContent = "\u751F\u6210\u5931\u6557";
+      if (modalBody.isConnected) loading.textContent = "\u751F\u6210\u306B\u5931\u6557\u3057\u307E\u3057\u305F";
+    }
+  });
+  copyMmlItem.addEventListener("click", async (e) => {
+    e.stopPropagation();
+    const success = await copyToClipboard(doc, mml);
+    if (success) {
+      copyMmlItem.textContent = "\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F\uFF01";
+    } else {
+      copyMmlItem.textContent = "\u30B3\u30D4\u30FC\u5931\u6557";
     }
     setTimeout(() => {
-      embedItem.textContent = "\u57CB\u3081\u8FBC\u3080";
+      copyMmlItem.textContent = "MML\u30B3\u30D4\u30FC";
     }, 2e3);
   });
   const promotedToImage = /* @__PURE__ */ new Set();
@@ -6461,6 +6823,77 @@ var mountMmlPlayer = (target, mml, options = {}) => {
     root.appendChild(termsDiv);
   }
   target.appendChild(root);
+  let consentOverlayEl = null;
+  const checkConsentAndShow = () => {
+    try {
+      if (options.skipConsent) return;
+      const unagreed = termsModels.filter((model) => {
+        if (agreedModelsInSession.has(model)) return false;
+        try {
+          if (typeof localStorage === "undefined" || !localStorage) return true;
+          return localStorage.getItem(`dtm_agreed_terms_${model}`) !== "true";
+        } catch (e) {
+          console.warn(
+            "[dtm-player] localStorage access denied in consent check",
+            e
+          );
+          return true;
+        }
+      });
+      if (unagreed.length === 0) return;
+      const consentOverlay = doc.createElement("div");
+      consentOverlay.className = "dtm-consent-overlay";
+      const modal = doc.createElement("div");
+      modal.className = "dtm-win dtm-consent-modal";
+      const header = doc.createElement("div");
+      header.className = "dtm-consent-header";
+      header.textContent = "\u5229\u7528\u898F\u7D04\u306E\u78BA\u8A8D";
+      const body2 = doc.createElement("div");
+      body2.className = "dtm-consent-body";
+      let contentHTML = `<p style="margin: 0 0 8px 0; line-height: 1.4; font-weight: bold; color: var(--dtm-danger);">\u672C\u30C7\u30FC\u30BF\u306B\u306F UTAU \u6B4C\u58F0\u97F3\u6E90\u304C\u542B\u307E\u308C\u3066\u3044\u307E\u3059\u3002<br>\u3054\u5229\u7528\u306B\u3042\u305F\u3063\u3066\u306F\u3001\u4EE5\u4E0B\u306E\u97F3\u6E90\u5229\u7528\u898F\u7D04\u3078\u306E\u540C\u610F\u304C\u5FC5\u8981\u3067\u3059\u3002</p>`;
+      for (const model of unagreed) {
+        const label = KOE_VOICEBANK_LABELS[model] || model;
+        const url2 = KOE_VOICEBANK_TERMS[model];
+        contentHTML += `
+					<div style="margin-bottom: 8px; padding: 6px 10px; background: var(--dtm-deep); border: 2px solid var(--c-black); box-shadow: 2px 2px 0 var(--c-black);">
+						<div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 11px; font-weight: bold; color: var(--dtm-gold);">
+							<span>\u4F7F\u7528\u6642\u306B\u306F</span>
+							<a href="${url2}" target="_blank" rel="noopener noreferrer" style="color: var(--dtm-primary); text-decoration: underline;">${label}UTAU\u97F3\u6E90</a>
+							<span>\u306E\u5229\u7528\u898F\u7D04\u306B\u5F93\u3063\u3066\u304F\u3060\u3055\u3044</span>
+						</div>
+					</div>
+				`;
+      }
+      body2.innerHTML = contentHTML;
+      const footer = doc.createElement("div");
+      footer.className = "dtm-consent-footer";
+      const btn = doc.createElement("button");
+      btn.type = "button";
+      btn.className = "dtm-btn dtm-btn--success";
+      btn.textContent = "\u540C\u610F\u3057\u3066\u5229\u7528\u3059\u308B";
+      btn.onclick = () => {
+        for (const model of unagreed) {
+          try {
+            if (typeof localStorage !== "undefined" && localStorage) {
+              localStorage.setItem(`dtm_agreed_terms_${model}`, "true");
+            }
+          } catch (e) {
+          }
+          agreedModelsInSession.add(model);
+        }
+        consentOverlay.remove();
+        consentOverlayEl = null;
+      };
+      footer.appendChild(btn);
+      modal.append(header, body2, footer);
+      consentOverlay.appendChild(modal);
+      doc.body.appendChild(consentOverlay);
+      consentOverlayEl = consentOverlay;
+    } catch (err2) {
+      console.error("[dtm-player] Error in checkConsentAndShow:", err2);
+    }
+  };
+  checkConsentAndShow();
   const autoScroll = (lane, el) => {
     if (el.offsetWidth === 0 || lane.clientWidth === 0) return;
     const elementCenter = el.offsetLeft + el.offsetWidth / 2;
@@ -6519,7 +6952,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 });
     },
@@ -6635,6 +7068,8 @@ var mountMmlPlayer = (target, mml, options = {}) => {
       hideActiveBalloon();
     }
     root.remove();
+    consentOverlayEl?.remove();
+    closeInfoModal();
   };
   const instance = {
     play,
@@ -6676,108 +7111,6 @@ var CHORD_INFO_HTML = `
   </ul>
 </div>
 `;
-var MML_INFO_HTML = `
-<div class="dtm-modal-body-content">
-  <h4>1. \u97F3\u7B26\u3068\u4F11\u7B26</h4>
-  <p><code>c</code>(\u30C9) <code>d</code>(\u30EC) <code>e</code>(\u30DF) <code>f</code>(\u30D5\u30A1) <code>g</code>(\u30BD) <code>a</code>(\u30E9) <code>b</code>(\u30B7) \u306E\u30A2\u30EB\u30D5\u30A1\u30D9\u30C3\u30C8\u3067\u8868\u3057\u307E\u3059\u3002</p>
-  <ul>
-    <li>\u534A\u97F3\u4E0A\u3052\u308B: <code>c#</code> \u307E\u305F\u306F <code>c+</code></li>
-    <li>\u534A\u97F3\u4E0B\u3052\u308B: <code>d-</code></li>
-    <li>\u4F11\u7B26: <code>r</code></li>
-  </ul>
-
-  <h4>2. \u97F3\u306E\u9577\u3055</h4>
-  <p>\u97F3\u540D\u3084\u4F11\u7B26\u306E\u5F8C\u306B\u6570\u5024\u3067\u6307\u5B9A\u3057\u307E\u3059\uFF08\u4F8B: <code>4</code> = 4\u5206\u97F3\u7B26, <code>8</code> = 8\u5206\u97F3\u7B26, <code>16</code> = 16\u5206\u97F3\u7B26\uFF09\u3002</p>
-  <ul>
-    <li><code>c4</code> : 4\u5206\u97F3\u7B26\u306E\u30C9</li>
-    <li><code>r8</code> : 8\u5206\u4F11\u7B26</li>
-    <li><code>c4.</code> : \u4ED8\u70B94\u5206\u97F3\u7B26\u306E\u30C9\uFF08\u9577\u3055\u30921.5\u500D\u306B\uFF09</li>
-    <li>\u6570\u5024\u3092\u7701\u7565\u3059\u308B\u3068\u3001<code>l</code> \u30B3\u30DE\u30F3\u30C9\u3067\u8A2D\u5B9A\u3055\u308C\u305F\u30C7\u30D5\u30A9\u30EB\u30C8\u9577\uFF08\u901A\u5E3816\u5206\uFF09\u306B\u306A\u308A\u307E\u3059\u3002</li>
-  </ul>
-
-  <h4>3. \u30AA\u30AF\u30BF\u30FC\u30D6\uFF08\u97F3\u306E\u9AD8\u3055\uFF09</h4>
-  <ul>
-    <li><code>o4</code>, <code>o5</code> : \u9AD8\u3055\u3092\u76F4\u63A5\u6307\u5B9A\uFF08\u3075\u3064\u3046\u306F o4 \u304B o5\uFF09</li>
-    <li><code>&gt;</code> : 1\u30AA\u30AF\u30BF\u30FC\u30D6\u4E0A\u3052\u308B</li>
-    <li><code>&lt;</code> : 1\u30AA\u30AF\u30BF\u30FC\u30D6\u4E0B\u3052\u308B</li>
-  </ul>
-
-  <h4>4. \u30C6\u30F3\u30DD</h4>
-  <ul>
-    <li><code>t120</code> : \u66F2\u306E\u901F\u3055\u3092BPM120\u306B\u6307\u5B9A\u3002\u203B\u30E1\u30ED\u30C7\u30A3\uFF08@0\uFF09\u306E\u30C6\u30F3\u30DD\u6307\u5B9A\u304C\u66F2\u5168\u4F53\u306B\u53CD\u6620\u3055\u308C\u307E\u3059\u3002</li>
-  </ul>
-
-  <h4>5. \u548C\u97F3</h4>
-  <p>\u97F3\u7B26\u3092 <code>[</code> \u3068 <code>]</code> \u3067\u56F2\u3080\u3068\u540C\u6642\u306B\u767A\u97F3\u3057\u307E\u3059\u3002</p>
-  <pre>\u4F8B: [ceg]4 \uFF08\u30C9\u30FB\u30DF\u30FB\u30BD\u30924\u5206\u97F3\u7B26\u3067\u540C\u6642\u306B\u767A\u97F3\uFF09</pre>
-
-  <h4>6. \u30C8\u30E9\u30C3\u30AF\u306E\u533A\u5207\u308A</h4>
-  <p><code>;</code> \u307E\u305F\u306F <code>@0</code>\u301C<code>@3</code> \u3067\u30C8\u30E9\u30C3\u30AF\u3092\u5207\u308A\u66FF\u3048\u307E\u3059\u3002</p>
-  <ul>
-    <li><code>@0</code>: \u30E1\u30ED\u30C7\u30A3</li>
-    <li><code>@1</code>: \u30B5\u30D6\u30E1\u30ED</li>
-    <li><code>@2</code>: \u30D9\u30FC\u30B9</li>
-    <li><code>@3</code>: \u4F34\u594F</li>
-  </ul>
-
-  <h4>7. \u6B4C\u58F0\u30FB\u6B4C\u8A5E\u5165\u529B</h4>
-  <p><code>@@&lt;\u30C8\u30E9\u30C3\u30AF\u756A\u53F7&gt; &lt;\u97F3\u6E90\u540D&gt; &lt;\u6B4C\u8A5E&gt;</code> \u306E\u5F62\u5F0F\u3067\u3001\u97F3\u7B26\u3068\u540C\u671F\u3059\u308B\u6B4C\u8A5E\u3092\u5165\u529B\u3067\u304D\u307E\u3059\u3002</p>
-  <pre>\u4F8B: @@0 tsukuyomi \u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D\u3069\u3093\u3050\u308A\u3053</pre>
-  <p style="margin-top:4px; margin-bottom:16px;"><small>\uFF08\u97F3\u6E90\u540D\u306F <code>tsukuyomi</code> \u3084 <code>klatt</code>, <code>roze</code> \u306A\u3069\u306E\u97F3\u58F0\u30E2\u30C7\u30EB\u3092\u6307\u5B9A\u3067\u304D\u307E\u3059\uFF09</small></p>
-
-  <h4 style="margin-top: 18px; border-top: 1px solid var(--dtm-border2); padding-top: 8px;">\u30B5\u30F3\u30D7\u30EB\u66F2\uFF08\u8A66\u8074\u30FB\u30B3\u30D4\u30FC\uFF09</h4>
-  
-  <!-- \u30B5\u30F3\u30D7\u30EB1 -->
-  <div class="dtm-modal-sample-box">
-    <div class="dtm-modal-sample-header">
-      <span class="dtm-modal-sample-tag">1. \u57FA\u672C\u306E\u30E1\u30ED\u30C7\u30A3</span>
-      <button class="dtm-btn dtm-btn--ghost dtm-btn--xs dtm-modal-sample-copy-btn" data-mml="@0 t120 l8 o5 c d e f g a b > c">\u{1F4CB} \u30B3\u30D4\u30FC</button>
-    </div>
-    <pre style="margin: 0; padding: 6px;">@0 t120 l8 o5 c d e f g a b &gt; c</pre>
-    <div class="dtm-modal-sample-desc">
-      \u57FA\u672C\u7684\u306A\u30E1\u30ED\u30C7\u30A3\u306E\u66F8\u304D\u65B9\uFF08\u97F3\u540D\u30FB\u9577\u3055\u30FB\u30AA\u30AF\u30BF\u30FC\u30D6\u3068\u30C6\u30F3\u30DD\uFF09\u3002
-    </div>
-    <div style="margin-top: 8px;">
-      <button class="dtm-btn dtm-btn--primary dtm-btn--xs dtm-modal-sample-play-btn" data-mml="@0 t120 l8 o5 c d e f g a b > c">\u25B6 \u8A66\u8074</button>
-    </div>
-    <div class="dtm-modal-sample-player-container"></div>
-  </div>
-
-  <!-- \u30B5\u30F3\u30D7\u30EB2 -->
-  <div class="dtm-modal-sample-box">
-    <div class="dtm-modal-sample-header">
-      <span class="dtm-modal-sample-tag">2. \u8907\u6570\u30C8\u30E9\u30C3\u30AF\u3068\u548C\u97F3</span>
-      <button class="dtm-btn dtm-btn--ghost dtm-btn--xs dtm-modal-sample-copy-btn" data-mml="@0 t120 o5 c e g2 ; @3 o4 [ceg]2 [ceg]2">\u{1F4CB} \u30B3\u30D4\u30FC</button>
-    </div>
-    <pre style="margin: 0; padding: 6px;">@0 t120 o5 c e g2 ;
-@3 o4 [ceg]2 [ceg]2</pre>
-    <div class="dtm-modal-sample-desc">
-      ; \u3067\u30C8\u30E9\u30C3\u30AF\uFF08\u4E0A\uFF1D\u30E1\u30ED\u30C7\u30A3\uFF0F\u4E0B\uFF1D\u4F34\u594F\uFF09\u3092\u5206\u3051\u3001[ceg] \u3067\u548C\u97F3\u3092\u9CF4\u3089\u3057\u307E\u3059\u3002
-    </div>
-    <div style="margin-top: 8px;">
-      <button class="dtm-btn dtm-btn--primary dtm-btn--xs dtm-modal-sample-play-btn" data-mml="@0 t120 o5 c e g2 ; @3 o4 [ceg]2 [ceg]2">\u25B6 \u8A66\u8074</button>
-    </div>
-    <div class="dtm-modal-sample-player-container"></div>
-  </div>
-
-  <!-- \u30B5\u30F3\u30D7\u30EB3 -->
-  <div class="dtm-modal-sample-box">
-    <div class="dtm-modal-sample-header">
-      <span class="dtm-modal-sample-tag">3. \u6B4C\u5531\u4ED8\u304D (\u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D)</span>
-      <button class="dtm-btn dtm-btn--ghost dtm-btn--xs dtm-modal-sample-copy-btn" data-mml="@0 t120 v100 o4g8 g8 e8 e8 f8 e8 d8 c8 g8 g8 e8 e8 d4.; @@0 tsukuyomi \u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D\u3069\u3093\u3050\u308A\u3053;">\u{1F4CB} \u30B3\u30D4\u30FC</button>
-    </div>
-    <pre style="margin: 0; padding: 6px;">@0 t120 v100 o4g8 g8 e8 e8 f8 e8 d8 c8 g8 g8 e8 e8 d4.;
-@@0 tsukuyomi \u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D\u3069\u3093\u3050\u308A\u3053;</pre>
-    <div class="dtm-modal-sample-desc">
-      @@0 tsukuyomi \u6B4C\u8A5E... \u3067\u30E1\u30ED\u30C7\u30A3\u30C8\u30E9\u30C3\u30AF\u306B\u6B4C\u8A5E\u3092\u540C\u671F\u3055\u305B\u3066\u6B4C\u308F\u305B\u307E\u3059\u3002\u203B\u72EC\u81EA\u62E1\u5F35
-    </div>
-    <div style="margin-top: 8px;">
-      <button class="dtm-btn dtm-btn--primary dtm-btn--xs dtm-modal-sample-play-btn" data-mml="@0 t120 v100 o4g8 g8 e8 e8 f8 e8 d8 c8 g8 g8 e8 e8 d4.; @@0 tsukuyomi \u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D\u3069\u3093\u3050\u308A\u3053;">\u25B6 \u8A66\u8074</button>
-    </div>
-    <div class="dtm-modal-sample-player-container"></div>
-  </div>
-</div>
-`;
 var MIDI_INFO_HTML = `
 <div class="dtm-modal-body-content">
   <h4>1. MIDI\u30D5\u30A1\u30A4\u30EB\u3068\u306F</h4>
@@ -7721,7 +8054,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);
   };
@@ -7989,6 +8322,7 @@ var mountDAW = (target, options = {}) => {
       instrument: currentInstrument || void 0,
       drum: currentDrumPattern !== "none" ? currentDrumPattern : void 0,
       volume: masterVolume,
+      drumVolume,
       mode
     });
     if (refs.decomposeChordToggle.checked) {
@@ -8140,6 +8474,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 = "";
@@ -8148,8 +8487,8 @@ var mountDAW = (target, options = {}) => {
       t.vocalPan = 64;
       t.vocalOctave = 0;
     }
-    lyrics?.forEach((lt, idx) => {
-      const t = trackStates[idx];
+    lyrics?.forEach((lt) => {
+      const t = trackStates[lt.trackId];
       if (!t) return;
       t.lyrics = lt.syllables.map((s) => s.kana).join("");
       t.lyricModel = lt.model;
@@ -8293,8 +8632,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;
     });
@@ -8657,6 +9005,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;
@@ -8731,6 +9093,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
   );
@@ -8767,7 +9130,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 });
     },
@@ -9326,7 +9689,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,
@@ -9365,68 +9727,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());
@@ -9633,7 +9933,6 @@ var createDtmStudio = async (options = {}) => {
       onPlayDrum: playDrum,
       singingVoices,
       parseMidi,
-      onToggleRecord,
       onInstrumentChange: handleInstrumentChange,
       ...dawOverrides
     };
@@ -9925,7 +10224,6 @@ var createDtmStudio = async (options = {}) => {
   playMML,
   playSingingMML,
   setDrawOffset,
-  setupRecorder,
   shiftNotes,
   stripLyrics,
   stripMmlMeta,