@onjmin/dtm 0.1.80 → 0.1.82

package/README.md

@@ -77,6 +77,31 @@ chordPlayer.setVolume(65);
 
 ---
 
+## 録音・動画エンコード用音声ストリームの取得 (`MediaStream`)
+
+動画ファイル（MP4 / WebM）としてのエクスポートや録音（`MediaRecorder`）を行う場合、`studio` から音声トラックや `MediaStream` を直感的に取得できます。
+
+```ts
+const studio = await createDtmStudio();
+
+// 1. 録音・録画用 Audio MediaStreamTrack の取得
+const audioTrack = studio.getAudioStreamTrack();
+
+// 2. Canvas 映像トラックと合成して MediaRecorder へ渡す
+const canvasStream = canvas.captureStream(30);
+const combinedStream = new MediaStream([
+  ...canvasStream.getVideoTracks(),
+  audioTrack,
+]);
+
+const recorder = new MediaRecorder(combinedStream, { mimeType: "video/mp4" });
+recorder.start();
+```
+
+また、`createDtmStudio({ destination })` に `MediaStreamAudioDestinationNode` や自前の `GainNode` を直接渡すことも可能です。`studio.masterGain` を参照して自作の Web Audio エフェクトやミキサーにルーティングすることもできます。
+
+---
+
 ## 再生機能・API 一覧
 
 用途や UI の有無、歌声対応の有無に応じた各種再生関数が用意されています。

package/dist/index.d.mts

