@onjmin/dtm 2.1.2 → 2.1.4

package/dist/index.d.mts

@@ -2077,6 +2077,13 @@ type DawOptions = {
     customVocals?: CustomVocalDef[];
     defaultBpm?: number;
     initialMML?: string;
+    /**
+     * ループ再生の初期状態（既定 false）。
+     * MML読み込み時に #loop=on があればそちらが優先される。
+     */
+    initialLoop?: boolean;
+    /** ループ再生のON/OFFが変化したときに呼ばれる */
+    onLoopChange?: (loop: boolean) => void;
     /** 利用規約への同意画面の表示をスキップするかどうか */
     skipConsent?: boolean;
     /**
@@ -2123,6 +2130,10 @@ type DawInstance = {
     loadMIDI: (bytes: Uint8Array) => void | Promise<void>;
     exportMIDI: () => Blob;
     setBpm: (bpm: number) => void;
+    /** 現在のループ再生状態（ON/OFF）を返す */
+    getLoop: () => boolean;
+    /** ループ再生状態を設定する。UIおよび再生シーケンサへ反映される。 */
+    setLoop: (loop: boolean) => void;
     getPlaybackState: () => PlaybackState;
     getCurrentPlayStep: () => number;
     forcePauseAt: (step: number) => void;
@@ -2787,6 +2798,11 @@ type MmlMeta = {
      * チャンネルストリップ共通のパラメータ（歌詞トラック固有の `vocalDelay`/`d`トークンとは別軸）。
      */
     trackDelaySend?: Record<number, number>;
+    /**
+     * ループ再生の指定（#loop=on / off）。BGM等で曲末停止せずシームレスにループさせる。
+     * 省略時はオフ。
+     */
+    loop?: boolean;
 };
 /** MMLからトップレベル宣言を抽出する */
 declare const parseMmlMeta: (mml: string) => MmlMeta;

package/dist/index.d.ts

@@ -2077,6 +2077,13 @@ type DawOptions = {
     customVocals?: CustomVocalDef[];
     defaultBpm?: number;
     initialMML?: string;
+    /**
+     * ループ再生の初期状態（既定 false）。
+     * MML読み込み時に #loop=on があればそちらが優先される。
+     */
+    initialLoop?: boolean;
+    /** ループ再生のON/OFFが変化したときに呼ばれる */
+    onLoopChange?: (loop: boolean) => void;
     /** 利用規約への同意画面の表示をスキップするかどうか */
     skipConsent?: boolean;
     /**
@@ -2123,6 +2130,10 @@ type DawInstance = {
     loadMIDI: (bytes: Uint8Array) => void | Promise<void>;
     exportMIDI: () => Blob;
     setBpm: (bpm: number) => void;
+    /** 現在のループ再生状態（ON/OFF）を返す */
+    getLoop: () => boolean;
+    /** ループ再生状態を設定する。UIおよび再生シーケンサへ反映される。 */
+    setLoop: (loop: boolean) => void;
     getPlaybackState: () => PlaybackState;
     getCurrentPlayStep: () => number;
     forcePauseAt: (step: number) => void;
@@ -2787,6 +2798,11 @@ type MmlMeta = {
      * チャンネルストリップ共通のパラメータ（歌詞トラック固有の `vocalDelay`/`d`トークンとは別軸）。
      */
     trackDelaySend?: Record<number, number>;
+    /**
+     * ループ再生の指定（#loop=on / off）。BGM等で曲末停止せずシームレスにループさせる。
+     * 省略時はオフ。
+     */
+    loop?: boolean;
 };
 /** MMLからトップレベル宣言を抽出する */
 declare const parseMmlMeta: (mml: string) => MmlMeta;

package/dist/index.js

@@ -4395,7 +4395,7 @@ var NATURAL_STEPS2 = {
 };
 var isNatural = (ch) => Object.hasOwn(NATURAL_STEPS2[12], ch);
 var clamp3 = (value, lo, hi) => Math.min(hi, Math.max(lo, value));
-var META_DIRECTIVE = /#(inst|drum|drumfont|volume|drumvolume|reverb|reverbdecay|reverbpredelay|delay|delaydiv|mastercomp|fadein|fadeout|mode|edo)=([\w:-]+)/gi;
+var META_DIRECTIVE = /#(inst|drum|drumfont|volume|drumvolume|reverb|reverbdecay|reverbpredelay|delay|delaydiv|mastercomp|fadein|fadeout|mode|edo|loop)=([\w:-]+)/gi;
 var TRACK_INST_DIRECTIVE = /#t(\d+)inst=([^#;\r\n]+)/gi;
 var TRACK_COMP_DIRECTIVE = /#t(\d+)comp=(\d+)/gi;
 var TRACK_WIDTH_DIRECTIVE = /#t(\d+)width=(\d+)/gi;
@@ -4448,6 +4448,9 @@ var parseMmlMeta = (mml) => {
     } else if (key === "edo") {
       const e = Number.parseInt(m[2], 10);
       if (e === 12 || e === 31) meta.edo = e;
+    } else if (key === "loop") {
+      const v = m[2].toLowerCase();
+      meta.loop = v === "on" || v === "1" || v === "true";
     }
   }
   for (const m of mml.matchAll(TRACK_INST_DIRECTIVE)) {
@@ -4551,6 +4554,7 @@ var formatMmlMeta = (meta, space = "") => {
     parts.push(`#fadeout=${meta.fadeOut}`);
   if (meta.mode) parts.push(`#mode=${meta.mode}`);
   if (meta.edo !== void 0 && meta.edo !== 12) parts.push(`#edo=${meta.edo}`);
+  if (meta.loop) parts.push("#loop=on");
   if (meta.trackInstruments) {
     for (const [idx, name] of Object.entries(meta.trackInstruments)) {
       if (name) parts.push(`#t${idx}inst=${name}`);
@@ -5078,7 +5082,11 @@ var createSequencer = (options) => {
     if (!active) return;
     const sps = secondsPerStep();
     const time = options.getAudioTime() - startTime;
-    options.onTick(getWrappedPlayStep(time, sps));
+    try {
+      options.onTick(getWrappedPlayStep(time, sps));
+    } catch (err2) {
+      console.error("[sequencer] error in onTick callback:", err2);
+    }
     animationId = requestAnimationFrame(animate);
   };
   const stop = () => {
@@ -10840,6 +10848,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
     options.onStop?.();
   };
   let isSeeking = false;
+  let lastCommittedStep = null;
   const seekTo = (step) => {
     const clamped = Math.min(maxStep, Math.max(0, Math.round(step)));
     renderPlayhead(clamped);
@@ -10851,16 +10860,42 @@ var mountMmlPlayer = (target, mml, options = {}) => {
       play(clamped);
     }
   };
-  seekInput.addEventListener("pointerdown", () => {
+  const commitSeek = () => {
+    isSeeking = false;
+    const step = Number(seekInput.value);
+    if (lastCommittedStep !== step) {
+      lastCommittedStep = step;
+      seekTo(step);
+    }
+  };
+  seekInput.addEventListener("pointerdown", (e) => {
     isSeeking = true;
+    lastCommittedStep = null;
+    try {
+      seekInput.setPointerCapture(e.pointerId);
+    } catch {
+    }
   });
   seekInput.addEventListener("input", () => {
     renderPlayhead(Number(seekInput.value));
     syncSeekFill();
   });
   seekInput.addEventListener("change", () => {
+    commitSeek();
+  });
+  seekInput.addEventListener("pointerup", (e) => {
+    try {
+      seekInput.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    commitSeek();
+  });
+  seekInput.addEventListener("pointercancel", (e) => {
+    try {
+      seekInput.releasePointerCapture(e.pointerId);
+    } catch {
+    }
     isSeeking = false;
-    seekTo(Number(seekInput.value));
   });
   playBtn.addEventListener("click", () => {
     if (playing) pause();
@@ -12405,19 +12440,45 @@ var mountChordPlayer = (target, chords, options = {}) => {
     }
     play(idx);
   };
-  seekInput.addEventListener("pointerdown", () => {
+  let lastCommittedSec = null;
+  const commitSeek = () => {
+    isSeeking = false;
+    if (totalSec <= 0) return;
+    const sec = Number(seekInput.value);
+    if (lastCommittedSec !== sec) {
+      lastCommittedSec = sec;
+      const idx = getActiveIndexBySec(sec);
+      seekTo(idx >= 0 ? idx : Math.max(0, chordEvents.length - 1));
+    }
+  };
+  seekInput.addEventListener("pointerdown", (e) => {
     isSeeking = true;
+    lastCommittedSec = null;
+    try {
+      seekInput.setPointerCapture(e.pointerId);
+    } catch {
+    }
   });
   seekInput.addEventListener("input", () => {
     updateTimeDisplay(Number(seekInput.value));
     syncSeekFill();
   });
   seekInput.addEventListener("change", () => {
+    commitSeek();
+  });
+  seekInput.addEventListener("pointerup", (e) => {
+    try {
+      seekInput.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    commitSeek();
+  });
+  seekInput.addEventListener("pointercancel", (e) => {
+    try {
+      seekInput.releasePointerCapture(e.pointerId);
+    } catch {
+    }
     isSeeking = false;
-    if (totalSec <= 0) return;
-    const sec = Number(seekInput.value);
-    const idx = getActiveIndexBySec(sec);
-    seekTo(idx >= 0 ? idx : Math.max(0, chordEvents.length - 1));
   });
   const stop = () => {
     if (isLoading) {
@@ -15530,6 +15591,15 @@ var buildUI = (target, options) => {
         </select>
         <button class="dtm-infobtn" data-dtm="edo-info" title="\u97F3\u5F8B\u306E\u89E3\u8AAC">${icon("info", 12)}</button>
       </div>
+      <div class="dtm-row">
+        <span class="dtm-label">\u30EB\u30FC\u30D7\u518D\u751F</span>
+        <label class="dtm-toggle">
+          <input type="checkbox" data-dtm="loop-toggle">
+          <span data-dtm="loop-toggle-label">OFF</span>
+        </label>
+        <span class="dtm-grow"></span>
+        <button class="dtm-infobtn" data-dtm="loop-info" title="\u30EB\u30FC\u30D7\u518D\u751F\u306E\u89E3\u8AAC">${icon("info", 12)}</button>
+      </div>
       <div class="dtm-row">
         <span class="dtm-label">\u5168\u4F53\u97F3\u91CF</span>
         <input type="range" class="dtm-range dtm-grow" data-dtm="master-volume" value="50" min="0" max="100">
@@ -15867,6 +15937,9 @@ var buildUI = (target, options) => {
     vScrollThumb: sel("vscroll-thumb"),
     hScroll: sel("hscroll"),
     hScrollThumb: sel("hscroll-thumb"),
+    loopToggle: sel("loop-toggle"),
+    loopToggleLabel: sel("loop-toggle-label"),
+    loopInfoBtn: sel("loop-info"),
     masterVolume: sel("master-volume"),
     masterVolumeLabel: sel("master-volume-label"),
     masterComp: sel("master-comp"),
@@ -17721,8 +17794,10 @@ var createRenderer = (mountTarget, width = 800, height = 450, config) => {
   const getXY = (e) => {
     const { clientX, clientY } = e;
     const rect = g_grid_canvas.getBoundingClientRect();
-    const x2 = Math.floor(clientX - rect.left);
-    const y = Math.floor(clientY - rect.top);
+    const scaleX = rect.width > 0 ? g_grid_canvas.width / rect.width : 1;
+    const scaleY = rect.height > 0 ? g_grid_canvas.height / rect.height : 1;
+    const x2 = Math.floor((clientX - rect.left) * scaleX);
+    const y = Math.floor((clientY - rect.top) * scaleY);
     return [x2, y, e.buttons];
   };
   const getGridPosition = (e) => {
@@ -17756,7 +17831,7 @@ var createRenderer = (mountTarget, width = 800, height = 450, config) => {
         const absoluteY = y + g_draw_offset_y;
         const yIndex = Math.floor(absoluteY / keyHeight);
         const pitch = units(pitchRangeStart + (keyCount - 1 - yIndex) * upr);
-        if (pitch >= pitchRangeStart && pitch < pitchRangeStart + keyCount) {
+        if (pitch >= pitchRangeStart && pitch < pitchRangeStart + keyCount * upr) {
           requestAnimationFrame(() => callback(step, pitch));
         }
       },
@@ -18050,6 +18125,16 @@ var TRACK_DELAYSEND_INFO_HTML = `
   <p>[delay]\u30D1\u30CD\u30EB\u306E\u639B\u304B\u308A\u5177\u5408\u304C0%\u3060\u3068\u3001\u3053\u3053\u3092\u3044\u304F\u3089\u4E0A\u3052\u3066\u3082\u7121\u97F3\u306E\u307E\u307E\u3067\u3059\u3002\u300C\u9001\u308A\u91CF\uFF08\u3053\u306E\u30C8\u30E9\u30C3\u30AF\u304C\u3069\u308C\u3060\u3051\u63D0\u4F9B\u3059\u308B\u304B\uFF09\u300D\u3068\u300C\u30DE\u30B9\u30BF\u306E\u30C7\u30A3\u30EC\u30A4\u8A2D\u5B9A\uFF08\u5B9F\u969B\u306B\u3069\u3093\u306A\u7E70\u308A\u8FD4\u3057\u304C\u639B\u304B\u308B\u304B\uFF09\u300D\u306E\u4E8C\u6BB5\u69CB\u3048\u306B\u306A\u3063\u3066\u3044\u308B\u305F\u3081\u3067\u3059\u3002\u4E21\u65B9\u3092\u78BA\u8A8D\u3057\u3066\u304F\u3060\u3055\u3044\u3002</p>
 </div>
 `;
+var LOOP_INFO_HTML = `
+<div class="dtm-modal-body-content">
+  <h4>\u4F55\u3092\u3059\u308B\u8A2D\u5B9A\u304B</h4>
+  <p>\u30EB\u30FC\u30D7\u518D\u751F\u3092\u6709\u52B9\u306B\u3057\u307E\u3059\u3002ON\u306B\u3059\u308B\u3068\u3001\u518D\u751F\u304C\u66F2\u672B\u3067\u505C\u6B62\u305B\u305A\u3001\u5148\u982D\u304B\u3089\u30B7\u30FC\u30E0\u30EC\u30B9\u306B\u7E70\u308A\u8FD4\u3055\u308C\u307E\u3059\u3002</p>
+  <h4>MML\u51FA\u529B\u3078\u306E\u53CD\u6620</h4>
+  <p>\u30EB\u30FC\u30D7\u518D\u751F\u304CON\u306E\u5834\u5408\u3001MML\u751F\u6210\u6642\u306B <code>#loop=on</code> \u30E1\u30BF\u884C\u304C\u51FA\u529B\u3055\u308C\u307E\u3059\u3002\u57CB\u3081\u8FBC\u307F\u30D7\u30EC\u30A4\u30E4\u30FC\u3084\u518D\u751F\u5C02\u7528\u30D7\u30EC\u30A4\u30E4\u30FC\uFF08mountPlayer / mountChordPlayer\uFF09\u3067\u3082\u3053\u306EMML\u3092\u8AAD\u307F\u8FBC\u3080\u3053\u3068\u3067\u81EA\u52D5\u7684\u306B\u30EB\u30FC\u30D7\u518D\u751F\u3055\u308C\u307E\u3059\u3002</p>
+  <h4>BGM\u3084\u30B2\u30FC\u30E0\u97F3\u697D\u5411\u3051</h4>
+  <p>Web\u30B5\u30A4\u30C8\u306EBGM\u3084\u30B2\u30FC\u30E0\u306E\u30B9\u30C6\u30FC\u30B8\u66F2\u306A\u3069\u3001\u9014\u5207\u308C\u305A\u306B\u30EB\u30FC\u30D7\u3055\u305B\u305F\u3044\u66F2\u306E\u5236\u4F5C\u306B\u6700\u9069\u3067\u3059\u3002</p>
+</div>
+`;
 var MASTER_COMP_INFO_HTML = `
 <div class="dtm-modal-body-content">
   <h4>\u4F55\u3092\u3059\u308B\u8A2D\u5B9A\u304B</h4>
@@ -18595,6 +18680,18 @@ var mountDAW = (target, options = {}) => {
     options.singingVoices?.setVolume(masterVolume / 100);
   };
   applyMasterVolume(masterVolume);
+  let loopEnabled = options.initialLoop ?? false;
+  const applyLoop = (enabled) => {
+    loopEnabled = enabled;
+    if (refs.loopToggle) {
+      refs.loopToggle.checked = enabled;
+    }
+    if (refs.loopToggleLabel) {
+      refs.loopToggleLabel.textContent = enabled ? "ON" : "OFF";
+    }
+    options.onLoopChange?.(enabled);
+  };
+  applyLoop(loopEnabled);
   const snapToEdoGrid = (u) => {
     const upr = renderConfig.unitsPerRow ?? UNITS_PER_SEMITONE;
     return units(Math.round(u / upr) * upr);
@@ -19190,7 +19287,9 @@ var mountDAW = (target, options = {}) => {
       unitsPerRow: upr = UNITS_PER_SEMITONE
     } = renderConfig;
     const offset = renderer.getDrawOffset();
-    for (const note of active.core.getNotes()) {
+    const notes = active.core.getNotes();
+    for (let i2 = notes.length - 1; i2 >= 0; i2--) {
+      const note = notes[i2];
       const logicalX = note.startStep * stepWidth;
       const yIndex = keyCount - 1 - (note.pitchUnits - pitchRangeStart) / upr;
       const logicalY = yIndex * keyHeight;
@@ -19266,14 +19365,18 @@ var mountDAW = (target, options = {}) => {
       return;
     }
     hasDragged = false;
-    const existing = findActiveNoteAt(x2, y, TOUCH_HIT_MARGIN);
+    const hitMargin = event.pointerType === "mouse" ? 0 : Math.min(
+      TOUCH_HIT_MARGIN,
+      Math.max(0, Math.floor(renderConfig.keyHeight * 0.25))
+    );
+    const existing = findActiveNoteAt(x2, y, hitMargin);
     if (existing) {
       playPreview(existing.pitchUnits);
       const { stepWidth } = renderConfig;
       const offset = renderer.getDrawOffset();
       const renderX = existing.startStep * stepWidth - offset.x;
       const w = existing.durationSteps * stepWidth;
-      if (x2 >= renderX + w - resizeHandleWidth && x2 <= renderX + w) {
+      if (x2 >= renderX + w - resizeHandleWidth && x2 <= renderX + w + hitMargin) {
         dragState = {
           noteId: existing.id,
           mode: "resize",
@@ -19288,7 +19391,7 @@ var mountDAW = (target, options = {}) => {
           noteId: existing.id,
           mode: "move",
           dragOffsetStep: step - existing.startStep,
-          dragOffsetPitch: pitch - existing.pitchUnits,
+          dragOffsetPitch: 0,
           startStep: existing.startStep,
           durationSteps: existing.durationSteps,
           lastPreviewPitch: existing.pitchUnits
@@ -19403,7 +19506,7 @@ var mountDAW = (target, options = {}) => {
             const orig = selectedOriginal.find((o) => o.id === grab.id);
             if (orig) {
               const newGrab = units(orig.pitch + deltaPitch);
-              if (newGrab !== lastMultiPreviewPitch && newGrab >= 0 && newGrab < 128) {
+              if (newGrab !== lastMultiPreviewPitch && newGrab >= PITCH_RANGE_START && newGrab <= PITCH_RANGE_END) {
                 lastMultiPreviewPitch = newGrab;
                 playPreview(newGrab);
               }
@@ -19552,11 +19655,9 @@ var mountDAW = (target, options = {}) => {
     gridCanvas.addEventListener("dblclick", (event) => {
       event.preventDefault();
       if (isActiveLocked()) return;
-      const { step, pitch } = renderer.getGridPosition(event);
+      const { x: x2, y } = renderer.getGridPosition(event);
       const active = getActive();
-      const note = active.core.getNotes().find(
-        (n) => n.pitchUnits === pitch && step >= n.startStep && step < n.startStep + n.durationSteps
-      );
+      const note = findActiveNoteAt(x2, y);
       if (note) active.core.deleteNoteById(note.id);
     });
     gridCanvas.addEventListener(
@@ -19656,6 +19757,7 @@ var mountDAW = (target, options = {}) => {
     getPlayStartStep: () => playStartStep,
     getDrumPattern: (currentBar) => resolveDrumPattern(currentDrumPattern, drumPatterns, currentBar),
     getSoloTrackId: () => isSolo ? activeTrackId : null,
+    getLoop: () => loopEnabled,
     getAudioTime,
     onPlayNote: (e) => {
       if (audioMutedTracks.has(e.trackId)) return;
@@ -19683,6 +19785,19 @@ var mountDAW = (target, options = {}) => {
           getMaxOffsetX()
         );
         renderer.setDrawOffset(currentOffsetX, currentOffsetY);
+      } else if (currentPlayStep < currentOffsetX / renderConfig.stepWidth) {
+        const visibleBars = Math.max(
+          1,
+          Math.round(visibleSteps / renderConfig.stepsPerBar)
+        );
+        currentOffsetX = clamp5(
+          Math.floor(
+            currentPlayStep / (visibleBars * renderConfig.stepsPerBar)
+          ) * visibleBars * renderConfig.stepsPerBar * renderConfig.stepWidth,
+          0,
+          getMaxOffsetX()
+        );
+        renderer.setDrawOffset(currentOffsetX, currentOffsetY);
       }
       redrawAll();
     },
@@ -19798,8 +19913,18 @@ var mountDAW = (target, options = {}) => {
       options.onScheduleFade?.(params);
     }
     if (streaming && voices) {
+      let loopLengthSec;
+      let loopStartSec;
+      if (loopEnabled) {
+        const endStep = getSongEndStepExact();
+        const sps = 60 / bpm / 48;
+        loopStartSec = 0;
+        loopLengthSec = endStep * sps;
+      }
       voices.startStream(streamTracks, sequencer.getStartTime(), {
         isAudible: (t) => !isSolo || t.id === activeTrackId,
+        loopLengthSec,
+        loopStartSec,
         onScheduled: (t, note, t0) => {
           if (!t.id) return;
           flashTrackPill(t.id, t0 - getAudioTime(), note.durationSec);
@@ -20811,6 +20936,7 @@ var mountDAW = (target, options = {}) => {
         fadeOut: Math.round(fadeOutSec * 10),
         mode,
         edo: renderConfig.edo,
+        loop: loopEnabled ? true : void 0,
         trackInstruments: trackInstMeta,
         trackCompression: trackCompMeta,
         trackWidth: trackWidthMeta,
@@ -20840,6 +20966,7 @@ var mountDAW = (target, options = {}) => {
         fadeOut: Math.round(fadeOutSec * 10),
         mode,
         edo: renderConfig.edo,
+        loop: loopEnabled ? true : void 0,
         trackInstruments: trackInstMeta,
         trackCompression: trackCompMeta,
         trackWidth: trackWidthMeta,
@@ -21053,6 +21180,7 @@ var mountDAW = (target, options = {}) => {
       }
       applyEdo(meta.edo ?? 12);
       refs.edoSelect.value = String(renderConfig.edo ?? 12);
+      applyLoop(meta.loop ?? false);
       if (meta.drumVolume !== void 0) {
         drumVolume = meta.drumVolume;
         refs.drumVolume.value = String(meta.drumVolume);
@@ -21565,6 +21693,12 @@ var mountDAW = (target, options = {}) => {
     refs.edoInfoBtn.addEventListener("click", () => {
       showModal("\u97F3\u5F8B\u306E\u89E3\u8AAC", EDO_INFO_HTML);
     });
+    refs.loopToggle.addEventListener("change", () => {
+      applyLoop(refs.loopToggle.checked);
+    });
+    refs.loopInfoBtn.addEventListener("click", () => {
+      showModal("\u30EB\u30FC\u30D7\u518D\u751F\u306E\u89E3\u8AAC", LOOP_INFO_HTML);
+    });
     refs.masterVolume.addEventListener("input", () => {
       applyMasterVolume(Number.parseInt(refs.masterVolume.value, 10) || 0);
     });
@@ -22966,6 +23100,8 @@ var mountDAW = (target, options = {}) => {
     },
     exportMIDI: exportMIDI2,
     setBpm,
+    getLoop: () => loopEnabled,
+    setLoop: (loop) => applyLoop(loop),
     getPlaybackState: () => playbackState,
     getCurrentPlayStep,
     forcePauseAt,
@@ -23419,7 +23555,7 @@ var createPianoRoll = (options, handlers) => {
       const h = keyHeight;
       const renderX = logicalX - offset.x;
       const renderY = logicalY - offset.y;
-      if (x2 >= renderX && x2 <= renderX + w && y >= renderY && y <= renderY + h) {
+      if (x2 >= renderX && x2 < renderX + w && y >= renderY && y < renderY + h) {
         return note;
       }
     }

package/dist/index.mjs

@@ -4213,7 +4213,7 @@ var NATURAL_STEPS2 = {
 };
 var isNatural = (ch) => Object.hasOwn(NATURAL_STEPS2[12], ch);
 var clamp3 = (value, lo, hi) => Math.min(hi, Math.max(lo, value));
-var META_DIRECTIVE = /#(inst|drum|drumfont|volume|drumvolume|reverb|reverbdecay|reverbpredelay|delay|delaydiv|mastercomp|fadein|fadeout|mode|edo)=([\w:-]+)/gi;
+var META_DIRECTIVE = /#(inst|drum|drumfont|volume|drumvolume|reverb|reverbdecay|reverbpredelay|delay|delaydiv|mastercomp|fadein|fadeout|mode|edo|loop)=([\w:-]+)/gi;
 var TRACK_INST_DIRECTIVE = /#t(\d+)inst=([^#;\r\n]+)/gi;
 var TRACK_COMP_DIRECTIVE = /#t(\d+)comp=(\d+)/gi;
 var TRACK_WIDTH_DIRECTIVE = /#t(\d+)width=(\d+)/gi;
@@ -4266,6 +4266,9 @@ var parseMmlMeta = (mml) => {
     } else if (key === "edo") {
       const e = Number.parseInt(m[2], 10);
       if (e === 12 || e === 31) meta.edo = e;
+    } else if (key === "loop") {
+      const v = m[2].toLowerCase();
+      meta.loop = v === "on" || v === "1" || v === "true";
     }
   }
   for (const m of mml.matchAll(TRACK_INST_DIRECTIVE)) {
@@ -4369,6 +4372,7 @@ var formatMmlMeta = (meta, space = "") => {
     parts.push(`#fadeout=${meta.fadeOut}`);
   if (meta.mode) parts.push(`#mode=${meta.mode}`);
   if (meta.edo !== void 0 && meta.edo !== 12) parts.push(`#edo=${meta.edo}`);
+  if (meta.loop) parts.push("#loop=on");
   if (meta.trackInstruments) {
     for (const [idx, name] of Object.entries(meta.trackInstruments)) {
       if (name) parts.push(`#t${idx}inst=${name}`);
@@ -4896,7 +4900,11 @@ var createSequencer = (options) => {
     if (!active) return;
     const sps = secondsPerStep();
     const time = options.getAudioTime() - startTime;
-    options.onTick(getWrappedPlayStep(time, sps));
+    try {
+      options.onTick(getWrappedPlayStep(time, sps));
+    } catch (err2) {
+      console.error("[sequencer] error in onTick callback:", err2);
+    }
     animationId = requestAnimationFrame(animate);
   };
   const stop = () => {
@@ -10658,6 +10666,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
     options.onStop?.();
   };
   let isSeeking = false;
+  let lastCommittedStep = null;
   const seekTo = (step) => {
     const clamped = Math.min(maxStep, Math.max(0, Math.round(step)));
     renderPlayhead(clamped);
@@ -10669,16 +10678,42 @@ var mountMmlPlayer = (target, mml, options = {}) => {
       play(clamped);
     }
   };
-  seekInput.addEventListener("pointerdown", () => {
+  const commitSeek = () => {
+    isSeeking = false;
+    const step = Number(seekInput.value);
+    if (lastCommittedStep !== step) {
+      lastCommittedStep = step;
+      seekTo(step);
+    }
+  };
+  seekInput.addEventListener("pointerdown", (e) => {
     isSeeking = true;
+    lastCommittedStep = null;
+    try {
+      seekInput.setPointerCapture(e.pointerId);
+    } catch {
+    }
   });
   seekInput.addEventListener("input", () => {
     renderPlayhead(Number(seekInput.value));
     syncSeekFill();
   });
   seekInput.addEventListener("change", () => {
+    commitSeek();
+  });
+  seekInput.addEventListener("pointerup", (e) => {
+    try {
+      seekInput.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    commitSeek();
+  });
+  seekInput.addEventListener("pointercancel", (e) => {
+    try {
+      seekInput.releasePointerCapture(e.pointerId);
+    } catch {
+    }
     isSeeking = false;
-    seekTo(Number(seekInput.value));
   });
   playBtn.addEventListener("click", () => {
     if (playing) pause();
@@ -12223,19 +12258,45 @@ var mountChordPlayer = (target, chords, options = {}) => {
     }
     play(idx);
   };
-  seekInput.addEventListener("pointerdown", () => {
+  let lastCommittedSec = null;
+  const commitSeek = () => {
+    isSeeking = false;
+    if (totalSec <= 0) return;
+    const sec = Number(seekInput.value);
+    if (lastCommittedSec !== sec) {
+      lastCommittedSec = sec;
+      const idx = getActiveIndexBySec(sec);
+      seekTo(idx >= 0 ? idx : Math.max(0, chordEvents.length - 1));
+    }
+  };
+  seekInput.addEventListener("pointerdown", (e) => {
     isSeeking = true;
+    lastCommittedSec = null;
+    try {
+      seekInput.setPointerCapture(e.pointerId);
+    } catch {
+    }
   });
   seekInput.addEventListener("input", () => {
     updateTimeDisplay(Number(seekInput.value));
     syncSeekFill();
   });
   seekInput.addEventListener("change", () => {
+    commitSeek();
+  });
+  seekInput.addEventListener("pointerup", (e) => {
+    try {
+      seekInput.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    commitSeek();
+  });
+  seekInput.addEventListener("pointercancel", (e) => {
+    try {
+      seekInput.releasePointerCapture(e.pointerId);
+    } catch {
+    }
     isSeeking = false;
-    if (totalSec <= 0) return;
-    const sec = Number(seekInput.value);
-    const idx = getActiveIndexBySec(sec);
-    seekTo(idx >= 0 ? idx : Math.max(0, chordEvents.length - 1));
   });
   const stop = () => {
     if (isLoading) {
@@ -15348,6 +15409,15 @@ var buildUI = (target, options) => {
         </select>
         <button class="dtm-infobtn" data-dtm="edo-info" title="\u97F3\u5F8B\u306E\u89E3\u8AAC">${icon("info", 12)}</button>
       </div>
+      <div class="dtm-row">
+        <span class="dtm-label">\u30EB\u30FC\u30D7\u518D\u751F</span>
+        <label class="dtm-toggle">
+          <input type="checkbox" data-dtm="loop-toggle">
+          <span data-dtm="loop-toggle-label">OFF</span>
+        </label>
+        <span class="dtm-grow"></span>
+        <button class="dtm-infobtn" data-dtm="loop-info" title="\u30EB\u30FC\u30D7\u518D\u751F\u306E\u89E3\u8AAC">${icon("info", 12)}</button>
+      </div>
       <div class="dtm-row">
         <span class="dtm-label">\u5168\u4F53\u97F3\u91CF</span>
         <input type="range" class="dtm-range dtm-grow" data-dtm="master-volume" value="50" min="0" max="100">
@@ -15685,6 +15755,9 @@ var buildUI = (target, options) => {
     vScrollThumb: sel("vscroll-thumb"),
     hScroll: sel("hscroll"),
     hScrollThumb: sel("hscroll-thumb"),
+    loopToggle: sel("loop-toggle"),
+    loopToggleLabel: sel("loop-toggle-label"),
+    loopInfoBtn: sel("loop-info"),
     masterVolume: sel("master-volume"),
     masterVolumeLabel: sel("master-volume-label"),
     masterComp: sel("master-comp"),
@@ -17539,8 +17612,10 @@ var createRenderer = (mountTarget, width = 800, height = 450, config) => {
   const getXY = (e) => {
     const { clientX, clientY } = e;
     const rect = g_grid_canvas.getBoundingClientRect();
-    const x2 = Math.floor(clientX - rect.left);
-    const y = Math.floor(clientY - rect.top);
+    const scaleX = rect.width > 0 ? g_grid_canvas.width / rect.width : 1;
+    const scaleY = rect.height > 0 ? g_grid_canvas.height / rect.height : 1;
+    const x2 = Math.floor((clientX - rect.left) * scaleX);
+    const y = Math.floor((clientY - rect.top) * scaleY);
     return [x2, y, e.buttons];
   };
   const getGridPosition = (e) => {
@@ -17574,7 +17649,7 @@ var createRenderer = (mountTarget, width = 800, height = 450, config) => {
         const absoluteY = y + g_draw_offset_y;
         const yIndex = Math.floor(absoluteY / keyHeight);
         const pitch = units(pitchRangeStart + (keyCount - 1 - yIndex) * upr);
-        if (pitch >= pitchRangeStart && pitch < pitchRangeStart + keyCount) {
+        if (pitch >= pitchRangeStart && pitch < pitchRangeStart + keyCount * upr) {
           requestAnimationFrame(() => callback(step, pitch));
         }
       },
@@ -17868,6 +17943,16 @@ var TRACK_DELAYSEND_INFO_HTML = `
   <p>[delay]\u30D1\u30CD\u30EB\u306E\u639B\u304B\u308A\u5177\u5408\u304C0%\u3060\u3068\u3001\u3053\u3053\u3092\u3044\u304F\u3089\u4E0A\u3052\u3066\u3082\u7121\u97F3\u306E\u307E\u307E\u3067\u3059\u3002\u300C\u9001\u308A\u91CF\uFF08\u3053\u306E\u30C8\u30E9\u30C3\u30AF\u304C\u3069\u308C\u3060\u3051\u63D0\u4F9B\u3059\u308B\u304B\uFF09\u300D\u3068\u300C\u30DE\u30B9\u30BF\u306E\u30C7\u30A3\u30EC\u30A4\u8A2D\u5B9A\uFF08\u5B9F\u969B\u306B\u3069\u3093\u306A\u7E70\u308A\u8FD4\u3057\u304C\u639B\u304B\u308B\u304B\uFF09\u300D\u306E\u4E8C\u6BB5\u69CB\u3048\u306B\u306A\u3063\u3066\u3044\u308B\u305F\u3081\u3067\u3059\u3002\u4E21\u65B9\u3092\u78BA\u8A8D\u3057\u3066\u304F\u3060\u3055\u3044\u3002</p>
 </div>
 `;
+var LOOP_INFO_HTML = `
+<div class="dtm-modal-body-content">
+  <h4>\u4F55\u3092\u3059\u308B\u8A2D\u5B9A\u304B</h4>
+  <p>\u30EB\u30FC\u30D7\u518D\u751F\u3092\u6709\u52B9\u306B\u3057\u307E\u3059\u3002ON\u306B\u3059\u308B\u3068\u3001\u518D\u751F\u304C\u66F2\u672B\u3067\u505C\u6B62\u305B\u305A\u3001\u5148\u982D\u304B\u3089\u30B7\u30FC\u30E0\u30EC\u30B9\u306B\u7E70\u308A\u8FD4\u3055\u308C\u307E\u3059\u3002</p>
+  <h4>MML\u51FA\u529B\u3078\u306E\u53CD\u6620</h4>
+  <p>\u30EB\u30FC\u30D7\u518D\u751F\u304CON\u306E\u5834\u5408\u3001MML\u751F\u6210\u6642\u306B <code>#loop=on</code> \u30E1\u30BF\u884C\u304C\u51FA\u529B\u3055\u308C\u307E\u3059\u3002\u57CB\u3081\u8FBC\u307F\u30D7\u30EC\u30A4\u30E4\u30FC\u3084\u518D\u751F\u5C02\u7528\u30D7\u30EC\u30A4\u30E4\u30FC\uFF08mountPlayer / mountChordPlayer\uFF09\u3067\u3082\u3053\u306EMML\u3092\u8AAD\u307F\u8FBC\u3080\u3053\u3068\u3067\u81EA\u52D5\u7684\u306B\u30EB\u30FC\u30D7\u518D\u751F\u3055\u308C\u307E\u3059\u3002</p>
+  <h4>BGM\u3084\u30B2\u30FC\u30E0\u97F3\u697D\u5411\u3051</h4>
+  <p>Web\u30B5\u30A4\u30C8\u306EBGM\u3084\u30B2\u30FC\u30E0\u306E\u30B9\u30C6\u30FC\u30B8\u66F2\u306A\u3069\u3001\u9014\u5207\u308C\u305A\u306B\u30EB\u30FC\u30D7\u3055\u305B\u305F\u3044\u66F2\u306E\u5236\u4F5C\u306B\u6700\u9069\u3067\u3059\u3002</p>
+</div>
+`;
 var MASTER_COMP_INFO_HTML = `
 <div class="dtm-modal-body-content">
   <h4>\u4F55\u3092\u3059\u308B\u8A2D\u5B9A\u304B</h4>
@@ -18413,6 +18498,18 @@ var mountDAW = (target, options = {}) => {
     options.singingVoices?.setVolume(masterVolume / 100);
   };
   applyMasterVolume(masterVolume);
+  let loopEnabled = options.initialLoop ?? false;
+  const applyLoop = (enabled) => {
+    loopEnabled = enabled;
+    if (refs.loopToggle) {
+      refs.loopToggle.checked = enabled;
+    }
+    if (refs.loopToggleLabel) {
+      refs.loopToggleLabel.textContent = enabled ? "ON" : "OFF";
+    }
+    options.onLoopChange?.(enabled);
+  };
+  applyLoop(loopEnabled);
   const snapToEdoGrid = (u) => {
     const upr = renderConfig.unitsPerRow ?? UNITS_PER_SEMITONE;
     return units(Math.round(u / upr) * upr);
@@ -19008,7 +19105,9 @@ var mountDAW = (target, options = {}) => {
       unitsPerRow: upr = UNITS_PER_SEMITONE
     } = renderConfig;
     const offset = renderer.getDrawOffset();
-    for (const note of active.core.getNotes()) {
+    const notes = active.core.getNotes();
+    for (let i2 = notes.length - 1; i2 >= 0; i2--) {
+      const note = notes[i2];
       const logicalX = note.startStep * stepWidth;
       const yIndex = keyCount - 1 - (note.pitchUnits - pitchRangeStart) / upr;
       const logicalY = yIndex * keyHeight;
@@ -19084,14 +19183,18 @@ var mountDAW = (target, options = {}) => {
       return;
     }
     hasDragged = false;
-    const existing = findActiveNoteAt(x2, y, TOUCH_HIT_MARGIN);
+    const hitMargin = event.pointerType === "mouse" ? 0 : Math.min(
+      TOUCH_HIT_MARGIN,
+      Math.max(0, Math.floor(renderConfig.keyHeight * 0.25))
+    );
+    const existing = findActiveNoteAt(x2, y, hitMargin);
     if (existing) {
       playPreview(existing.pitchUnits);
       const { stepWidth } = renderConfig;
       const offset = renderer.getDrawOffset();
       const renderX = existing.startStep * stepWidth - offset.x;
       const w = existing.durationSteps * stepWidth;
-      if (x2 >= renderX + w - resizeHandleWidth && x2 <= renderX + w) {
+      if (x2 >= renderX + w - resizeHandleWidth && x2 <= renderX + w + hitMargin) {
         dragState = {
           noteId: existing.id,
           mode: "resize",
@@ -19106,7 +19209,7 @@ var mountDAW = (target, options = {}) => {
           noteId: existing.id,
           mode: "move",
           dragOffsetStep: step - existing.startStep,
-          dragOffsetPitch: pitch - existing.pitchUnits,
+          dragOffsetPitch: 0,
           startStep: existing.startStep,
           durationSteps: existing.durationSteps,
           lastPreviewPitch: existing.pitchUnits
@@ -19221,7 +19324,7 @@ var mountDAW = (target, options = {}) => {
             const orig = selectedOriginal.find((o) => o.id === grab.id);
             if (orig) {
               const newGrab = units(orig.pitch + deltaPitch);
-              if (newGrab !== lastMultiPreviewPitch && newGrab >= 0 && newGrab < 128) {
+              if (newGrab !== lastMultiPreviewPitch && newGrab >= PITCH_RANGE_START && newGrab <= PITCH_RANGE_END) {
                 lastMultiPreviewPitch = newGrab;
                 playPreview(newGrab);
               }
@@ -19370,11 +19473,9 @@ var mountDAW = (target, options = {}) => {
     gridCanvas.addEventListener("dblclick", (event) => {
       event.preventDefault();
       if (isActiveLocked()) return;
-      const { step, pitch } = renderer.getGridPosition(event);
+      const { x: x2, y } = renderer.getGridPosition(event);
       const active = getActive();
-      const note = active.core.getNotes().find(
-        (n) => n.pitchUnits === pitch && step >= n.startStep && step < n.startStep + n.durationSteps
-      );
+      const note = findActiveNoteAt(x2, y);
       if (note) active.core.deleteNoteById(note.id);
     });
     gridCanvas.addEventListener(
@@ -19474,6 +19575,7 @@ var mountDAW = (target, options = {}) => {
     getPlayStartStep: () => playStartStep,
     getDrumPattern: (currentBar) => resolveDrumPattern(currentDrumPattern, drumPatterns, currentBar),
     getSoloTrackId: () => isSolo ? activeTrackId : null,
+    getLoop: () => loopEnabled,
     getAudioTime,
     onPlayNote: (e) => {
       if (audioMutedTracks.has(e.trackId)) return;
@@ -19501,6 +19603,19 @@ var mountDAW = (target, options = {}) => {
           getMaxOffsetX()
         );
         renderer.setDrawOffset(currentOffsetX, currentOffsetY);
+      } else if (currentPlayStep < currentOffsetX / renderConfig.stepWidth) {
+        const visibleBars = Math.max(
+          1,
+          Math.round(visibleSteps / renderConfig.stepsPerBar)
+        );
+        currentOffsetX = clamp5(
+          Math.floor(
+            currentPlayStep / (visibleBars * renderConfig.stepsPerBar)
+          ) * visibleBars * renderConfig.stepsPerBar * renderConfig.stepWidth,
+          0,
+          getMaxOffsetX()
+        );
+        renderer.setDrawOffset(currentOffsetX, currentOffsetY);
       }
       redrawAll();
     },
@@ -19616,8 +19731,18 @@ var mountDAW = (target, options = {}) => {
       options.onScheduleFade?.(params);
     }
     if (streaming && voices) {
+      let loopLengthSec;
+      let loopStartSec;
+      if (loopEnabled) {
+        const endStep = getSongEndStepExact();
+        const sps = 60 / bpm / 48;
+        loopStartSec = 0;
+        loopLengthSec = endStep * sps;
+      }
       voices.startStream(streamTracks, sequencer.getStartTime(), {
         isAudible: (t) => !isSolo || t.id === activeTrackId,
+        loopLengthSec,
+        loopStartSec,
         onScheduled: (t, note, t0) => {
           if (!t.id) return;
           flashTrackPill(t.id, t0 - getAudioTime(), note.durationSec);
@@ -20629,6 +20754,7 @@ var mountDAW = (target, options = {}) => {
         fadeOut: Math.round(fadeOutSec * 10),
         mode,
         edo: renderConfig.edo,
+        loop: loopEnabled ? true : void 0,
         trackInstruments: trackInstMeta,
         trackCompression: trackCompMeta,
         trackWidth: trackWidthMeta,
@@ -20658,6 +20784,7 @@ var mountDAW = (target, options = {}) => {
         fadeOut: Math.round(fadeOutSec * 10),
         mode,
         edo: renderConfig.edo,
+        loop: loopEnabled ? true : void 0,
         trackInstruments: trackInstMeta,
         trackCompression: trackCompMeta,
         trackWidth: trackWidthMeta,
@@ -20871,6 +20998,7 @@ var mountDAW = (target, options = {}) => {
       }
       applyEdo(meta.edo ?? 12);
       refs.edoSelect.value = String(renderConfig.edo ?? 12);
+      applyLoop(meta.loop ?? false);
       if (meta.drumVolume !== void 0) {
         drumVolume = meta.drumVolume;
         refs.drumVolume.value = String(meta.drumVolume);
@@ -21383,6 +21511,12 @@ var mountDAW = (target, options = {}) => {
     refs.edoInfoBtn.addEventListener("click", () => {
       showModal("\u97F3\u5F8B\u306E\u89E3\u8AAC", EDO_INFO_HTML);
     });
+    refs.loopToggle.addEventListener("change", () => {
+      applyLoop(refs.loopToggle.checked);
+    });
+    refs.loopInfoBtn.addEventListener("click", () => {
+      showModal("\u30EB\u30FC\u30D7\u518D\u751F\u306E\u89E3\u8AAC", LOOP_INFO_HTML);
+    });
     refs.masterVolume.addEventListener("input", () => {
       applyMasterVolume(Number.parseInt(refs.masterVolume.value, 10) || 0);
     });
@@ -22784,6 +22918,8 @@ var mountDAW = (target, options = {}) => {
     },
     exportMIDI: exportMIDI2,
     setBpm,
+    getLoop: () => loopEnabled,
+    setLoop: (loop) => applyLoop(loop),
     getPlaybackState: () => playbackState,
     getCurrentPlayStep,
     forcePauseAt,
@@ -23237,7 +23373,7 @@ var createPianoRoll = (options, handlers) => {
       const h = keyHeight;
       const renderX = logicalX - offset.x;
       const renderY = logicalY - offset.y;
-      if (x2 >= renderX && x2 <= renderX + w && y >= renderY && y <= renderY + h) {
+      if (x2 >= renderX && x2 < renderX + w && y >= renderY && y < renderY + h) {
         return note;
       }
     }

package/package.json

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