Refactor: audioElementsをRecordから単体にする

[thiramisu]

内容

store/audio.tsの

const audioElements: Record<AudioKey, HTMLAudioElement> = {};

を

const audioElement = new Audio();

とします。
以前の実装は複数の同時再生をしたい場合は便利ですが、少なくとも現在は使われておらず、また将来的にも使われる可能性が低そうなため、変更しても大丈夫そうです。
ユーザー視点での変更はありません。
（かなり厳密に言うと、辞書登録で長い文章を読ませている最中に［キャンセル］>［閉じるボタン］後に詳細調整欄の再生ボタンを押すと辞書の読みが停止されるようになりますが、実質影響なしだと思います）

---

関連 Issue

• ref store/audio.ts周りのリファクタリング #1475
  上記の一環です。
• ref #Refactor: audioPlayer.tsを新規作成しaudio.tsの一部機能を移転 #1492
  上記で話題に出ました。(具体的な該当コメントは「その他」を参照)

その他

該当コメント

（前略）将来をひとまず考えないなら、現状同時に複数再生する必要はないはずなので、

const audioElements: Record<AudioKey, HTMLAudioElement> = {};

を

const audioElement = new Audio();

としてしまうことで何か所か単純化できる気がしました。再生中の音声が高々一つになるので、そこら辺の実装を省けそうかなと。結構レビューしていただいた範囲も変更が必要そうなので、そこはアレなんですが…。
今のところは音声を複数再生できた方が良いissueは無いはず…？

Originally posted by @thiramisu in #1492 (comment)

---

現状同時に複数再生する必要はない

こちらに関しても賛成です。
仮に同時再生する機能があっても聞き比べ程度しか需要がなさそうで、もしその機能を実装する場合も任意の個数でなく2つあれば良さそうですし。
あとはCeVIOみたいにタイムライン編集できると嬉しいかもですが、これも別の実装になりそうなので、１つだけにするので良いのかなと思いました！
Originally posted by @Hiroshiba in #1492 (comment)

[thiramisu]

アプリとしての動作は問題なさそうなんですが、ユニットテストが落ちるようになってしまったみたいなので、EditorHome.vueのonMountで初期化する方針で行こうと思います。

[Hiroshiba]

LGTM！！

現状の使用感が変化することなく単純化できていて、今後のコーディングのしやすさが向上しそうなのでこの方針で良さそうに感じました。

PLAY_AUDIO_BLOBがglobalのaudioElementを利用するというコードの変更も入っていそうでした。
影響を受けるのは辞書周りだけで、まあそこまで不自然でない共通化ができるのでこの形で良さそう。
（辞書機能を作ってくださった @y-chan さんにも共有です！）

１つだけちょっとした提案を書いてみました。
そのままでもそこまで問題ではないと思うので、変更しない方が良さそうであればコメントいただければと思います。

[thiramisu]

レビューありがとうございます！
指摘いただいた箇所はlazyにしてみました。テストは落ちないままかつ音声は再生されたので大丈夫そうです。

PLAY_AUDIO_BLOBがglobalのaudioElementを利用するというコードの変更も入っていそうでした。

確かにです！今まで全然意識してこなかったのもあり、まだ分割が甘いですね、すいません…

[Hiroshiba]

PLAY_AUDIO_BLOBがglobalのaudioElementを利用するというコードの変更も入っていそうでした。

確かにです！今まで全然意識してこなかったのもあり、まだ分割が甘いですね、すいません…

これくらいであれば言及さえあれば特に問題ないのかなと！

---

問題ないと思うのでマージします！実装ありがとうございました！！