Add: ソングの書き出しダイアログを追加

src/components/Dialog/AllDialog.vue

@@ -22,6 +22,7 @@
   <UpdateNotificationDialogContainer
     :canOpenDialog="canOpenNotificationDialog"
   />
+  <ExportSongAudioDialog v-model="isExportSongAudioDialogOpen" />
   <ImportSongProjectDialog v-model="isImportSongProjectDialogOpenComputed" />
 </template>
 
@@ -39,6 +40,7 @@ import DictionaryManageDialog from "@/components/Dialog/DictionaryManageDialog.v
 import EngineManageDialog from "@/components/Dialog/EngineManageDialog.vue";
 import UpdateNotificationDialogContainer from "@/components/Dialog/UpdateNotificationDialog/Container.vue";
 import ImportSongProjectDialog from "@/components/Dialog/ImportSongProjectDialog.vue";
+import ExportSongAudioDialog from "@/components/Dialog/ExportSongAudioDialog/Container.vue";
 import { useStore } from "@/store";
 import { filterCharacterInfosByStyleType } from "@/store/utility";
 
@@ -159,6 +161,15 @@ const canOpenNotificationDialog = computed(() => {
   );
 });
 
+// ソングのオーディオエクスポート時の設定ダイアログ
+const isExportSongAudioDialogOpen = computed({
+  get: () => store.state.isExportSongAudioDialogOpen,
+  set: (val) =>
+    store.dispatch("SET_DIALOG_OPEN", {
+      isExportSongAudioDialogOpen: val,
+    }),
+});
+
 // ソングのプロジェクトファイルのインポート時の設定ダイアログ
 const isImportSongProjectDialogOpenComputed = computed({
   get: () => store.state.isImportSongProjectDialogOpen,

src/components/Dialog/ExportSongAudioDialog/BaseCell.vue

@@ -0,0 +1,41 @@
+<template>
+  <QCardActions :class="props.class">
+    <div>{{ title }}</div>
+    <div :aria-label="description">
+      <QIcon name="help_outline" size="sm" class="help-hover-icon">
+        <QTooltip
+          :delay="500"
+          anchor="center right"
+          self="center left"
+          transitionShow="jump-right"
+          transitionHide="jump-left"
+        >
+          {{ description }}
+        </QTooltip>
+      </QIcon>
+    </div>
+    <QSpace />
+    <slot />
+  </QCardActions>
+</template>
+
+<script setup lang="ts">
+export type Props = {
+  title: string;
+  description: string;
+  class?: unknown; // 型はquasarの定義を真似ている
+};
+
+const props = defineProps<Props>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/visually-hidden" as visually-hidden;
+@use "@/styles/colors" as colors;
+
+.help-hover-icon {
+  margin-left: 6px;
+  color: colors.$display;
+  opacity: 0.5;
+}
+</style>

src/components/Dialog/ExportSongAudioDialog/Container.vue

@@ -0,0 +1,27 @@
+<template>
+  <Presentation v-model="modelValue" @exportAudio="handleExportAudio" />
+</template>
+
+<script setup lang="ts">
+import Presentation, { ExportTarget } from "./Presentation.vue";
+import { useStore } from "@/store";
+import { SongExportSetting } from "@/store/type";
+
+defineOptions({
+  name: "ExportSongAudioDialog",
+});
+
+const modelValue = defineModel<boolean>();
+const store = useStore();
+
+const handleExportAudio = (
+  target: ExportTarget,
+  setting: SongExportSetting,
+) => {
+  if (target === "master") {
+    void store.dispatch("EXPORT_AUDIO_FILE", { setting });
+  } else {
+    void store.dispatch("EXPORT_STEM_AUDIO_FILE", { setting });
+  }
+};
+</script>

src/components/Dialog/ExportSongAudioDialog/Presentation.vue

@@ -0,0 +1,192 @@
+<template>
+  <QDialog ref="dialogRef" v-model="modelValue">
+    <QCard class="q-py-sm q-px-md dialog-card">
+      <QCardSection>
+        <div class="text-h5">書き出し</div>
+      </QCardSection>
+
+      <QSeparator />
+
+      <QCardSection>
+        <BaseCell
+          title="書き出し対象"
+          description="すべてのトラックをまとめて書き出すか、トラックごとに書き出すか選べます。"
+        >
+          <QBtnToggle
+            v-model="exportTarget"
+            :options="exportTargets"
+            padding="xs md"
+            unelevated
+            color="surface"
+            textColor="display"
+            toggleColor="primary"
+            toggleTextColor="display-on-primary"
+            dense
+          />
+        </BaseCell>
+        <!-- TODO：実装する
+        <BaseCell
+          title="フォーマット"
+          description="書き出す音声ファイルのフォーマットを選べます。"
+        >
+          <QBtnToggle
+            v-model="audioFormat"
+            :options="supportedFormats"
+            padding="xs md"
+            unelevated
+            color="surface"
+            textColor="display"
+            toggleColor="primary"
+            toggleTextColor="display-on-primary"
+            dense
+          />
+        </BaseCell> -->
+        <BaseCell
+          title="音声をステレオ化"
+          description="ONの場合、音声データがモノラルからステレオに変換されてから保存が行われます。"
+        >
+          <QToggle v-model="isStereo" />
+        </BaseCell>
+        <BaseCell
+          title="音声のサンプリングレート"
+          description="音声のサンプリングレートを変更できます。"
+        >
+          <QSelect
+            v-model="samplingRate"
+            dense
+            name="samplingRate"
+            :options="samplingRateOptions"
+            :optionLabel="renderSamplingRateLabel"
+          >
+          </QSelect>
+        </BaseCell>
+        <BaseCell
+          title="リミッターを適用する"
+          description="ONの場合、音量が制限されます。"
+        >
+          <QToggle v-model="withLimiter" />
+        </BaseCell>
+        <BaseCell
+          title="トラックのパラメーターを適用する"
+          description="OFFの場合、VOICEVOX内のパン、ボリューム、ミュート設定が適用されません。"
+        >
+          <QToggle v-model="withTrackParameters" />
+        </BaseCell>
+      </QCardSection>
+
+      <QSeparator />
+
+      <QCardActions>
+        <QSpace />
+        <QBtn
+          unelevated
+          align="right"
+          label="キャンセル"
+          color="toolbar-button"
+          textColor="toolbar-button-display"
+          class="text-no-wrap text-bold q-mr-sm"
+          @click="handleCancel"
+        />
+        <QBtn
+          unelevated
+          align="right"
+          label="書き出し"
+          color="toolbar-button"
+          textColor="toolbar-button-display"
+          class="text-no-wrap text-bold q-mr-sm"
+          @click="handleExportTrack"
+        />
+      </QCardActions>
+    </QCard>
+  </QDialog>
+</template>
+
+<script setup lang="ts">
+// メモ：前回の設定を引き継ぐため、他のダイアログでやっているようなinitializeValuesはやらない
+import { ref } from "vue";
+import { useDialogPluginComponent } from "quasar";
+import BaseCell from "./BaseCell.vue";
+import { SongSupportedAudioFormat, SongExportSetting } from "@/store/type";
+
+export type ExportTarget = "master" | "stem";
+const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+
+const modelValue = defineModel<boolean>();
+const emit = defineEmits<{
+  /** 音声をエクスポートするときに呼ばれる */
+  exportAudio: [exportTarget: ExportTarget, setting: SongExportSetting];
+}>();
+
+// 書き出し対象選択
+const exportTargets = [
+  {
+    label: "すべてのトラック",
+    value: "master",
+  },
+  {
+    label: "トラックごと",
+    value: "stem",
+  },
+];
+const exportTarget = ref<ExportTarget>("master");
+
+// ステレオ
+const isStereo = ref<boolean>(true);
+
+// フォーマット選択
+const audioFormat = ref<SongSupportedAudioFormat>("wav");
+// const supportedFormats = [
+//   {
+//     label: "WAV",
+//     value: "wav",
+//   },
+//   {
+//     label: "mp3",
+//     value: "mp3",
+//   },
+//   {
+//     label: "ogg",
+//     value: "ogg",
+//   },
+// ];
+
+// サンプルレート
+const samplingRate = ref<number>(48000);
+const samplingRateOptions = [24000, 44100, 48000, 88200, 96000];
+const renderSamplingRateLabel = (rate: number) => `${rate} Hz`;
+
+// リミッター
+const withLimiter = ref<boolean>(true);
+
+// パン・ボリューム・ミュート
+const withTrackParameters = ref<boolean>(true);
+
+const handleExportTrack = () => {
+  onDialogOK();
+  emit("exportAudio", exportTarget.value, {
+    isStereo: isStereo.value,
+    sampleRate: samplingRate.value,
+    audioFormat: audioFormat.value,
+    withLimiter: withLimiter.value,
+    withTrackParameters: withTrackParameters.value,
+  });
+};
+
+// キャンセルボタンクリック時
+const handleCancel = () => {
+  onDialogCancel();
+  modelValue.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+.dialog-card {
+  width: 700px;
+  max-width: 80vw;
+}
+
+.scrollable-area {
+  overflow-y: auto;
+  max-height: calc(100vh - 100px - 295px);
+}
+</style>

src/components/Dialog/UpdateNotificationDialog/Container.vue

@@ -1,4 +1,4 @@
-<!-- 
+<!--
   アップデート通知ダイアログのコンテナ。
   スキップしたバージョンより新しいバージョンがあれば、ダイアログを表示する。
 -->

src/components/Sing/SingEditor.vue

@@ -12,9 +12,8 @@
           v-if="nowRendering"
           padding="xs md"
           label="音声の書き出しをキャンセル"
-          color="surface"
-          textColor="display"
           class="q-mt-sm"
+          outline
           @click="cancelExport"
         />
       </div>

src/components/Sing/menuBarData.ts

@@ -25,30 +25,19 @@ export const useMenuBarData = () => {
     });
   };
 
-  const exportWaveFile = async () => {
+  const exportAudioFile = async () => {
     if (uiLocked.value) return;
-    await store.dispatch("EXPORT_WAVE_FILE", {});
-  };
-
-  const exportStemWaveFile = async () => {
-    if (uiLocked.value) return;
-    await store.dispatch("EXPORT_STEM_WAVE_FILE", {});
+    await store.dispatch("SET_DIALOG_OPEN", {
+      isExportSongAudioDialogOpen: true,
+    });
   };
 
   const fileSubMenuData = computed<MenuItemData[]>(() => [
     {
       type: "button",
       label: "音声を出力",
       onClick: () => {
-        void exportWaveFile();
-      },
-      disableWhenUiLocked: true,
-    },
-    {
-      type: "button",
-      label: "トラックごとに音声を出力",
-      onClick: () => {
-        void exportStemWaveFile();
+        void exportAudioFile();
       },
       disableWhenUiLocked: true,
     },