@onjmin/dtm 0.1.75 → 0.1.77

package/dist/index.mjs

@@ -4713,6 +4713,7 @@ var DAW_CSS = `
   gap: 8px;
 }
 .dtm-player-seek {
+  --fill: 0%;
   flex: 1 1 auto;
   min-width: 0;
   height: 12px;
@@ -4723,9 +4724,14 @@ var DAW_CSS = `
   appearance: none;
 }
 .dtm-player-seek:disabled { cursor: default; opacity: 0.4; }
+/* \u518D\u751F\u6E08\u307F\u533A\u9593\u3092YouTube\u98A8\u306B\u8272\u5857\u308A\u3059\u308B\uFF08--fill \u306F\u518D\u751F\u4F4D\u7F6E\u306B\u5FDC\u3058\u3066JS\u304B\u3089\u8A2D\u5B9A\uFF09 */
 .dtm-player-seek::-webkit-slider-runnable-track {
   height: 6px;
-  background: var(--dtm-border2);
+  background: linear-gradient(
+    to right,
+    var(--dtm-primary) var(--fill),
+    var(--dtm-border2) var(--fill)
+  );
   border: 2px solid var(--c-black);
 }
 .dtm-player-seek::-moz-range-track {
@@ -4733,6 +4739,12 @@ var DAW_CSS = `
   background: var(--dtm-border2);
   border: 2px solid var(--c-black);
 }
+.dtm-player-seek::-moz-range-progress {
+  height: 6px;
+  background: var(--dtm-primary);
+  border: 2px solid var(--c-black);
+  border-right: none;
+}
 .dtm-player-seek::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 12px;
@@ -5030,18 +5042,19 @@ var DAW_CSS = `
 }
 
 /* \u2500\u2500\u2500 \u30B3\u30FC\u30C9\u9032\u884C\u30D7\u30EC\u30A4\u30E4\u30FC \u2500\u2500\u2500 */
+/* MML\u518D\u751F\u5C02\u7528\u30D7\u30EC\u30A4\u30E4\u30FC\uFF08.dtm-player\uFF09\u3068\u67A0\u30C7\u30B6\u30A4\u30F3\u3092\u63C3\u3048\u308B */
 .dtm-chord-player {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dtm-gap);
+  padding: var(--dtm-gap);
   font-family: var(--dtm-font);
   font-size: 13px;
   letter-spacing: .06em;
   color: var(--dtm-text);
-  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-border),
-    4px 4px 0 var(--c-black);
-  overflow: hidden;
+  background: var(--dtm-deep);
+  border: 2px solid var(--dtm-border2);
+  box-shadow: 4px 4px 0 var(--c-black);
   image-rendering: pixelated;
   -webkit-font-smoothing: none;
 }
@@ -5049,14 +5062,12 @@ var DAW_CSS = `
 .dtm-chord-player *::before,
 .dtm-chord-player *::after { box-sizing: border-box; }
 
-/* \u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u30D0\u30FC */
+/* \u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u30D0\u30FC \u2014 MML\u518D\u751F\u5C02\u7528\u30D7\u30EC\u30A4\u30E4\u30FC\u306E .dtm-player-head \u3068\u63C3\u3048\u308B */
 .dtm-cp-ctrl {
   display: flex;
   align-items: center;
-  gap: var(--dtm-gap);
-  padding: 6px 8px;
-  background: var(--dtm-deep);
-  border-bottom: 2px solid var(--c-black);
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
 /* \u30EB\u30FC\u30D7\u5207\u66FF\u30DC\u30BF\u30F3 */
@@ -5081,38 +5092,13 @@ var DAW_CSS = `
   box-shadow: 2px 2px 0 var(--c-black);
 }
 
-/* \u30E1\u30BF\u60C5\u5831 (BPM / \u6642\u9593) */
+/* \u30E1\u30BF\u60C5\u5831 (BPM) */
 .dtm-cp-meta {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .12em;
   color: var(--dtm-muted);
 }
