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

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, watchStoreStatePlugin, 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(watchStoreStatePlugin, { 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/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,16 @@ export const store = createStore<State, AllGetters, AllActions, AllMutations>({
  strict: !isProduction,
 });
 
+// Storeをwatchするためのプラグインをまとめたもの。
+export const watchStoreStatePlugin: Plugin = {
+ install(
+ app,
+ { store }: { store: Store<State, AllGetters, AllActions, AllMutations> },
+ ) {
+ singingStorePlugin(store);
+ },
+};
+
 export const useStore = (): Store<
  State,
  AllGetters,