Refactor: audioPlayer.tsを新規作成しaudio.tsの一部機能を移転

src/components/AudioDetail.vue

@@ -491,7 +491,7 @@ const changeMoraData = (
 // audio play
 const play = async () => {
   try {
-    await store.dispatch("PLAY_AUDIO", {
+    await store.dispatch("FETCH_AND_PLAY_AUDIO", {
       audioKey: props.activeAudioKey,
     });
   } catch (e) {
@@ -513,16 +513,16 @@ const stop = () => {
   store.dispatch("STOP_AUDIO", { audioKey: props.activeAudioKey });
 };
 
-const nowPlaying = computed(
-  () => store.state.audioStates[props.activeAudioKey]?.nowPlaying
+const nowPlaying = computed(() =>
+  store.state.nowPlayingAudioKeys.includes(props.activeAudioKey)
 );
 const nowGenerating = computed(
   () => store.state.audioStates[props.activeAudioKey]?.nowGenerating
 );
 
 // continuously play
 const nowPlayingContinuously = computed(
-  () => store.state.nowPlayingContinuously
+  () => store.getters.NOW_PLAYING_CONTINUOUSLY
 );
 
 const audioDetail = ref<HTMLElement>();
@@ -584,7 +584,9 @@ watch(nowPlaying, async (newState) => {
     // 現在再生されているaudio elementの再生時刻を0.01秒毎に取得(監視)し、
     // それに合わせてフォーカスするアクセント句を変えていく
     focusInterval = setInterval(() => {
-      const currentTime = store.getters.ACTIVE_AUDIO_ELEM_CURRENT_TIME;
+      const currentTime = store.getters.AUDIO_CURRENT_TIME(
+        props.activeAudioKey
+      );
       for (let i = 1; i < accentPhraseOffsets.length; i++) {
         if (
           currentTime !== undefined &&

src/components/DictionaryManageDialog.vue

@@ -253,6 +253,7 @@ import { computed, ref, watch } from "vue";
 import { QInput } from "quasar";
 import AudioAccent from "./AudioAccent.vue";
 import { useStore } from "@/store";
+import { generateAudioKey } from "@/store/audio";
 import { AccentPhrase, UserDictWord } from "@/openapi";
 import {
   convertHiraToKana,
@@ -279,7 +280,9 @@ const dictionaryManageDialogOpenedComputed = computed({
 });
 const uiLocked = ref(false); // ダイアログ内でstore.getters.UI_LOCKEDは常にtrueなので独自に管理
 const nowGenerating = ref(false);
-const nowPlaying = ref(false);
+const nowPlaying = computed(() =>
+  store.state.nowPlayingAudioKeys.includes(audioKey)
+);
 
 const loadingDictState = ref<null | "loading" | "synchronizing">("loading");
 const userDict = ref<Record<string, UserDictWord>>({});
@@ -432,8 +435,7 @@ const changeAccent = async (_: number, accent: number) => {
   }
 };
 
-const audioElem = new Audio();
-audioElem.pause();
+const audioKey = generateAudioKey();
 
 const play = async () => {
   if (!accentPhrase.value) return;
@@ -470,12 +472,11 @@ const play = async () => {
     }
   }
   nowGenerating.value = false;
-  nowPlaying.value = true;
-  await store.dispatch("PLAY_AUDIO_BLOB", { audioElem, audioBlob: blob });
-  nowPlaying.value = false;
+  await store.dispatch("LOAD_AUDIO_PLAYER", { audioKey, blob });
+  await store.dispatch("PLAY_AUDIO", { audioKey });
 };
 const stop = () => {
-  audioElem.pause();
+  store.dispatch("STOP_AUDIO", { audioKey });
 };
 
 // accent phraseにあるaccentと実際に登録するアクセントには差が生まれる

src/components/HeaderBar.vue

@@ -51,7 +51,7 @@ const canUndo = computed(() => store.getters.CAN_UNDO);
 const canRedo = computed(() => store.getters.CAN_REDO);
 const activeAudioKey = computed(() => store.getters.ACTIVE_AUDIO_KEY);
 const nowPlayingContinuously = computed(
-  () => store.state.nowPlayingContinuously
+  () => store.getters.NOW_PLAYING_CONTINUOUSLY
 );
 
 const undoRedoHotkeyMap = new Map<HotkeyAction, () => HotkeyReturnType>([
@@ -104,7 +104,7 @@ const redo = () => {
 };
 const playContinuously = async () => {
   try {
-    await store.dispatch("PLAY_CONTINUOUSLY_AUDIO");
+    await store.dispatch("PLAY_AUDIO_CONTINUOUSLY_WITH_UI_LOCK", {});
   } catch (e) {
     let msg: string | undefined;
     // FIXME: GENERATE_AUDIO_FROM_AUDIO_ITEMのエラーを変えた場合変更する
@@ -120,7 +120,7 @@ const playContinuously = async () => {
   }
 };
 const stopContinuously = () => {
-  store.dispatch("STOP_CONTINUOUSLY_AUDIO");
+  store.dispatch("STOP_PLAYLIST");
 };
 const generateAndSaveOneAudio = async () => {
   if (activeAudioKey.value == undefined)