連続再生中にバックグラウンドで音声を合成する

[cm-ayf]

内容

連続再生中に，バックグラウンドで音声を合成します．これにより，合成速度が再生速度を上回る場合，連続再生は途切れなく再生されるようになります．

EventTargetを継承した管理クラスのインスタンスにより，「合成が完了したら，次の合成を発火して，さらに再生中の音声がなければ今できたものを再生する」といったような処理の集合として実装しています．かなり複雑になりましたが，うまく動いてくれるようになりました．

補遺

• 最初のロードや，短い文の後に長い文が来て事前に合成が終わっていない場合など，どうしても待ち時間は存在します．ここではローディングのダイアログが出ます．

• 停止ボタンは，再生中は押すことができます．しかし，バックグラウンドで合成しているものがあれば，それが合成し終わるまで操作できません．なお，合成が終わったら他に再生されることなく，操作が可能になります．

• フローを表す図を置いておきます．
  

  Mermaidのソース

  flowchart TD
    開始
    生成中/待機中
    生成中/再生中
    終了/再生中
    終了/終了
    次が生成済{次が生成済？}
    最後の生成{最後の生成？}
    最後の再生{最後の再生？}
  
    開始 --> 生成中/待機中
    
    生成中/待機中 -->|生成完了| 最後の生成
  
    生成中/再生中 -->|生成完了| 最後の生成
    生成中/再生中 -->|再生完了| 次が生成済
  
    終了/再生中 -->|再生完了| 最後の再生
  
    次が生成済 -->|true| 生成中/再生中
    次が生成済 -->|false| 生成中/待機中
  
    最後の生成 -->|true| 終了/再生中
    最後の生成 -->|false| 生成中/再生中
  
    最後の再生 -->|true| 終了/終了
    最後の再生 -->|false| 終了/再生中
  

関連 Issue

ref: #1773 （このPRの後にmergeする必要があります）
closes: #254

スクリーンショット・動画など

（録画方法の都合で，音と画が若干ずれています）

video1038941970.mp4

その他

[cm-ayf]

コンフリクトなかったのでforce-pushしました

[cm-ayf]

#1773 がmergeされたのでrebaseしました．

[Hiroshiba]

generate系とplay系を分けて直列じゃなくしつつ、eventドリブンにする感じですよね！！
なるほどです！！

audioContinuousPlayer.tsの設計について提案（相談？）が！！

現状のコードだと、Player側がどの状態からどの状態への遷移を担っていて、どの変更を外部に依存するのかちょっと見えづらいかもと思いました。
（おそらくgenerateStart→EndとplayStart→Endの遷移がPlayer外の処理依存）

いっそFETCH_AUDIOとPLAY_AUDIO_BLOBをDI可能にし、全状態遷移をPlayer内で可能にするとかどうでしょう？
こうすればaudio.ts側はただlistenして表示変えれば良いだけにできそうだな～と。
（DIする関数の型はそのままだとちょっと密結合になりそうな気もしますが･･･。）

その場合もはやPlayerじゃないのですが、まあ･･･！

[cm-ayf]

こんな感じでしょうか．commitとdispatchのうち必要なものだけがあればいいように型を決めてあります（これが正しいのかはよくわからないのですが……）

[Hiroshiba]

@cm-ayf
あ！　音声の取得と再生に関わる部分だけのDIをイメージしてました！
なのでFETCH_AUDIOとPLAY_AUDIO_BLOBだけDIする感じとか･･･！

切り出しがきれいなので、密結合の回避もできるのではと期待している感じです！

[cm-ayf]

そのようにしました．
// EventTarget（やnode:events）は同じイベントを複数の関数で聴けるので，そこの分離をしやすいなぁと思っています．

[Hiroshiba]

LGTM！！！

とてもきれいなクラス切り出しだったと思います、ありがとうございます！！！
もしよかったら別タスクにも挑戦してみて頂ければ嬉しいです！！！

まだまだ少ないのですが、リファクタリング関連のタスクをこちらにまとめてみています。

• good first issue：リファクタリングできそうな箇所集 #1854

Vueに触れてみる感じだとSettingDialog.vueでコピペされてる部分をv-forにするとか。
（もしwebフレームワークに触れたことない感じでしたら、VueやReactはだいぶ面白いと思います！！）

Vue関係ないところだと、かなり大変だと思うけどこちらとか･･･！

• ソング：audioRendering.tsのリファクタリング #1811

もしよかったらぜひ！！ 🙇

[Hiroshiba]

こういう形にもできるかな？と少し変えさせていただいたので、pushさせて頂いてマージしたいと思います 🙇
変更点は主に２つです！

• audioContinuousPlayer.tsから他のstoreへの依存をなくす
• 必要な関数２つをDIする形へ

[Hiroshiba]

問題なさそうだったらマージします！

[cm-ayf]

ありがとうございます，これで大丈夫です！
色々提案くださってありがとうございました．

[Hiroshiba]

こちらこそありがとうございました！！　もしよかったらまたぜひ！！！