@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.d.mts +5 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.js +468 -140
- package/dist/index.mjs +468 -140
- package/package.json +1 -1
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
|
-
|
|
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>></code> : 1\u30AA\u30AF\u30BF\u30FC\u30D6\u4E0A\u3052\u308B</li>
|
|
4167
|
+
<li><code><</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>@@<\u30C8\u30E9\u30C3\u30AF\u756A\u53F7> <\u97F3\u6E90\u540D> <\u6B4C\u8A5E></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 > 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\
|
|
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:
|
|
5681
|
+
font-size: 11px;
|
|
5494
5682
|
line-height: 1.5;
|
|
5495
5683
|
letter-spacing: .04em;
|
|
5496
|
-
color: var(--dtm-
|
|
5497
|
-
|
|
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: "\
|
|
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
|
|
6156
|
-
|
|
6157
|
-
|
|
6158
|
-
|
|
6159
|
-
|
|
6160
|
-
|
|
6161
|
-
|
|
6162
|
-
|
|
6163
|
-
|
|
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
|
-
|
|
6188
|
-
|
|
6189
|
-
|
|
6190
|
-
if (
|
|
6191
|
-
|
|
6192
|
-
|
|
6193
|
-
|
|
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 = "×";
|
|
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
|
-
|
|
6196
|
-
|
|
6197
|
-
|
|
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
|
-
|
|
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
|
-
|
|
6208
|
-
|
|
6209
|
-
|
|
6210
|
-
|
|
6211
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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>></code> : 1\u30AA\u30AF\u30BF\u30FC\u30D6\u4E0A\u3052\u308B</li>
|
|
6702
|
-
<li><code><</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>@@<\u30C8\u30E9\u30C3\u30AF\u756A\u53F7> <\u97F3\u6E90\u540D> <\u6B4C\u8A5E></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 > 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
|
|
8152
|
-
const t = trackStates[
|
|
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;
|