マルチトラック：再生・書き出しに対応

src/helpers/generateWriteErrorMessage.ts

@@ -0,0 +1,20 @@
+import { ResultError } from "@/type/result";
+
+export function generateWriteErrorMessage(writeFileResult: ResultError) {
+  if (!writeFileResult.code) {
+    return `何らかの理由で失敗しました。${writeFileResult.message}`;
+  }
+  const code = writeFileResult.code.toUpperCase();
+
+  if (code.startsWith("ENOSPC")) {
+    return "空き容量が足りません。";
+  }
+
+  if (code.startsWith("EACCES")) {
+    return "ファイルにアクセスする許可がありません。";
+  }
+
+  if (code.startsWith("EBUSY")) {
+    return "ファイルが開かれています。";
+  }
+}

src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from "vue";
 import { createGtm } from "@gtm-support/vue-gtm";
 import { Quasar, Dialog, Loading, Notify } from "quasar";
 import iconSet from "quasar/icon-set/material-icons";
-import { store, storeKey } from "./store";
+import { store, storePlugins, storeKey } from "./store";
 import { ipcMessageReceiver } from "./plugins/ipcMessageReceiverPlugin";
 import { hotkeyPlugin } from "./plugins/hotkeyPlugin";
 import App from "@/components/App.vue";
@@ -18,6 +18,7 @@ window.dataLayer = [];
 
 createApp(App)
   .use(store, storeKey)