@@ -1686,6 +1686,11 @@ type DtmStudioOptions = {
     masterVolume?: number;
     /** ドラム音量 0-1。既定 1。 */
     drumVolume?: number;
+    /**
+     * 最終出力先の AudioNode。未指定時は audioCtx.destination（スピーカー）。
+     * MediaStreamAudioDestinationNode や GainNode を指定できます。
+     */
+    destination?: AudioNode;
     /**
      * 歌声合成ワーカー（voice-worker.js）のURL。
      * 既定はパッケージ同梱の dist/voice-worker.js。
@@ -1821,6 +1826,18 @@ type ModeSwitchInstance = {
 type DtmStudio = {
     /** 内部で使用している AudioContext。 */
     audioContext: AudioContext;
+    /** マスターゲインノード（全音色の最終出力先）。 */
+    masterGain: GainNode;
+    /**
+     * 録画・録音用の MediaStreamAudioDestinationNode を生成/取得する。
+     * masterGain が接続され、その stream から音声トラックを取得できます。
+     */
+    createMediaStreamDestination: () => MediaStreamAudioDestinationNode;
+    /**
+     * 録画・録音用の Audio MediaStreamTrack を取得する。
+     * MediaRecorder のストリーム合成（canvas + audio）に使えます。
+     */
+    getAudioStreamTrack: () => MediaStreamTrack;
     /** 歌声合成ヘルパ（klatt + koe音源）。 */
     singingVoices: SingingVoices;
     /** 編集UI（mountDAW）を音・歌声込みでマウントする。 */

package/dist/index.d.ts

@@ -1686,6 +1686,11 @@ type DtmStudioOptions = {
     masterVolume?: number;
     /** ドラム音量 0-1。既定 1。 */
     drumVolume?: number;
+    /**
+     * 最終出力先の AudioNode。未指定時は audioCtx.destination（スピーカー）。
+     * MediaStreamAudioDestinationNode や GainNode を指定できます。
+     */
+    destination?: AudioNode;
     /**
      * 歌声合成ワーカー（voice-worker.js）のURL。
      * 既定はパッケージ同梱の dist/voice-worker.js。
@@ -1821,6 +1826,18 @@ type ModeSwitchInstance = {
 type DtmStudio = {
     /** 内部で使用している AudioContext。 */
     audioContext: AudioContext;
+    /** マスターゲインノード（全音色の最終出力先）。 */
+    masterGain: GainNode;
+    /**
+     * 録画・録音用の MediaStreamAudioDestinationNode を生成/取得する。
+     * masterGain が接続され、その stream から音声トラックを取得できます。
+     */
+    createMediaStreamDestination: () => MediaStreamAudioDestinationNode;
+    /**
+     * 録画・録音用の Audio MediaStreamTrack を取得する。
+     * MediaRecorder のストリーム合成（canvas + audio）に使えます。
+     */
+    getAudioStreamTrack: () => MediaStreamTrack;
     /** 歌声合成ヘルパ（klatt + koe音源）。 */
     singingVoices: SingingVoices;
     /** 編集UI（mountDAW）を音・歌声込みでマウントする。 */

package/dist/index.js

@@ -7062,9 +7062,10 @@ var loadDrumFont = (ctx, pitch) => {
   return p;
 };
 var BAR_SEP = /[|lｌ→]/;
+var toHalfWidth = (str) => str.replace(/[！-～]/g, (ch) => String.fromCharCode(ch.charCodeAt(0) - 65248)).replace(/　/g, " ");
 var NON_EVENT_RE = /^[=_]$|^N\.C\.$|^N$/i;
 var buildDisplayLines = (chords, eventsCount) => {
-  const rawLines = chords.split("\n").map((l) => l.trim()).filter((l) => l);
+  const rawLines = toHalfWidth(chords).split("\n").map((l) => l.trim()).filter((l) => l);
   const displayLines = [];
   let eventCounter = 0;
   let colorIdx = 0;
@@ -14797,8 +14798,22 @@ var createDtmStudio = async (options = {}) => {
     const g = Math.max(0, Math.min(100, volume)) / 100;
     masterGain.gain.setValueAtTime(g, audioCtx.currentTime);
   };
+  let recordDestNode = null;
+  const createMediaStreamDestination = () => {
+    if (!recordDestNode) {
+      recordDestNode = audioCtx.createMediaStreamDestination();
+      masterGain.connect(recordDestNode);
+    }
+    return recordDestNode;
+  };
+  const getAudioStreamTrack = () => {
+    return createMediaStreamDestination().stream.getAudioTracks()[0];
+  };
   return {
     audioContext: audioCtx,
+    masterGain,
+    createMediaStreamDestination,
+    getAudioStreamTrack,
     singingVoices,
     mountEditor,
     mountPlayer,

package/dist/index.mjs

@@ -6939,9 +6939,10 @@ var loadDrumFont = (ctx, pitch) => {
   return p;
 };
 var BAR_SEP = /[|lｌ→]/;
+var toHalfWidth = (str) => str.replace(/[！-～]/g, (ch) => String.fromCharCode(ch.charCodeAt(0) - 65248)).replace(/　/g, " ");
 var NON_EVENT_RE = /^[=_]$|^N\.C\.$|^N$/i;
 var buildDisplayLines = (chords, eventsCount) => {
-  const rawLines = chords.split("\n").map((l) => l.trim()).filter((l) => l);
+  const rawLines = toHalfWidth(chords).split("\n").map((l) => l.trim()).filter((l) => l);
   const displayLines = [];
   let eventCounter = 0;
   let colorIdx = 0;
@@ -14673,8 +14674,22 @@ var createDtmStudio = async (options = {}) => {
     const g = Math.max(0, Math.min(100, volume)) / 100;
     masterGain.gain.setValueAtTime(g, audioCtx.currentTime);
   };
+  let recordDestNode = null;
+  const createMediaStreamDestination = () => {
+    if (!recordDestNode) {
+      recordDestNode = audioCtx.createMediaStreamDestination();
+      masterGain.connect(recordDestNode);
+    }
+    return recordDestNode;
+  };
+  const getAudioStreamTrack = () => {
+    return createMediaStreamDestination().stream.getAudioTracks()[0];
+  };
   return {
     audioContext: audioCtx,
+    masterGain,
+    createMediaStreamDestination,
+    getAudioStreamTrack,
     singingVoices,
     mountEditor,
     mountPlayer,

package/package.json

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