-.dtm-cp-time {
-  margin-left: auto;
-  font-size: 11px;
-  font-family: var(--dtm-font);
-  color: var(--dtm-muted);
-  letter-spacing: .1em;
-}
-
-/* \u30D7\u30ED\u30B0\u30EC\u30B9\u30D0\u30FC \u2014 \u30C9\u30C3\u30C8\u7D75\u98A8\u306E\u30BB\u30B0\u30E1\u30F3\u30C8\u5857\u308A\u3002\u30AF\u30EA\u30C3\u30AF\u3067\u30B7\u30FC\u30AF */
-.dtm-cp-progress {
-  height: 14px;
-  background: var(--dtm-deep);
-  border-bottom: 2px solid var(--c-black);
-  cursor: pointer;
-}
-.dtm-cp-progress-fill {
-  height: 100%;
-  width: 0%;
-  background: repeating-linear-gradient(
-    90deg,
-    var(--dtm-primary) 0, var(--dtm-primary) 6px,
-    var(--c-navy) 6px, var(--c-navy) 8px
-  );
-}
-.dtm-cp-progress-fill--on { border-right: 2px solid var(--c-white); }
 
 /* \u30B9\u30AF\u30ED\u30FC\u30EB\u30A8\u30EA\u30A2 */
 .dtm-cp-scroll {
@@ -6050,6 +6036,12 @@ var mountMmlPlayer = (target, mml, options = {}) => {
   timeEl.textContent = "0:00 / 0:00";
   seekRow.append(seekInput, timeEl);
   root.appendChild(seekRow);
+  const syncSeekFill = () => {
+    const max = Number(seekInput.max) || 1;
+    const pct = Number(seekInput.value) / max * 100;
+    seekInput.style.setProperty("--fill", `${pct}%`);
+  };
+  syncSeekFill();
   const formatTime = (step) => {
     const totalSec = Math.max(0, step * secondsPerStep);
     const m = Math.floor(totalSec / 60);
@@ -6286,6 +6278,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
     if (!isSeeking) {
       seekInput.value = String(Math.min(maxStep, Math.max(0, intStep)));
       updateTimeLabel(intStep);
+      syncSeekFill();
     }
     const chordName = stepChords[intStep] ?? "";
     if (chordEl.textContent !== chordName) {
@@ -6313,6 +6306,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
     chordEl.textContent = "";
     seekInput.value = "0";
     updateTimeLabel(0);
+    syncSeekFill();
     for (const view of laneViews) {
       for (const t of view.tokens) t.el.classList.remove("is-active");
       view.lane.scrollLeft = 0;
@@ -6503,6 +6497,7 @@ var mountMmlPlayer = (target, mml, options = {}) => {
   });
   seekInput.addEventListener("input", () => {
     renderPlayhead(Number(seekInput.value));
+    syncSeekFill();
   });
   seekInput.addEventListener("change", () => {
     isSeeking = false;
@@ -6863,6 +6858,13 @@ var parseToneMeta = (chords) => {
 var parseMetronomeMeta = (chords) => {
   return !/^#\s*metronome\s*=\s*off\s*$/im.test(chords);
 };
+var parseBpmMeta = (chords) => {
+  const m = chords.match(/^#\s*bpm\s*=\s*(\d+)\s*$/im);
+  if (!m) return null;
+  const val = Number.parseInt(m[1], 10);
+  if (Number.isNaN(val)) return null;
+  return Math.max(40, Math.min(240, val));
+};
 var _nameToKeyCache = null;
 var getNameToKey = async () => {
   if (!_nameToKeyCache) _nameToKeyCache = await buildNameToKeyMapping();
@@ -7025,8 +7027,9 @@ var buildDisplayLines = (chords, eventsCount) => {
 var mountChordPlayer = (target, chords, options = {}) => {
   const doc = target.ownerDocument;
   injectStyles(doc);
-  let bpm = options.bpm ?? 120;
+  let bpm = options.bpm ?? parseBpmMeta(chords) ?? 120;
   let activeIndex = -1;
+  let isSeeking = false;
   let activePlayback = null;
   let isPlaying = false;
   let masterVolume = options.volume ?? 80;
@@ -7083,8 +7086,8 @@ var mountChordPlayer = (target, chords, options = {}) => {
   const setPlayBtnStyle = (playing) => {
     if (playing) {
       playBtn.classList.add("dtm-play--stop");
-      playBtn.innerHTML = icon("stop", 14);
-      playBtn.title = "STOP";
+      playBtn.innerHTML = icon("pause", 14);
+      playBtn.title = "PAUSE";
     } else {
       playBtn.classList.remove("dtm-play--stop");
       playBtn.innerHTML = icon("play", 14);
@@ -7161,17 +7164,9 @@ var mountChordPlayer = (target, chords, options = {}) => {
     { key: "guitar", label: "Guitar", emoji: "\u{1F3B8}" },
     { key: "strings", label: "Strings", emoji: "\u{1F3BB}" }
   ];
-  const instrGroup = doc.createElement("div");
-  instrGroup.className = "dtm-cp-instr-group";
-  const instrBtns = /* @__PURE__ */ new Map();
-  const updateInstrButtons = () => {
-    for (const { key } of INSTRUMENT_DEFS) {
-      instrBtns.get(key)?.classList.toggle(
-        "dtm-cp-instr-btn--active",
-        key === activeInstrumentKey
-      );
-    }
-  };
+  const instrGroup = doc.createElement("select");
+  instrGroup.className = "dtm-cp-instr-select";
+  instrGroup.title = "\u697D\u5668";
   const switchInstrument = (key) => {
     if (activeInstrumentKey === key) return;
     activeInstrumentKey = key;
@@ -7182,34 +7177,61 @@ var mountChordPlayer = (target, chords, options = {}) => {
       if (ctx) loadWafFont(ctx, activeGmName);
     }
   };
-  for (const { key, label, emoji } of INSTRUMENT_DEFS) {
-    const btn = doc.createElement("button");
-    btn.type = "button";
-    btn.className = "dtm-cp-instr-btn";
-    btn.textContent = `${emoji} ${label}`;
-    btn.title = label;
-    btn.addEventListener("click", () => switchInstrument(key));
-    instrGroup.appendChild(btn);
-    instrBtns.set(key, btn);
+  const updateInstrButtons = () => {
+    instrGroup.value = activeInstrumentKey;
+  };
+  for (const { key, label } of INSTRUMENT_DEFS) {
+    const opt = doc.createElement("option");
+    opt.value = key;
+    opt.textContent = label;
+    instrGroup.appendChild(opt);
   }
+  instrGroup.addEventListener("change", () => {
+    const key = instrGroup.value;
+    switchInstrument(key);
+  });
   updateInstrButtons();
-  const timeSpan = doc.createElement("span");
-  timeSpan.className = "dtm-cp-time";
+  ctrlBar.appendChild(playBtn);
+  ctrlBar.appendChild(loopBtn);
+  ctrlBar.appendChild(metroBtn);
+  ctrlBar.appendChild(bpmGroup);
+  ctrlBar.appendChild(instrGroup);
+  const seekRow = doc.createElement("div");
+  seekRow.className = "dtm-player-seek-row";
+  const seekInput = doc.createElement("input");
+  seekInput.type = "range";
+  seekInput.className = "dtm-player-seek";
+  seekInput.min = "0";
+  seekInput.max = String(Math.max(0.01, totalSec));
+  seekInput.step = "0.01";
+  seekInput.value = "0";
+  seekInput.disabled = chordEvents.length === 0;
+  const timeEl = doc.createElement("span");
+  timeEl.className = "dtm-player-time";
+  timeEl.textContent = "0:00 / 0:00";
+  seekRow.append(seekInput, timeEl);
   const formatTime = (sec) => {
     const m = Math.floor(sec / 60);
     const s = Math.floor(sec % 60);
     return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
   };
   const updateTimeDisplay = (currentSec) => {
-    timeSpan.textContent = `${formatTime(currentSec)} / ${formatTime(totalSec)}`;
+    timeEl.textContent = `${formatTime(currentSec)} / ${formatTime(totalSec)}`;
   };
   updateTimeDisplay(0);
-  ctrlBar.appendChild(playBtn);
-  ctrlBar.appendChild(loopBtn);
-  ctrlBar.appendChild(metroBtn);
-  ctrlBar.appendChild(bpmGroup);
-  ctrlBar.appendChild(instrGroup);
-  ctrlBar.appendChild(timeSpan);
+  const syncSeekFill = () => {
+    const max = Number(seekInput.max) || 1;
+    const pct = Number(seekInput.value) / max * 100;
+    seekInput.style.setProperty("--fill", `${pct}%`);
+  };
+  syncSeekFill();
+  const updateSeekUI = (sec) => {
+    updateTimeDisplay(sec);
+    if (!isSeeking) {
+      seekInput.value = String(Math.max(0, Math.min(totalSec, sec)));
+      syncSeekFill();
+    }
+  };
   const menuContainer = doc.createElement("div");
   menuContainer.className = "dtm-player-more-container";
   const moreBtn = doc.createElement("button");
@@ -7241,6 +7263,7 @@ var mountChordPlayer = (target, chords, options = {}) => {
   menuContainer.appendChild(menuDropdown);
   ctrlBar.appendChild(menuContainer);
   container.appendChild(ctrlBar);
+  container.appendChild(seekRow);
   const toggleMenu = (show) => {
     const visible = show !== void 0 ? show : menuDropdown.style.display === "none";
     menuDropdown.style.display = visible ? "flex" : "none";
@@ -7488,7 +7511,9 @@ var mountChordPlayer = (target, chords, options = {}) => {
     secondsPerBeat = 60 / bpm;
     totalSec = chordEvents.length > 0 ? chordEvents[chordEvents.length - 1].when + chordEvents[chordEvents.length - 1].duration : 0;
     bpmInput.value = String(bpm);
-    updateTimeDisplay(isPlaying ? playOffsetSec : 0);
+    seekInput.max = String(Math.max(0.01, totalSec));
+    seekInput.disabled = chordEvents.length === 0;
+    updateSeekUI(isPlaying ? playOffsetSec : 0);
     if (isPlaying) seekTo(Math.max(0, activeIndex));
   };
   const changeBpm = (delta) => {
@@ -7535,18 +7560,6 @@ var mountChordPlayer = (target, chords, options = {}) => {
       if (gmName) loadWafFont(ctx, gmName);
     }
   };
-  const progress = doc.createElement("div");
-  progress.className = "dtm-cp-progress";
-  progress.title = "\u30AF\u30EA\u30C3\u30AF\u3067\u30B7\u30FC\u30AF";
-  const progressFill = doc.createElement("div");
-  progressFill.className = "dtm-cp-progress-fill";
-  progress.appendChild(progressFill);
-  container.appendChild(progress);
-  const setProgress = (ratio) => {
-    const clamped = Math.max(0, Math.min(1, ratio));
-    progressFill.style.width = `${clamped * 100}%`;
-    progressFill.classList.toggle("dtm-cp-progress-fill--on", clamped > 0);
-  };
   const scrollArea = doc.createElement("div");
   scrollArea.className = "dtm-cp-scroll";
   const chordSpans = [];
@@ -7780,8 +7793,7 @@ var mountChordPlayer = (target, chords, options = {}) => {
         const currentSec = playOffsetSec + rel;
         currentPlaySec = currentSec;
         updateActiveIndex(getActiveIndexBySec(currentSec));
-        updateTimeDisplay(Math.min(currentSec, totalSec));
-        setProgress(totalSec > 0 ? currentSec / totalSec : 0);
+        updateSeekUI(Math.min(currentSec, totalSec));
       },
       onStop: () => {
         handlePlaybackStop();
@@ -7805,8 +7817,7 @@ var mountChordPlayer = (target, chords, options = {}) => {
       isPlaying = true;
       setPlayBtnStyle(true);
       updateActiveIndex(startIdx);
-      updateTimeDisplay(playOffsetSec);
-      setProgress(totalSec > 0 ? playOffsetSec / totalSec : 0);
+      updateSeekUI(playOffsetSec);
       playInternal(startIdx, ctx, cutGain);
     };
     const myAbortId = ++loadAbortId;
@@ -7833,13 +7844,19 @@ var mountChordPlayer = (target, chords, options = {}) => {
     }
     play(idx);
   };
-  progress.addEventListener("click", (ev) => {
+  seekInput.addEventListener("pointerdown", () => {
+    isSeeking = true;
+  });
+  seekInput.addEventListener("input", () => {
+    updateTimeDisplay(Number(seekInput.value));
+    syncSeekFill();
+  });
+  seekInput.addEventListener("change", () => {
+    isSeeking = false;
     if (totalSec <= 0) return;
-    const rect = progress.getBoundingClientRect();
-    if (rect.width <= 0) return;
-    const sec = (ev.clientX - rect.left) / rect.width * totalSec;
+    const sec = Number(seekInput.value);
     const idx = getActiveIndexBySec(sec);
-    seekTo(idx >= 0 ? idx : 0);
+    seekTo(idx >= 0 ? idx : Math.max(0, chordEvents.length - 1));
   });
   const stop = () => {
     if (isLoading) {
@@ -7859,15 +7876,30 @@ var mountChordPlayer = (target, chords, options = {}) => {
     isPlaying = false;
     setPlayBtnStyle(false);
     updateActiveIndex(-1);
-    updateTimeDisplay(0);
-    setProgress(0);
+    updateSeekUI(0);
+    options.onStop?.();
+  };
+  const pause = () => {
+    if (isLoading) {
+      ++loadAbortId;
+      setLoadingUI(false);
+      killSound();
+      return;
+    }
+    if (!isPlaying) return;
+    activePlayback?.destroy();
+    activePlayback = null;
+    stopMetronome();
+    killSound();
+    isPlaying = false;
+    setPlayBtnStyle(false);
     options.onStop?.();
   };
   playBtn.addEventListener("click", () => {
     if (isPlaying) {
-      stop();
+      pause();
     } else {
-      play();
+      play(Math.max(0, activeIndex));
     }
   });
   const toggleMetronome = () => {
@@ -7929,32 +7961,31 @@ var mountChordPlayer = (target, chords, options = {}) => {
 			animation: dtm-cp-spin 0.7s linear infinite;
 			vertical-align: middle;
 		}
-		/* \u697D\u5668\u30C8\u30B0\u30EB\u30DC\u30BF\u30F3\u7FA4 */
-		.dtm-cp-instr-group {
-			display: flex;
-			gap: 2px;
-			border: 1px solid rgba(255,255,255,0.15);
-			border-radius: 4px;
-			overflow: hidden;
+		/* \u30B3\u30FC\u30C9\u9032\u884C\u30D7\u30EC\u30A4\u30E4\u30FC\u306EPLAY\u30DC\u30BF\u30F3\u306F\u901A\u5E38\u306EDAW\u3088\u308A\u5C0F\u3055\u3081\u3067\u3088\u3044 */
+		.dtm-cp-ctrl .dtm-play {
+			width: 24px;
+			height: 24px;
 		}
-		.dtm-cp-instr-btn {
+		/* \u697D\u5668\u9078\u629E\u30D7\u30EB\u30C0\u30A6\u30F3\uFF08\u7701\u30B9\u30DA\u30FC\u30B9\u3067\u30B9\u30DE\u30DB\u3067\u3082\u96A0\u308C\u306A\u3044\uFF09 */
+		.dtm-cp-instr-select {
 			background: rgba(255,255,255,0.06);
-			border: none;
-			color: rgba(255,255,255,0.5);
+			border: 1px solid rgba(255,255,255,0.15);
+			border-radius: 4px;
+			color: rgba(255,255,255,0.85);
 			font-size: 11px;
-			padding: 2px 7px;
+			font-family: inherit;
+			padding: 2px 4px;
 			cursor: pointer;
-			transition: background 0.15s, color 0.15s;
-			white-space: nowrap;
+			max-width: 62px;
+			flex-shrink: 1;
+			min-width: 0;
 		}
-		.dtm-cp-instr-btn:hover {
+		.dtm-cp-instr-select:hover {
 			background: rgba(255,255,255,0.14);
-			color: rgba(255,255,255,0.85);
 		}
-		.dtm-cp-instr-btn--active {
-			background: var(--dtm-primary, #29adff) !important;
-			color: #000 !important;
-			font-weight: bold;
+		.dtm-cp-instr-select option {
+			background: #1a1a2e;
+			color: #fff;
 		}
 		/* BPM widget styles */
 		.dtm-cp-bpm-group {

package/package.json

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