Add: キャッシュを削除して再生成するボタンを追加し、読み・アクセントをリセットするボタンを AudioCell のコンテキストメニューから再生ボタン上に移動

これでかなりわかりやすくなったはず…！デザイン的にもかなりしっくりきてる

Author: tsukumijima

src/components/Talk/AudioCell.vue

@@ -552,7 +552,6 @@ const contextMenudata = ref<
     MenuItemSeparator,
     MenuItemButton,
     MenuItemButton,
-    MenuItemButton,
   ]
 >([
   // NOTE: audioTextBuffer.value の変更が nativeEl.value に反映されるのはnextTick。
@@ -622,17 +621,6 @@ const contextMenudata = ref<
     },
     disableWhenUiLocked: true,
   },
-  {
-    type: "button",
-    label: "読み/アクセントをリセット",
-    onClick: async () => {
-      contextMenu.value?.hide();
-      void store.actions.COMMAND_RESET_READING_AND_ACCENT({
-        audioKey: props.audioKey,
-      });
-    },
-    disableWhenUiLocked: true,
-  },
   // { type: "separator" },
   // {
   //   type: "button",

src/components/Talk/AudioDetail.vue

@@ -22,6 +22,34 @@
           </QTabs>
         </div>
         <div class="play-button-wrapper">
+          <div class="sub-button-row">
+            <QBtn
+              round
+              flat
+              size="sm"
+              color="primary"
+              icon="sym_r_casino"
+              :disable="nowGenerating || uiLocked"
+              @click="playWithClearCache"
+            >
+              <QTooltip anchor="top middle" :offset="[0, 30]" :delay="150">
+                音声合成結果を再生成して再生します（結果がわずかに変わることがあります）
+              </QTooltip>
+            </QBtn>
+            <QBtn
+              round
+              flat
+              size="sm"
+              color="primary"
+              icon="sym_r_restart_alt"
+              :disable="nowGenerating || uiLocked"
+              @click="resetReadingAndAccent"
+            >
+              <QTooltip anchor="top middle" :offset="[0, 30]" :delay="150">
+                単語の読みとアクセントをデフォルトに戻します
+              </QTooltip>
+            </QBtn>
+          </div>
           <QBtn
             v-if="!nowPlaying && !nowGenerating"
             fab
@@ -244,7 +272,7 @@ watch(accentPhrases, async () => {
   scrollToActivePoint();
 });
 
