複数選択：キャラクターを変更できるように

src/components/AudioCell.vue

@@ -150,8 +150,8 @@ const userOrderedCharacterInfos = computed(() => {
     throw new Error("USER_ORDERED_CHARACTER_INFOS == undefined");
   return infos;
 });
-const isInitializingSpeaker = computed(
-  () => store.state.audioKeyInitializingSpeaker === props.audioKey
+const isInitializingSpeaker = computed(() =>
+  store.state.audioKeysInitializingSpeaker.includes(props.audioKey)
 );
 const audioItem = computed(() => store.state.audioItems[props.audioKey]);
 
@@ -262,8 +262,10 @@ const selectedVoice = computed<Voice | undefined>({
   },
   set(voice: Voice | undefined) {
     if (voice == undefined) return;
-    store.dispatch("COMMAND_CHANGE_VOICE", {
-      audioKey: props.audioKey,
+    store.dispatch("COMMAND_CHANGE_VOICES", {
+      audioKeys: isMultiSelectEnabled.value
+        ? store.getters.SELECTED_AUDIO_KEYS
+        : [props.audioKey],
       voice,
     });
   },

src/components/CharacterPortrait.vue

@@ -82,7 +82,10 @@ const portraitPath = computed(
 
 const isInitializingSpeaker = computed(() => {
   const activeAudioKey = store.getters.ACTIVE_AUDIO_KEY;
-  return store.state.audioKeyInitializingSpeaker === activeAudioKey;
+  return (
+    activeAudioKey &&
+    store.state.audioKeysInitializingSpeaker.includes(activeAudioKey)
+  );
 });
 
 const isMultipleEngine = computed(() => store.state.engineIds.length > 1);

src/store/audio.ts

@@ -257,6 +257,7 @@ const getAudioElement = (() => {
 
 export const audioStoreState: AudioStoreState = {
   characterInfos: {},
+  audioKeysInitializingSpeaker: [],
   morphableTargetsInfo: {},
   audioItems: {},
   audioKeys: [],
@@ -507,30 +508,30 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     /**
      * AudioItemに設定される話者（スタイルID）に対してエンジン側の初期化を行い、即座に音声合成ができるようにする。
      */
-    async action({ commit, dispatch }, { engineId, audioKey, styleId }) {
+    async action({ commit, dispatch }, { engineId, audioKeys, styleId }) {
       const isInitialized = await dispatch("IS_INITIALIZED_ENGINE_SPEAKER", {
         engineId,
         styleId,
       });
       if (isInitialized) return;
 
-      commit("SET_AUDIO_KEY_INITIALIZING_SPEAKER", {
-        audioKey,
+      commit("SET_AUDIO_KEYS_INITIALIZING_SPEAKER", {
+        audioKeys,
       });
       await dispatch("INITIALIZE_ENGINE_SPEAKER", {
         engineId,
         styleId,
       }).finally(() => {
-        commit("SET_AUDIO_KEY_INITIALIZING_SPEAKER", {
-          audioKey: undefined,
+        commit("SET_AUDIO_KEYS_INITIALIZING_SPEAKER", {
+          audioKeys: [],
         });
       });
     },
   },
 
-  SET_AUDIO_KEY_INITIALIZING_SPEAKER: {
-    mutation(state, { audioKey }: { audioKey?: AudioKey }) {
-      state.audioKeyInitializingSpeaker = audioKey;
+  SET_AUDIO_KEYS_INITIALIZING_SPEAKER: {
+    mutation(state, { audioKeys }: { audioKeys: AudioKey[] }) {
+      state.audioKeysInitializingSpeaker = audioKeys;
     },
   },
 
@@ -963,9 +964,14 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     },
   },
 
-  SET_AUDIO_VOICE: {
-    mutation(state, { audioKey, voice }: { audioKey: AudioKey; voice: Voice }) {
-      state.audioItems[audioKey].voice = voice;
+  SET_AUDIOS_VOICE: {
+    mutation(
+      state,
+      { audioKeys, voice }: { audioKeys: AudioKey[]; voice: Voice }
+    ) {
+      for (const audioKey of audioKeys) {
+        state.audioItems[audioKey].voice = voice;
+      }
     },
   },
 
@@ -2076,10 +2082,10 @@ export const audioCommandStore = transformCommandStore(
       },
     },
 
-    COMMAND_CHANGE_VOICE: {
+    COMMAND_CHANGE_VOICES: {
       mutation(
         draft,
-        payload: { audioKey: AudioKey; voice: Voice } & (
+        payload: { audioKeys: AudioKey[]; voice: Voice } & (
           | { update: "RollbackStyleId" }
           | {
               update: "AccentPhrases";
@@ -2091,94 +2097,99 @@ export const audioCommandStore = transformCommandStore(
             }
         )
       ) {
-        audioStore.mutations.SET_AUDIO_VOICE(draft, {
-          audioKey: payload.audioKey,
+        audioStore.mutations.SET_AUDIOS_VOICE(draft, {
+          audioKeys: payload.audioKeys,
           voice: payload.voice,
         });
 
         if (payload.update === "RollbackStyleId") return;
 
-        const presetKey = draft.audioItems[payload.audioKey].presetKey;
-
-        const { nextPresetKey, shouldApplyPreset } = determineNextPresetKey(
-          draft,
-          payload.voice,
-          presetKey,
-          "changeVoice"
-        );
-
-        audioStore.mutations.SET_AUDIO_PRESET_KEY(draft, {
-          audioKey: payload.audioKey,
-          presetKey: nextPresetKey,
-        });
+        for (const audioKey of payload.audioKeys) {
+          const presetKey = draft.audioItems[audioKey].presetKey;
 
-        if (payload.update == "AccentPhrases") {
-          audioStore.mutations.SET_ACCENT_PHRASES(draft, {
-            audioKey: payload.audioKey,
-            accentPhrases: payload.accentPhrases,
-          });
-        } else if (payload.update == "AudioQuery") {
-          audioStore.mutations.SET_AUDIO_QUERY(draft, {
-            audioKey: payload.audioKey,
-            audioQuery: payload.query,
-          });
-        }
+          const { nextPresetKey, shouldApplyPreset } = determineNextPresetKey(
+            draft,
+            payload.voice,
+            presetKey,
+            "changeVoice"
+          );
 
-        if (shouldApplyPreset) {
-          audioStore.mutations.APPLY_AUDIO_PRESET(draft, {
-            audioKey: payload.audioKey,
+          audioStore.mutations.SET_AUDIO_PRESET_KEY(draft, {
+            audioKey,
+            presetKey: nextPresetKey,
           });
-        }
-      },
-      async action(
-        { state, dispatch, commit },
-        { audioKey, voice }: { audioKey: AudioKey; voice: Voice }
-      ) {
-        const query = state.audioItems[audioKey].query;
-        const engineId = voice.engineId;
-        const styleId = voice.styleId;
-        try {
-          await dispatch("SETUP_SPEAKER", { audioKey, engineId, styleId });
 
-          if (query !== undefined) {
-            const accentPhrases = query.accentPhrases;
-            const newAccentPhrases: AccentPhrase[] = await dispatch(
-              "FETCH_MORA_DATA",
-              {
-                accentPhrases,
-                engineId,
-                styleId,
-              }
-            );
-            commit("COMMAND_CHANGE_VOICE", {
+          if (payload.update == "AccentPhrases") {
+            audioStore.mutations.SET_ACCENT_PHRASES(draft, {
               audioKey,
-              voice,
-              update: "AccentPhrases",
-              accentPhrases: newAccentPhrases,
+              accentPhrases: payload.accentPhrases,
             });
-          } else {
-            const text = state.audioItems[audioKey].text;
-            const query: AudioQuery = await dispatch("FETCH_AUDIO_QUERY", {
-              text: text,
-              engineId,
-              styleId,
+          } else if (payload.update == "AudioQuery") {
+            audioStore.mutations.SET_AUDIO_QUERY(draft, {
+              audioKey,
+              audioQuery: payload.query,
             });
-            commit("COMMAND_CHANGE_VOICE", {
+          }
+
+          if (shouldApplyPreset) {
+            audioStore.mutations.APPLY_AUDIO_PRESET(draft, {
               audioKey,
-              voice,
-              update: "AudioQuery",
-              query,
             });
           }
-        } catch (error) {
-          commit("COMMAND_CHANGE_VOICE", {
-            audioKey,
-            voice,
-            update: "RollbackStyleId",
-          });
-          throw error;
         }
       },
+      async action(
+        { dispatch, commit, state },
+        { audioKeys, voice }: { audioKeys: AudioKey[]; voice: Voice }
+      ) {
+        const engineId = voice.engineId;
+        const styleId = voice.styleId;
+        await dispatch("SETUP_SPEAKER", { audioKeys, engineId, styleId });
+        await Promise.all(
+          audioKeys.map(async (audioKey) => {
+            try {
+              const query = state.audioItems[audioKey].query;
+              if (query !== undefined) {
+                const accentPhrases = query.accentPhrases;
+                const newAccentPhrases: AccentPhrase[] = await dispatch(
+                  "FETCH_MORA_DATA",
+                  {
+                    accentPhrases,
+                    engineId,
+                    styleId,
+                  }
+                );
+                commit("COMMAND_CHANGE_VOICES", {
+                  audioKeys,
+                  voice,
+                  update: "AccentPhrases",
+                  accentPhrases: newAccentPhrases,
+                });
+              } else {
+                const text = state.audioItems[audioKey].text;
+                const query: AudioQuery = await dispatch("FETCH_AUDIO_QUERY", {
+                  text: text,
+                  engineId,
+                  styleId,
+                });
+                commit("COMMAND_CHANGE_VOICES", {
+                  audioKeys,
+                  voice,
+                  update: "AudioQuery",
+                  query,
+                });
+              }
+            } catch (error) {
+              commit("COMMAND_CHANGE_VOICES", {
+                audioKeys,
+                voice,
+                update: "RollbackStyleId",
+              });
+              throw error;
+            }
+          })
+        );
+      },
     },
 
     COMMAND_CHANGE_ACCENT: {

src/store/type.ts

@@ -124,7 +124,7 @@ export type StoreType<T, U extends "getter" | "mutation" | "action"> = {
 export type AudioStoreState = {
   characterInfos: Record<EngineId, CharacterInfo[]>;
   morphableTargetsInfo: Record<EngineId, MorphableTargetInfoTable>;
-  audioKeyInitializingSpeaker?: string;
+  audioKeysInitializingSpeaker: AudioKey[];
   audioItems: Record<AudioKey, AudioItem>;
   audioKeys: AudioKey[];
   audioStates: Record<AudioKey, AudioState>;
@@ -186,14 +186,14 @@ export type AudioStoreTypes = {
 
   SETUP_SPEAKER: {
     action(payload: {
-      audioKey: AudioKey;
+      audioKeys: AudioKey[];
       engineId: EngineId;
       styleId: StyleId;
     }): void;
   };
 
-  SET_AUDIO_KEY_INITIALIZING_SPEAKER: {
-    mutation: { audioKey?: AudioKey };
+  SET_AUDIO_KEYS_INITIALIZING_SPEAKER: {
+    mutation: { audioKeys: AudioKey[] };
   };
 
   SET_ACTIVE_AUDIO_KEY: {
@@ -345,8 +345,8 @@ export type AudioStoreTypes = {
     }): Promise<AudioQuery>;
   };
 
-  SET_AUDIO_VOICE: {
-    mutation: { audioKey: AudioKey; voice: Voice };
+  SET_AUDIOS_VOICE: {
+    mutation: { audioKeys: AudioKey[]; voice: Voice };
   };
 
   SET_ACCENT_PHRASES: {
@@ -525,8 +525,8 @@ export type AudioCommandStoreTypes = {
     action(payload: { audioKey: AudioKey; text: string }): void;
   };
 
-  COMMAND_CHANGE_VOICE: {
-    mutation: { audioKey: AudioKey; voice: Voice } & (
+  COMMAND_CHANGE_VOICES: {
+    mutation: { audioKeys: AudioKey[]; voice: Voice } & (
       | { update: "RollbackStyleId" }
       | {
           update: "AccentPhrases";
@@ -537,7 +537,7 @@ export type AudioCommandStoreTypes = {
           query: AudioQuery;
         }
     );
-    action(payload: { audioKey: AudioKey; voice: Voice }): void;
+    action(payload: { audioKeys: AudioKey[]; voice: Voice }): void;
   };
 
   COMMAND_CHANGE_ACCENT: {

tests/e2e/browser/複数選択/common.ts

@@ -0,0 +1,10 @@
+import { Page } from "@playwright/test";
+
+export async function addAudioCells(page: Page, count: number) {
+  for (let i = 0; i < count; i++) {
+    await page.getByRole("button", { name: "テキストを追加" }).click();
+    await page.waitForTimeout(100);
+  }
+}
+
+export const ctrlLike = process.platform === "darwin" ? "Meta" : "Control";