@onjmin/dtm 0.1.24 → 0.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1428,6 +1428,7 @@ var buildUI = (target, options) => {
1428
1428
  <div class="dtm-modal-body" data-dtm="modal-body"></div>
1429
1429
  </div>
1430
1430
  </div>
1431
+
1431
1432
  </div>`;
1432
1433
  const root = q(target, '[data-dtm="root"]');
1433
1434
  const sel = (name) => q(root, `[data-dtm="${name}"]`);
@@ -2611,7 +2612,20 @@ var createWorkerBackend = async (workerUrl, options) => {
2611
2612
  };
2612
2613
  };
2613
2614
  var createKoeVoice = async (ctx, destination, options) => {
2614
- const backend = options.voiceWorkerUrl ? await createWorkerBackend(options.voiceWorkerUrl, options) : await createLocalBackend(options);
2615
+ let backend;
2616
+ if (options.voiceWorkerUrl) {
2617
+ try {
2618
+ backend = await createWorkerBackend(options.voiceWorkerUrl, options);
2619
+ } catch (err2) {
2620
+ console.warn(
2621
+ "[dtm] Failed to spawn voice worker. Falling back to local backend.",
2622
+ err2
2623
+ );
2624
+ backend = await createLocalBackend(options);
2625
+ }
2626
+ } else {
2627
+ backend = await createLocalBackend(options);
2628
+ }
2615
2629
  const renderCache = /* @__PURE__ */ new Map();
2616
2630
  const inflight = /* @__PURE__ */ new Map();
2617
2631
  const active = /* @__PURE__ */ new Set();
@@ -4126,6 +4140,110 @@ var isChordHeavyTrack = (notes, threshold = 0.6) => {
4126
4140
  return chordNotes / notes.length >= threshold;
4127
4141
  };
4128
4142
 
4143
+ // src/mml-info.ts
4144
+ var MML_INFO_HTML = `
4145
+ <div class="dtm-modal-body-content">
4146
+ <h4>1. \u97F3\u7B26\u3068\u4F11\u7B26</h4>
4147
+ <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>
4148
+ <ul>
4149
+ <li>\u534A\u97F3\u4E0A\u3052\u308B: <code>c#</code> \u307E\u305F\u306F <code>c+</code></li>
4150
+ <li>\u534A\u97F3\u4E0B\u3052\u308B: <code>d-</code></li>
4151
+ <li>\u4F11\u7B26: <code>r</code></li>
4152
+ </ul>
4153
+
4154
+ <h4>2. \u97F3\u306E\u9577\u3055</h4>
4155
+ <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>
4156
+ <ul>
4157
+ <li><code>c4</code> : 4\u5206\u97F3\u7B26\u306E\u30C9</li>
4158
+ <li><code>r8</code> : 8\u5206\u4F11\u7B26</li>
4159
+ <li><code>c4.</code> : \u4ED8\u70B94\u5206\u97F3\u7B26\u306E\u30C9\uFF08\u9577\u3055\u30921.5\u500D\u306B\uFF09</li>
4160
+ <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>
4161
+ </ul>
4162
+
4163
+ <h4>3. \u30AA\u30AF\u30BF\u30FC\u30D6\uFF08\u97F3\u306E\u9AD8\u3055\uFF09</h4>
4164
+ <ul>
4165
+ <li><code>o4</code>, <code>o5</code> : \u9AD8\u3055\u3092\u76F4\u63A5\u6307\u5B9A\uFF08\u3075\u3064\u3046\u306F o4 \u304B o5\uFF09</li>
4166
+ <li><code>&gt;</code> : 1\u30AA\u30AF\u30BF\u30FC\u30D6\u4E0A\u3052\u308B</li>
4167
+ <li><code>&lt;</code> : 1\u30AA\u30AF\u30BF\u30FC\u30D6\u4E0B\u3052\u308B</li>
4168
+ </ul>
4169
+
4170
+ <h4>4. \u30C6\u30F3\u30DD</h4>
4171
+ <ul>
4172
+ <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>
4173
+ </ul>
4174
+
4175
+ <h4>5. \u548C\u97F3</h4>
4176
+ <p>\u97F3\u7B26\u3092 <code>[</code> \u3068 <code>]</code> \u3067\u56F2\u3080\u3068\u540C\u6642\u306B\u767A\u97F3\u3057\u307E\u3059\u3002</p>
4177
+ <pre>\u4F8B: [ceg]4 \uFF08\u30C9\u30FB\u30DF\u30FB\u30BD\u30924\u5206\u97F3\u7B26\u3067\u540C\u6642\u306B\u767A\u97F3\uFF09</pre>
4178
+
4179
+ <h4>6. \u30C8\u30E9\u30C3\u30AF\u306E\u533A\u5207\u308A</h4>
4180
+ <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>
4181
+ <ul>
4182
+ <li><code>@0</code>: \u30E1\u30ED\u30C7\u30A3</li>
4183
+ <li><code>@1</code>: \u30B5\u30D6\u30E1\u30ED</li>
4184
+ <li><code>@2</code>: \u30D9\u30FC\u30B9</li>
4185
+ <li><code>@3</code>: \u4F34\u594F</li>
4186
+ </ul>
4187
+
4188
+ <h4>7. \u6B4C\u58F0\u30FB\u6B4C\u8A5E\u5165\u529B</h4>
4189
+ <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>
4190
+ <pre>\u4F8B: @@0 tsukuyomi \u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D\u3069\u3093\u3050\u308A\u3053</pre>
4191
+ <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>
4192
+
4193
+ <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>
4194
+
4195
+ <!-- \u30B5\u30F3\u30D7\u30EB1 -->
4196
+ <div class="dtm-modal-sample-box">
4197
+ <div class="dtm-modal-sample-header">
4198
+ <span class="dtm-modal-sample-tag">1. \u57FA\u672C\u306E\u30E1\u30ED\u30C7\u30A3</span>
4199
+ <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>
4200
+ </div>
4201
+ <pre style="margin: 0; padding: 6px;">@0 t120 l8 o5 c d e f g a b &gt; c</pre>
4202
+ <div class="dtm-modal-sample-desc">
4203
+ \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
4204
+ </div>
4205
+ <div style="margin-top: 8px;">
4206
+ <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>
4207
+ </div>
4208
+ <div class="dtm-modal-sample-player-container"></div>
4209
+ </div>
4210
+
4211
+ <!-- \u30B5\u30F3\u30D7\u30EB2 -->
4212
+ <div class="dtm-modal-sample-box">
4213
+ <div class="dtm-modal-sample-header">
4214
+ <span class="dtm-modal-sample-tag">2. \u8907\u6570\u30C8\u30E9\u30C3\u30AF\u3068\u548C\u97F3</span>
4215
+ <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>
4216
+ </div>
4217
+ <pre style="margin: 0; padding: 6px;">@0 t120 o5 c e g2 ;
4218
+ @3 o4 [ceg]2 [ceg]2</pre>
4219
+ <div class="dtm-modal-sample-desc">
4220
+ ; \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
4221
+ </div>
4222
+ <div style="margin-top: 8px;">
4223
+ <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>
4224
+ </div>
4225
+ <div class="dtm-modal-sample-player-container"></div>
4226
+ </div>
4227
+
4228
+ <!-- \u30B5\u30F3\u30D7\u30EB3 -->
4229
+ <div class="dtm-modal-sample-box">
4230
+ <div class="dtm-modal-sample-header">
4231
+ <span class="dtm-modal-sample-tag">3. \u6B4C\u5531\u4ED8\u304D (\u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D)</span>
4232
+ <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>
4233
+ </div>
4234
+ <pre style="margin: 0; padding: 6px;">@0 t120 v100 o4g8 g8 e8 e8 f8 e8 d8 c8 g8 g8 e8 e8 d4.;
4235
+ @@0 tsukuyomi \u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D\u3069\u3093\u3050\u308A\u3053;</pre>
4236
+ <div class="dtm-modal-sample-desc">
4237
+ @@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
4238
+ </div>
4239
+ <div style="margin-top: 8px;">
4240
+ <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>
4241
+ </div>
4242
+ <div class="dtm-modal-sample-player-container"></div>
4243
+ </div>
4244
+ </div>
4245
+ `;
4246
+
4129
4247
  // src/mml-parser.ts
4130
4248
  var PITCH_MAP2 = {
4131
4249
  c: 0,
@@ -4748,9 +4866,13 @@ var DAW_CSS = `
4748
4866
  /* \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
4749
4867
  \u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u30D0\u30FC\uFF08.dtm-controlbar\uFF09\u306B\u3082\u4F9B\u7D66\u3059\u308B\u3002mountPresetSelect /
4750
4868
  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
4751
- 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 */
4869
+ 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
4870
+ \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
4871
+ .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 */
4752
4872
  .dtm-daw,
4753
- .dtm-controlbar {
4873
+ .dtm-controlbar,
4874
+ .dtm-modal-overlay,
4875
+ .dtm-consent-overlay {
4754
4876
  /* PICO-8 16\u8272\u30D1\u30EC\u30C3\u30C8\u3088\u308A */
4755
4877
  --c-black: #000000;
4756
4878
  --c-navy: #1d2b53;
@@ -5348,10 +5470,76 @@ var DAW_CSS = `
5348
5470
  justify-content: center;
5349
5471
  padding: 16px;
5350
5472
  backdrop-filter: blur(2px);
5473
+ /* 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
5474
+ .dtm-daw \u304B\u3089\u7D99\u627F\u3067\u304D\u306A\u3044\u305F\u3081\u3001\u3053\u3053\u3067\u660E\u793A\u3059\u308B\u3002 */
5475
+ color: var(--dtm-text);
5476
+ font-family: var(--dtm-font);
5351
5477
  }
5352
5478
  .dtm-modal-overlay[hidden] {
5353
5479
  display: none !important;
5354
5480
  }
5481
+
5482
+ /* \u2500\u2500\u2500 \u5229\u7528\u898F\u7D04\u540C\u610F\u30AB\u30D0\u30FC \u2500\u2500\u2500 */
5483
+ .dtm-consent-overlay {
5484
+ position: fixed;
5485
+ inset: 0;
5486
+ z-index: 10100;
5487
+ background: rgba(0, 0, 0, 0.6);
5488
+ display: flex;
5489
+ align-items: center;
5490
+ justify-content: center;
5491
+ padding: 16px;
5492
+ backdrop-filter: blur(2px);
5493
+ /* 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 */
5494
+ color: var(--dtm-text);
5495
+ font-family: var(--dtm-font);
5496
+ }
5497
+ .dtm-consent-overlay[hidden] {
5498
+ display: none !important;
5499
+ }
5500
+ .dtm-consent-modal {
5501
+ max-width: 450px;
5502
+ width: 100%;
5503
+ max-height: 85vh;
5504
+ display: flex;
5505
+ flex-direction: column;
5506
+ background: var(--dtm-surface);
5507
+ border: 2px solid var(--c-black);
5508
+ box-shadow:
5509
+ inset 0 0 0 2px var(--c-black),
5510
+ 0 0 0 2px var(--dtm-primary),
5511
+ 4px 4px 0 var(--c-black);
5512
+ overflow-y: auto;
5513
+ }
5514
+ .dtm-consent-header {
5515
+ background: var(--dtm-deep);
5516
+ color: var(--dtm-text);
5517
+ padding: 8px 12px;
5518
+ border-bottom: 2px solid var(--c-black);
5519
+ font-weight: bold;
5520
+ text-align: center;
5521
+ font-size: 14px;
5522
+ }
5523
+ .dtm-consent-body {
5524
+ padding: 12px 16px;
5525
+ font-size: 13px;
5526
+ line-height: 1.6;
5527
+ }
5528
+ .dtm-consent-body a {
5529
+ color: var(--dtm-primary);
5530
+ text-decoration: underline;
5531
+ }
5532
+ .dtm-consent-body a:hover {
5533
+ color: var(--dtm-accent);
5534
+ }
5535
+ .dtm-consent-footer {
5536
+ padding: 8px;
5537
+ border-top: 2px solid var(--c-black);
5538
+ background: var(--dtm-deep);
5539
+ display: flex;
5540
+ justify-content: center;
5541
+ }
5542
+
5355
5543
  .dtm-modal {
5356
5544
  max-width: 500px;
5357
5545
  width: 100%;
@@ -5485,18 +5673,19 @@ var DAW_CSS = `
5485
5673
  }
5486
5674
 
5487
5675
  .dtm-hidden { display: none !important; }
5488
- /* \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 */
5676
+ /* \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 */
5489
5677
  .dtm-load-note {
5490
5678
  margin: 6px 0 0;
5491
5679
  padding: 0 2px;
5492
5680
  font-family: var(--dtm-font);
5493
- font-size: 10px;
5681
+ font-size: 11px;
5494
5682
  line-height: 1.5;
5495
5683
  letter-spacing: .04em;
5496
- color: var(--dtm-muted);
5497
- opacity: .85;
5684
+ color: var(--dtm-warn); /* \u8B66\u544A\u8272\uFF08\u30AA\u30EC\u30F3\u30B8\uFF09 */
5685
+ font-weight: bold;
5686
+ opacity: 1.0;
5498
5687
  }
5499
- .dtm-load-note::before { content: "\u24D8 "; }
5688
+ .dtm-load-note::before { content: "\u26A0 "; }
5500
5689
  .dtm-grow { flex: 1 1 auto; }
5501
5690
  .dtm-lyric-icon {
5502
5691
  flex: 0 0 auto;
@@ -5897,6 +6086,7 @@ var STEPS_PER_BEAT3 = 48;
5897
6086
  var STEPS_PER_BAR = 192;
5898
6087
  var DEFAULT_TRACK_COLORS = ["#00e436", "#29adff", "#ff77a8", "#ffec27"];
5899
6088
  var activePlayer = null;
6089
+ var agreedModelsInSession = /* @__PURE__ */ new Set();
5900
6090
  var LYRIC_MODEL_LABELS = {
5901
6091
  klatt: "\u8EFD\u91CF\u30ED\u30DC\u58F0",
5902
6092
  ...KOE_VOICEBANK_LABELS
@@ -6152,16 +6342,21 @@ var mountMmlPlayer = (target, mml, options = {}) => {
6152
6342
  const menuDropdown = doc.createElement("div");
6153
6343
  menuDropdown.className = "dtm-player-menu";
6154
6344
  menuDropdown.style.display = "none";
6155
- const copyMmlItem = doc.createElement("button");
6156
- copyMmlItem.type = "button";
6157
- copyMmlItem.className = "dtm-player-menu-item";
6158
- copyMmlItem.textContent = "MML\u30B3\u30D4\u30FC";
6159
- const embedItem = doc.createElement("button");
6160
- embedItem.type = "button";
6161
- embedItem.className = "dtm-player-menu-item";
6162
- embedItem.textContent = "\u57CB\u3081\u8FBC\u3080";
6163
- menuDropdown.appendChild(copyMmlItem);
6345
+ const makeMenuItem = (label) => {
6346
+ const item = doc.createElement("button");
6347
+ item.type = "button";
6348
+ item.className = "dtm-player-menu-item";
6349
+ item.textContent = label;
6350
+ return item;
6351
+ };
6352
+ const showMmlItem = makeMenuItem("MML\u3092\u8868\u793A");
6353
+ const mmlInfoItem = makeMenuItem("MML\u66F8\u5F0F\u3068\u306F");
6354
+ const embedItem = makeMenuItem("\u57CB\u3081\u8FBC\u3080");
6355
+ const copyMmlItem = makeMenuItem("MML\u30B3\u30D4\u30FC");
6356
+ menuDropdown.appendChild(showMmlItem);
6357
+ menuDropdown.appendChild(mmlInfoItem);
6164
6358
  menuDropdown.appendChild(embedItem);
6359
+ menuDropdown.appendChild(copyMmlItem);
6165
6360
  menuContainer.appendChild(menuDropdown);
6166
6361
  mmlHeader.appendChild(menuContainer);
6167
6362
  const toggleMenu = (show) => {
@@ -6184,38 +6379,200 @@ var mountMmlPlayer = (target, mml, options = {}) => {
6184
6379
  e.stopPropagation();
6185
6380
  toggleMenu();
6186
6381
  });
6187
- copyMmlItem.addEventListener("click", async (e) => {
6188
- e.stopPropagation();
6189
- const success = await copyToClipboard(doc, mml);
6190
- if (success) {
6191
- copyMmlItem.textContent = "\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F\uFF01";
6192
- } else {
6193
- copyMmlItem.textContent = "\u30B3\u30D4\u30FC\u5931\u6557";
6382
+ let infoModalEl = null;
6383
+ let modalSamplePlayer = null;
6384
+ const closeInfoModal = () => {
6385
+ if (modalSamplePlayer) {
6386
+ modalSamplePlayer.stop();
6387
+ modalSamplePlayer.destroy();
6388
+ modalSamplePlayer = null;
6389
+ }
6390
+ infoModalEl?.remove();
6391
+ infoModalEl = null;
6392
+ };
6393
+ const openInfoModal = (title) => {
6394
+ closeInfoModal();
6395
+ const overlay = doc.createElement("div");
6396
+ overlay.className = "dtm-modal-overlay";
6397
+ const modal = doc.createElement("div");
6398
+ modal.className = "dtm-win dtm-modal";
6399
+ const header = doc.createElement("div");
6400
+ header.className = "dtm-modal-header";
6401
+ const titleEl = doc.createElement("span");
6402
+ titleEl.className = "dtm-modal-title";
6403
+ titleEl.textContent = title;
6404
+ const closeBtn = doc.createElement("button");
6405
+ closeBtn.type = "button";
6406
+ closeBtn.className = "dtm-modal-close";
6407
+ closeBtn.innerHTML = "&times;";
6408
+ closeBtn.title = "\u9589\u3058\u308B";
6409
+ header.append(titleEl, closeBtn);
6410
+ const modalBody = doc.createElement("div");
6411
+ modalBody.className = "dtm-modal-body";
6412
+ modal.append(header, modalBody);
6413
+ overlay.appendChild(modal);
6414
+ closeBtn.addEventListener("click", (e) => {
6415
+ e.stopPropagation();
6416
+ closeInfoModal();
6417
+ });
6418
+ overlay.addEventListener("click", (e) => {
6419
+ if (e.target === overlay) closeInfoModal();
6420
+ });
6421
+ doc.body.appendChild(overlay);
6422
+ infoModalEl = overlay;
6423
+ return modalBody;
6424
+ };
6425
+ const appendCopyButton = (parent, text) => {
6426
+ const actions = doc.createElement("div");
6427
+ actions.style.marginTop = "8px";
6428
+ const copyBtn = doc.createElement("button");
6429
+ copyBtn.type = "button";
6430
+ copyBtn.className = "dtm-btn dtm-btn--primary dtm-btn--xs";
6431
+ copyBtn.textContent = "\u{1F4CB} \u30B3\u30D4\u30FC";
6432
+ copyBtn.addEventListener("click", async (e) => {
6433
+ e.stopPropagation();
6434
+ const ok = await copyToClipboard(doc, text);
6435
+ copyBtn.textContent = ok ? "\u2713 \u30B3\u30D4\u30FC\u5B8C\u4E86" : "\u30B3\u30D4\u30FC\u5931\u6557";
6436
+ if (ok) copyBtn.classList.add("dtm-btn--success");
6437
+ setTimeout(() => {
6438
+ copyBtn.textContent = "\u{1F4CB} \u30B3\u30D4\u30FC";
6439
+ copyBtn.classList.remove("dtm-btn--success");
6440
+ }, 1200);
6441
+ });
6442
+ actions.appendChild(copyBtn);
6443
+ parent.appendChild(actions);
6444
+ };
6445
+ const wireSampleButtons = (modalBody) => {
6446
+ const copyBtns = modalBody.querySelectorAll(".dtm-modal-sample-copy-btn");
6447
+ for (const btn of copyBtns) {
6448
+ const el = btn;
6449
+ el.addEventListener("click", async (e) => {
6450
+ e.stopPropagation();
6451
+ const sampleMml = el.getAttribute("data-mml") ?? "";
6452
+ const original = el.textContent;
6453
+ const ok = await copyToClipboard(doc, sampleMml);
6454
+ el.textContent = ok ? "\u2713 \u30B3\u30D4\u30FC\u5B8C\u4E86" : "\u30B3\u30D4\u30FC\u5931\u6557";
6455
+ if (ok) el.classList.add("dtm-btn--success");
6456
+ setTimeout(() => {
6457
+ el.textContent = original;
6458
+ el.classList.remove("dtm-btn--success");
6459
+ }, 1200);
6460
+ });
6194
6461
  }
6195
- setTimeout(() => {
6196
- copyMmlItem.textContent = "MML\u30B3\u30D4\u30FC";
6197
- }, 2e3);
6462
+ let activeSampleBtn = null;
6463
+ const resetSampleBtn = (b) => {
6464
+ if (!b) return;
6465
+ b.textContent = "\u25B6 \u8A66\u8074";
6466
+ b.classList.remove("dtm-btn--danger");
6467
+ b.classList.add("dtm-btn--primary");
6468
+ };
6469
+ const markPlaying = (b) => {
6470
+ b.textContent = "\u25A0 \u505C\u6B62";
6471
+ b.classList.remove("dtm-btn--primary");
6472
+ b.classList.add("dtm-btn--danger");
6473
+ };
6474
+ const playBtns = modalBody.querySelectorAll(".dtm-modal-sample-play-btn");
6475
+ for (const btn of playBtns) {
6476
+ const el = btn;
6477
+ el.addEventListener("click", (e) => {
6478
+ e.stopPropagation();
6479
+ const sampleMml = el.getAttribute("data-mml") ?? "";
6480
+ if (activeSampleBtn === el && modalSamplePlayer) {
6481
+ if (modalSamplePlayer.isPlaying()) {
6482
+ modalSamplePlayer.stop();
6483
+ } else {
6484
+ modalSamplePlayer.play();
6485
+ markPlaying(el);
6486
+ }
6487
+ return;
6488
+ }
6489
+ if (modalSamplePlayer) {
6490
+ modalSamplePlayer.stop();
6491
+ modalSamplePlayer.destroy();
6492
+ modalSamplePlayer = null;
6493
+ }
6494
+ resetSampleBtn(activeSampleBtn);
6495
+ activeSampleBtn = el;
6496
+ const sampleBox = el.closest(".dtm-modal-sample-box");
6497
+ const container = sampleBox?.querySelector(
6498
+ ".dtm-modal-sample-player-container"
6499
+ );
6500
+ if (!container) return;
6501
+ container.innerHTML = "";
6502
+ modalSamplePlayer = mountMmlPlayer(container, sampleMml, {
6503
+ onPlayNote: options.onPlayNote,
6504
+ onPlayDrum: options.onPlayDrum,
6505
+ onResumeAudio: options.onResumeAudio,
6506
+ getAudioTime: options.getAudioTime,
6507
+ singingVoices: options.singingVoices,
6508
+ drumPatterns: options.drumPatterns,
6509
+ volume: trackVolume,
6510
+ // 解説モーダル内の試聴サンプルは規約同意を要求しない。
6511
+ skipConsent: true,
6512
+ onStop: () => {
6513
+ if (activeSampleBtn === el) resetSampleBtn(el);
6514
+ }
6515
+ });
6516
+ markPlaying(el);
6517
+ modalSamplePlayer.play();
6518
+ });
6519
+ }
6520
+ };
6521
+ showMmlItem.addEventListener("click", (e) => {
6522
+ e.stopPropagation();
6523
+ toggleMenu(false);
6524
+ const modalBody = openInfoModal("MML");
6525
+ const pre = doc.createElement("pre");
6526
+ pre.textContent = mml;
6527
+ pre.style.whiteSpace = "pre-wrap";
6528
+ pre.style.wordBreak = "break-all";
6529
+ modalBody.appendChild(pre);
6530
+ appendCopyButton(modalBody, mml);
6531
+ });
6532
+ mmlInfoItem.addEventListener("click", (e) => {
6533
+ e.stopPropagation();
6534
+ toggleMenu(false);
6535
+ const modalBody = openInfoModal("MML\u306E\u66F8\u304D\u65B9\u89E3\u8AAC");
6536
+ modalBody.innerHTML = MML_INFO_HTML;
6537
+ wireSampleButtons(modalBody);
6198
6538
  });
6199
6539
  embedItem.addEventListener("click", async (e) => {
6200
6540
  e.stopPropagation();
6201
- embedItem.textContent = "\u751F\u6210\u4E2D...";
6541
+ toggleMenu(false);
6542
+ const modalBody = openInfoModal("\u57CB\u3081\u8FBC\u307F");
6543
+ const loading = doc.createElement("p");
6544
+ loading.textContent = "\u751F\u6210\u4E2D...";
6545
+ modalBody.appendChild(loading);
6202
6546
  try {
6203
6547
  const embedBase = options.embedUrl ?? "https://onjmin.github.io/dtm/demo/embed.html";
6204
6548
  const payload = await encodeMml(mml);
6205
6549
  const url2 = `${embedBase}#${payload}`;
6206
6550
  const snippet = `<iframe src="${url2}" width="100%" height="260" frameborder="0" loading="lazy" title="@onjmin/dtm player"></iframe>`;
6207
- const success = await copyToClipboard(doc, snippet);
6208
- if (success) {
6209
- embedItem.textContent = "\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F\uFF01";
6210
- } else {
6211
- embedItem.textContent = "\u30B3\u30D4\u30FC\u5931\u6557";
6212
- }
6551
+ if (!modalBody.isConnected) return;
6552
+ loading.remove();
6553
+ const desc = doc.createElement("p");
6554
+ 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";
6555
+ const pre = doc.createElement("pre");
6556
+ pre.textContent = snippet;
6557
+ pre.style.whiteSpace = "pre-wrap";
6558
+ pre.style.wordBreak = "break-all";
6559
+ modalBody.append(desc, pre);
6560
+ appendCopyButton(modalBody, snippet);
6213
6561
  } catch (err2) {
6214
6562
  console.error("[dtm] failed to generate embed snippet", err2);
6215
- embedItem.textContent = "\u751F\u6210\u5931\u6557";
6563
+ if (modalBody.isConnected) loading.textContent = "\u751F\u6210\u306B\u5931\u6557\u3057\u307E\u3057\u305F";
6564
+ }
6565
+ });
6566
+ copyMmlItem.addEventListener("click", async (e) => {
6567
+ e.stopPropagation();
6568
+ const success = await copyToClipboard(doc, mml);
6569
+ if (success) {
6570
+ copyMmlItem.textContent = "\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F\uFF01";
6571
+ } else {
6572
+ copyMmlItem.textContent = "\u30B3\u30D4\u30FC\u5931\u6557";
6216
6573
  }
6217
6574
  setTimeout(() => {
6218
- embedItem.textContent = "\u57CB\u3081\u8FBC\u3080";
6575
+ copyMmlItem.textContent = "MML\u30B3\u30D4\u30FC";
6219
6576
  }, 2e3);
6220
6577
  });
6221
6578
  const promotedToImage = /* @__PURE__ */ new Set();
@@ -6461,6 +6818,77 @@ var mountMmlPlayer = (target, mml, options = {}) => {
6461
6818
  root.appendChild(termsDiv);
6462
6819
  }
6463
6820
  target.appendChild(root);
6821
+ let consentOverlayEl = null;
6822
+ const checkConsentAndShow = () => {
6823
+ try {
6824
+ if (options.skipConsent) return;
6825
+ const unagreed = termsModels.filter((model) => {
6826
+ if (agreedModelsInSession.has(model)) return false;
6827
+ try {
6828
+ if (typeof localStorage === "undefined" || !localStorage) return true;
6829
+ return localStorage.getItem(`dtm_agreed_terms_${model}`) !== "true";
6830
+ } catch (e) {
6831
+ console.warn(
6832
+ "[dtm-player] localStorage access denied in consent check",
6833
+ e
6834
+ );
6835
+ return true;
6836
+ }
6837
+ });
6838
+ if (unagreed.length === 0) return;
6839
+ const consentOverlay = doc.createElement("div");
6840
+ consentOverlay.className = "dtm-consent-overlay";
6841
+ const modal = doc.createElement("div");
6842
+ modal.className = "dtm-win dtm-consent-modal";
6843
+ const header = doc.createElement("div");
6844
+ header.className = "dtm-consent-header";
6845
+ header.textContent = "\u5229\u7528\u898F\u7D04\u306E\u78BA\u8A8D";
6846
+ const body2 = doc.createElement("div");
6847
+ body2.className = "dtm-consent-body";
6848
+ 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>`;
6849
+ for (const model of unagreed) {
6850
+ const label = KOE_VOICEBANK_LABELS[model] || model;
6851
+ const url2 = KOE_VOICEBANK_TERMS[model];
6852
+ contentHTML += `
6853
+ <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);">
6854
+ <div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 11px; font-weight: bold; color: var(--dtm-gold);">
6855
+ <span>\u4F7F\u7528\u6642\u306B\u306F</span>
6856
+ <a href="${url2}" target="_blank" rel="noopener noreferrer" style="color: var(--dtm-primary); text-decoration: underline;">${label}UTAU\u97F3\u6E90</a>
6857
+ <span>\u306E\u5229\u7528\u898F\u7D04\u306B\u5F93\u3063\u3066\u304F\u3060\u3055\u3044</span>
6858
+ </div>
6859
+ </div>
6860
+ `;
6861
+ }
6862
+ body2.innerHTML = contentHTML;
6863
+ const footer = doc.createElement("div");
6864
+ footer.className = "dtm-consent-footer";
6865
+ const btn = doc.createElement("button");
6866
+ btn.type = "button";
6867
+ btn.className = "dtm-btn dtm-btn--success";
6868
+ btn.textContent = "\u540C\u610F\u3057\u3066\u5229\u7528\u3059\u308B";
6869
+ btn.onclick = () => {
6870
+ for (const model of unagreed) {
6871
+ try {
6872
+ if (typeof localStorage !== "undefined" && localStorage) {
6873
+ localStorage.setItem(`dtm_agreed_terms_${model}`, "true");
6874
+ }
6875
+ } catch (e) {
6876
+ }
6877
+ agreedModelsInSession.add(model);
6878
+ }
6879
+ consentOverlay.remove();
6880
+ consentOverlayEl = null;
6881
+ };
6882
+ footer.appendChild(btn);
6883
+ modal.append(header, body2, footer);
6884
+ consentOverlay.appendChild(modal);
6885
+ doc.body.appendChild(consentOverlay);
6886
+ consentOverlayEl = consentOverlay;
6887
+ } catch (err2) {
6888
+ console.error("[dtm-player] Error in checkConsentAndShow:", err2);
6889
+ }
6890
+ };
6891
+ checkConsentAndShow();
6464
6892
  const autoScroll = (lane, el) => {
6465
6893
  if (el.offsetWidth === 0 || lane.clientWidth === 0) return;
6466
6894
  const elementCenter = el.offsetLeft + el.offsetWidth / 2;
@@ -6635,6 +7063,8 @@ var mountMmlPlayer = (target, mml, options = {}) => {
6635
7063
  hideActiveBalloon();
6636
7064
  }
6637
7065
  root.remove();
7066
+ consentOverlayEl?.remove();
7067
+ closeInfoModal();
6638
7068
  };
6639
7069
  const instance = {
6640
7070
  play,
@@ -6676,108 +7106,6 @@ var CHORD_INFO_HTML = `
6676
7106
  </ul>
6677
7107
  </div>
6678
7108
  `;
6679
- var MML_INFO_HTML = `
6680
- <div class="dtm-modal-body-content">
6681
- <h4>1. \u97F3\u7B26\u3068\u4F11\u7B26</h4>
6682
- <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>
6683
- <ul>
6684
- <li>\u534A\u97F3\u4E0A\u3052\u308B: <code>c#</code> \u307E\u305F\u306F <code>c+</code></li>
6685
- <li>\u534A\u97F3\u4E0B\u3052\u308B: <code>d-</code></li>
6686
- <li>\u4F11\u7B26: <code>r</code></li>
6687
- </ul>
6688
-
6689
- <h4>2. \u97F3\u306E\u9577\u3055</h4>
6690
- <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>
6691
- <ul>
6692
- <li><code>c4</code> : 4\u5206\u97F3\u7B26\u306E\u30C9</li>
6693
- <li><code>r8</code> : 8\u5206\u4F11\u7B26</li>
6694
- <li><code>c4.</code> : \u4ED8\u70B94\u5206\u97F3\u7B26\u306E\u30C9\uFF08\u9577\u3055\u30921.5\u500D\u306B\uFF09</li>
6695
- <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>
6696
- </ul>
6697
-
6698
- <h4>3. \u30AA\u30AF\u30BF\u30FC\u30D6\uFF08\u97F3\u306E\u9AD8\u3055\uFF09</h4>
6699
- <ul>
6700
- <li><code>o4</code>, <code>o5</code> : \u9AD8\u3055\u3092\u76F4\u63A5\u6307\u5B9A\uFF08\u3075\u3064\u3046\u306F o4 \u304B o5\uFF09</li>
6701
- <li><code>&gt;</code> : 1\u30AA\u30AF\u30BF\u30FC\u30D6\u4E0A\u3052\u308B</li>
6702
- <li><code>&lt;</code> : 1\u30AA\u30AF\u30BF\u30FC\u30D6\u4E0B\u3052\u308B</li>
6703
- </ul>
6704
-
6705
- <h4>4. \u30C6\u30F3\u30DD</h4>
6706
- <ul>
6707
- <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>
6708
- </ul>
6709
-
6710
- <h4>5. \u548C\u97F3</h4>
6711
- <p>\u97F3\u7B26\u3092 <code>[</code> \u3068 <code>]</code> \u3067\u56F2\u3080\u3068\u540C\u6642\u306B\u767A\u97F3\u3057\u307E\u3059\u3002</p>
6712
- <pre>\u4F8B: [ceg]4 \uFF08\u30C9\u30FB\u30DF\u30FB\u30BD\u30924\u5206\u97F3\u7B26\u3067\u540C\u6642\u306B\u767A\u97F3\uFF09</pre>
6713
-
6714
- <h4>6. \u30C8\u30E9\u30C3\u30AF\u306E\u533A\u5207\u308A</h4>
6715
- <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>
6716
- <ul>
6717
- <li><code>@0</code>: \u30E1\u30ED\u30C7\u30A3</li>
6718
- <li><code>@1</code>: \u30B5\u30D6\u30E1\u30ED</li>
6719
- <li><code>@2</code>: \u30D9\u30FC\u30B9</li>
6720
- <li><code>@3</code>: \u4F34\u594F</li>
6721
- </ul>
6722
-
6723
- <h4>7. \u6B4C\u58F0\u30FB\u6B4C\u8A5E\u5165\u529B</h4>
6724
- <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>
6725
- <pre>\u4F8B: @@0 tsukuyomi \u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D\u3069\u3093\u3050\u308A\u3053</pre>
6726
- <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>
6727
-
6728
- <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>
6729
-
6730
- <!-- \u30B5\u30F3\u30D7\u30EB1 -->
6731
- <div class="dtm-modal-sample-box">
6732
- <div class="dtm-modal-sample-header">
6733
- <span class="dtm-modal-sample-tag">1. \u57FA\u672C\u306E\u30E1\u30ED\u30C7\u30A3</span>
6734
- <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>
6735
- </div>
6736
- <pre style="margin: 0; padding: 6px;">@0 t120 l8 o5 c d e f g a b &gt; c</pre>
6737
- <div class="dtm-modal-sample-desc">
6738
- \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
6739
- </div>
6740
- <div style="margin-top: 8px;">
6741
- <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>
6742
- </div>
6743
- <div class="dtm-modal-sample-player-container"></div>
6744
- </div>
6745
-
6746
- <!-- \u30B5\u30F3\u30D7\u30EB2 -->
6747
- <div class="dtm-modal-sample-box">
6748
- <div class="dtm-modal-sample-header">
6749
- <span class="dtm-modal-sample-tag">2. \u8907\u6570\u30C8\u30E9\u30C3\u30AF\u3068\u548C\u97F3</span>
6750
- <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>
6751
- </div>
6752
- <pre style="margin: 0; padding: 6px;">@0 t120 o5 c e g2 ;
6753
- @3 o4 [ceg]2 [ceg]2</pre>
6754
- <div class="dtm-modal-sample-desc">
6755
- ; \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
6756
- </div>
6757
- <div style="margin-top: 8px;">
6758
- <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>
6759
- </div>
6760
- <div class="dtm-modal-sample-player-container"></div>
6761
- </div>
6762
-
6763
- <!-- \u30B5\u30F3\u30D7\u30EB3 -->
6764
- <div class="dtm-modal-sample-box">
6765
- <div class="dtm-modal-sample-header">
6766
- <span class="dtm-modal-sample-tag">3. \u6B4C\u5531\u4ED8\u304D (\u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D)</span>
6767
- <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>
6768
- </div>
6769
- <pre style="margin: 0; padding: 6px;">@0 t120 v100 o4g8 g8 e8 e8 f8 e8 d8 c8 g8 g8 e8 e8 d4.;
6770
- @@0 tsukuyomi \u3069\u3093\u3050\u308A\u3053\u308D\u3053\u308D\u3069\u3093\u3050\u308A\u3053;</pre>
6771
- <div class="dtm-modal-sample-desc">
6772
- @@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
6773
- </div>
6774
- <div style="margin-top: 8px;">
6775
- <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>
6776
- </div>
6777
- <div class="dtm-modal-sample-player-container"></div>
6778
- </div>
6779
- </div>
6780
- `;
6781
7109
  var MIDI_INFO_HTML = `
6782
7110
  <div class="dtm-modal-body-content">
6783
7111
  <h4>1. MIDI\u30D5\u30A1\u30A4\u30EB\u3068\u306F</h4>
@@ -8148,8 +8476,8 @@ var mountDAW = (target, options = {}) => {
8148
8476
  t.vocalPan = 64;
8149
8477
  t.vocalOctave = 0;
8150
8478
  }
8151
- lyrics?.forEach((lt, idx) => {
8152
- const t = trackStates[idx];
8479
+ lyrics?.forEach((lt) => {
8480
+ const t = trackStates[lt.trackId];
8153
8481
  if (!t) return;
8154
8482
  t.lyrics = lt.syllables.map((s) => s.kana).join("");
8155
8483
  t.lyricModel = lt.model;