-// audio play
+// 音声の再生
 const play = async () => {
   try {
     await store.actions.PLAY_AUDIO({
@@ -269,6 +297,46 @@ const play = async () => {
   }
 };
 
+// 音声の再生成と再生
+const playWithClearCache = async () => {
+  try {
+    await store.actions.PLAY_AUDIO_WITH_CLEAR_CACHE({
+      audioKey: props.activeAudioKey,
+    });
+  } catch (e) {
+    const msg = handlePossiblyNotMorphableError(e);
+    // AivisSpeech Engine から音声合成エラーが返された
+    if (e instanceof Error && e.message === "Response returned an error code") {
+      void store.actions.SHOW_ALERT_DIALOG({
+        title: "音声合成に失敗しました",
+        message:
+          msg ??
+          "現在のテキストや読み方では音声合成できない可能性があります。\nテキストや読み方を変更して再度お試しください。",
+      });
+    } else {
+      void store.actions.SHOW_ALERT_DIALOG({
+        title: "再生に失敗しました",
+        message: msg ?? "音声合成エンジンの再起動をお試しください。",
+      });
+    }
+  }
+};
+
+// 読み上げとアクセントをリセット
+const resetReadingAndAccent = async () => {
+  try {
+    await store.actions.COMMAND_RESET_READING_AND_ACCENT({
+      audioKey: props.activeAudioKey,
+    });
+  } catch (e) {
+    window.backend.logError(e);
+    void store.actions.SHOW_ALERT_DIALOG({
+      title: "読み・アクセントのリセットに失敗しました",
+      message: "想定外のエラーが発生しました。",
+    });
+  }
+};
+
 const stop = () => {
   void store.actions.STOP_AUDIO();
 };
@@ -411,12 +479,18 @@ const isAltKeyDown = useAltKey();
     .play-button-wrapper {
       align-self: center;
       display: flex;
-      align-items: flex-end;
+      align-items: center;
       flex-wrap: nowrap;
-      flex-direction: row-reverse;
-      justify-content: space-between;
-      margin: 10px;
-      gap: 0 5px;
+      flex-direction: column;
+      justify-content: center;
+      padding-bottom: 8px;
+      gap: 2px;
+
+      .sub-button-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+      }
     }
   }
 

src/store/audio.ts

@@ -30,6 +30,8 @@ import { determineNextPresetKey } from "./preset";
 import {
   fetchAudioFromAudioItem,
   generateLabFromAudioQuery,
+  generateUniqueIdAndQuery,
+  clearAudioBlobCache,
   handlePossiblyNotMorphableError,
   isMorphable,
 } from "./audioGenerate";
@@ -1788,7 +1790,7 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
       async ({ mutations, actions }, { audioKey }: { audioKey: AudioKey }) => {
         await actions.STOP_AUDIO();
 
-        // 音声用意
+        // 音声の用意
         let fetchAudioResult: FetchAudioResult;
         mutations.SET_AUDIO_NOW_GENERATING({
           audioKey,
@@ -1815,6 +1817,28 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     ),
   },
 
+  PLAY_AUDIO_WITH_CLEAR_CACHE: {
+    action: createUILockAction(
+      async ({ actions, state }, { audioKey }: { audioKey: AudioKey }) => {
+
+        // audioKey に対応する AudioItem を取得
+        const audioItem = state.audioItems[audioKey];
+        if (!audioItem) {
+          throw new Error(`AudioItem not found for key: ${audioKey}`);
+        }
+
+        // AudioItem に対応するキャッシュ ID を取得し、キャッシュをクリア
+        // キャッシュが存在しない場合は何も行われない
+        const [cacheId] = await generateUniqueIdAndQuery(state, audioItem);
+        clearAudioBlobCache(cacheId);
+
+        // 音声の用意 (キャッシュがクリアされているので必ず再生成される)
+        // 以降の処理は PLAY_AUDIO と同じ
+        return actions.PLAY_AUDIO({ audioKey });
+      },
+    ),
+  },
+
   PLAY_AUDIO_BLOB: {
     action: createUILockAction(
       async (

src/store/audioGenerate.ts

@@ -285,30 +285,50 @@ export async function generateLabFromAudioQuery(
   return labString;
 }
 
-async function generateUniqueIdAndQuery(
+/**
+ * AudioItem からキャッシュ ID と AudioQuery を生成する。
+ * @param state 設定ストアの状態
+ * @param audioItem 対象の AudioItem
+ * @returns [キャッシュID, AudioQuery | undefined]
+ */
+export async function generateUniqueIdAndQuery(
   state: SettingStoreState,
   audioItem: AudioItem,
 ): Promise<[string, EditorAudioQuery | undefined]> {
-  audioItem = JSON.parse(JSON.stringify(audioItem)) as AudioItem;
-  const audioQuery = audioItem.query;
+  // 影響を与えないようにディープコピー
+  const copiedAudioItem = JSON.parse(JSON.stringify(audioItem)) as AudioItem;
+  const audioQuery = copiedAudioItem.query;
   if (audioQuery != undefined) {
     audioQuery.outputSamplingRate =
-      state.engineSettings[audioItem.voice.engineId].outputSamplingRate;
+      state.engineSettings[copiedAudioItem.voice.engineId].outputSamplingRate;
     audioQuery.outputStereo = state.savingSetting.outputStereo;
     // AivisSpeech では音声合成時に AudioQuery.kana に読み上げテキストを指定する必要がある
-    audioQuery.kana = audioItem.text;
+    audioQuery.kana = copiedAudioItem.text;
   }
 
   const id = await generateTempUniqueId([
-    audioItem.text,
+    copiedAudioItem.text,
     audioQuery,
-    audioItem.voice,
-    audioItem.morphingInfo,
+    copiedAudioItem.voice,
+    copiedAudioItem.morphingInfo,
     state.experimentalSetting.enableInterrogativeUpspeak, // このフラグが違うと、同じAudioQueryで違う音声が生成されるので追加
   ]);
   return [id, audioQuery];
 }
 
+/**
+ * 指定されたキャッシュ ID に対応するキャッシュを削除する。
+ * @param id 削除するキャッシュのID
+ */
+export function clearAudioBlobCache(id: string): void {
+  if (Object.prototype.hasOwnProperty.call(audioBlobCache, id)) {
+    delete audioBlobCache[id];
+    log.info(`Cache cleared for id: ${id}`);
+  } else {
+    log.info(`Cache not found for id: ${id}, no need to clear.`);
+  }
+}
+
 export function isMorphable(
   state: AudioStoreState,
   {

src/store/type.ts

@@ -469,6 +469,10 @@ export type AudioStoreTypes = {
     action(payload: { audioKey: AudioKey }): boolean;
   };
 
+  PLAY_AUDIO_WITH_CLEAR_CACHE: {
+    action(payload: { audioKey: AudioKey }): boolean;
+  };
+
   PLAY_AUDIO_BLOB: {
     action(payload: { audioBlob: Blob; audioKey?: AudioKey }): boolean;
   };