+  .use(storePlugins, { store })
   .use(
     createGtm({
       id: import.meta.env.VITE_GTM_CONTAINER_ID ?? "GTM-DUMMY",

src/sing/audioRendering.ts

@@ -871,20 +871,24 @@ export class PolySynth implements Instrument {
 
 export type ChannelStripOptions = {
   readonly volume?: number;
+  readonly pan?: number;
+  readonly mute?: boolean;
 };
 
 /**
  * ミキサーの1チャンネル分の機能を提供します。
  */
 export class ChannelStrip {
   private readonly gainNode: GainNode;
+  private readonly muteGainNode: GainNode;
+  private readonly panNode: StereoPannerNode;
 
   get input(): AudioNode {
-    return this.gainNode;
+    return this.muteGainNode;
   }
 
   get output(): AudioNode {
-    return this.gainNode;
+    return this.panNode;
   }
 
   get volume() {
@@ -894,9 +898,31 @@ export class ChannelStrip {
     this.gainNode.gain.value = value;
   }
 
+  get mute() {
+    return this.muteGainNode.gain.value === 0;
+  }
+  set mute(value: boolean) {
+    this.muteGainNode.gain.value = value ? 0 : 1;
+  }
+
+  get pan() {
+    return this.panNode.pan.value;
+  }
+  set pan(value: number) {
+    this.panNode.pan.value = value;
+  }
+
   constructor(audioContext: BaseAudioContext, options?: ChannelStripOptions) {
     this.gainNode = new GainNode(audioContext);
+    this.muteGainNode = new GainNode(audioContext);
+    this.panNode = new StereoPannerNode(audioContext);
+
+    this.muteGainNode.connect(this.gainNode);
+    this.gainNode.connect(this.panNode);
+
     this.gainNode.gain.value = options?.volume ?? 0.1;
+    this.muteGainNode.gain.value = options?.mute ? 0 : 1;
+    this.panNode.pan.value = options?.pan ?? 0;
   }
 }
 

src/sing/convertToWavFileData.ts

@@ -0,0 +1,56 @@
+export const convertToWavFileData = (audioBuffer: AudioBuffer) => {
+  const bytesPerSample = 4; // Float32
+  const formatCode = 3; // WAVE_FORMAT_IEEE_FLOAT
+
+  const numberOfChannels = audioBuffer.numberOfChannels;
+  const numberOfSamples = audioBuffer.length;
+  const sampleRate = audioBuffer.sampleRate;
+  const byteRate = sampleRate * numberOfChannels * bytesPerSample;
+  const blockSize = numberOfChannels * bytesPerSample;
+  const dataSize = numberOfSamples * numberOfChannels * bytesPerSample;
+
+  const buffer = new ArrayBuffer(44 + dataSize);
+  const dataView = new DataView(buffer);
+
+  let pos = 0;
+  const writeString = (value: string) => {
+    for (let i = 0; i < value.length; i++) {
+      dataView.setUint8(pos, value.charCodeAt(i));
+      pos += 1;
+    }
+  };
+  const writeUint32 = (value: number) => {
+    dataView.setUint32(pos, value, true);
+    pos += 4;
+  };
+  const writeUint16 = (value: number) => {
+    dataView.setUint16(pos, value, true);
+    pos += 2;
+  };
+  const writeSample = (offset: number, value: number) => {
+    dataView.setFloat32(pos + offset * 4, value, true);
+  };
+
+  writeString("RIFF");
+  writeUint32(36 + dataSize); // RIFFチャンクサイズ
+  writeString("WAVE");
+  writeString("fmt ");
+  writeUint32(16); // fmtチャンクサイズ
+  writeUint16(formatCode);
+  writeUint16(numberOfChannels);
+  writeUint32(sampleRate);
+  writeUint32(byteRate);
+  writeUint16(blockSize);
+  writeUint16(bytesPerSample * 8); // 1サンプルあたりのビット数
+  writeString("data");
+  writeUint32(dataSize);
+
+  for (let i = 0; i < numberOfChannels; i++) {
+    const channelData = audioBuffer.getChannelData(i);
+    for (let j = 0; j < numberOfSamples; j++) {
+      writeSample(j * numberOfChannels + i, channelData[j]);
+    }
+  }
+
+  return buffer;
+};

src/store/audio.ts

@@ -57,6 +57,7 @@ import {
 import { AudioQuery, AccentPhrase, Speaker, SpeakerInfo } from "@/openapi";
 import { base64ImageToUri, base64ToUri } from "@/helpers/base64Helper";
 import { getValueOrThrow, ResultError } from "@/type/result";
+import { generateWriteErrorMessage } from "@/helpers/generateWriteErrorMessage";
 
 function generateAudioKey() {
   return AudioKey(crypto.randomUUID());
@@ -166,25 +167,6 @@ export async function writeTextFile(obj: {
   });
 }
 
-function generateWriteErrorMessage(writeFileResult: ResultError) {
-  if (!writeFileResult.code) {
-    return `何らかの理由で失敗しました。${writeFileResult.message}`;
-  }
-  const code = writeFileResult.code.toUpperCase();
-
-  if (code.startsWith("ENOSPC")) {
-    return "空き容量が足りません。";
-  }
-
-  if (code.startsWith("EACCES")) {
-    return "ファイルにアクセスする許可がありません。";
-  }
-
-  if (code.startsWith("EBUSY")) {
-    return "ファイルが開かれています。";
-  }
-}
-
 // TODO: GETTERに移動する。
 export function getCharacterInfo(
   state: State,

src/store/index.ts

@@ -1,4 +1,4 @@
-import { InjectionKey } from "vue";
+import { InjectionKey, Plugin } from "vue";
 import { createStore, Store, useStore as baseUseStore } from "./vuex";
 
 import {
@@ -23,6 +23,7 @@ import {
   singingStore,
   singingCommandStoreState,
   singingCommandStore,
+  singingStorePlugin,
 } from "./singing";
 import { projectStoreState, projectStore } from "./project";
 import { uiStoreState, uiStore } from "./ui";
@@ -412,6 +413,15 @@ export const store = createStore<State, AllGetters, AllActions, AllMutations>({
   strict: !isProduction,
 });
 
+export const storePlugins: Plugin = {
+  install(
+    app,
+    { store }: { store: Store<State, AllGetters, AllActions, AllMutations> },
+  ) {
+    singingStorePlugin(store);
+  },
+};
+
 export const useStore = (): Store<
   State,
   AllGetters,