サウンド再生

[nnnnusui]

やるリスト

• [ ] SoundCloud
• [ ] NicoVideo
• [ ] YouTube

無理リスト

Bilibili

iframe操作用のAPI(messageイベントの定義)が無いため操作不可

インターフェース

ゲームのソースとして扱うために下記のような形に統一するよメモ

• play()
• pause()
• time(value?: number): number
• volume(value?: number): number 0.0 〜 1.0

[nnnnusui]

SourceController的なのを定義して、これ越しに各種Sourceを操作する でいいんじゃないかなとなっている

[nnnnusui]

音源リソースのコントローラーは、複数の機能（画面）に渡って存在する必要がある。

• App.tsx直下的なところや、Contextとして存在する必要がある。
• 描画位置を再レンダリングなしに自由に変えられると理想的。でないと、Componentを横断した都合が発生して結構宜しくない。できるの……？

選曲（選譜面）画面

各譜面の音源をあらかじめロード（描画）し、プレビュー再生に対応する。 （一応この時、プレビュー再生に必要な音源のみのロードで良い とメモしておく） リソースは複数を管理する必要がある。

ゲーム画面

ゲーム内時間に対応した音源を再生する。 ゲームの状態遷移（再生, 停止, 時間ジャンプ, リセット, etc）に応じて音源を操作する必要がある。 親子関係どうすればいいんだろう。

1. ゲーム > 音源 > ゲーム内時間
   微妙。[音源の再生/停止]をトリガーにゲーム内時間の自動遷移が[再生/停止]するって、音源の責務ではなさそう。
2. ゲーム > ゲーム内時間 > 音源
   これはなし。音源の再生時間を毎フレームゲーム内時間と同期させたところで正常な再生はできない。
3. ゲーム > 音源 & ゲーム内時間 これかな。まずゲームが[再生/停止]的な状態や操作を持つ。これに ゲーム内時間自動遷移の再生停止や、音源の再生停止切替 が連動するのがよさそう。

譜面作成画面

基本的にゲーム画面と同じだけど、音源の描画位置は異なりそうな気もする。

[nnnnusui]

描画が前提なコンテンツとなると<SoundCloudWidget />を最近書いたんだけど、それと同じ感じに書くといいかも。

<>
  <ResourcePlayer useController={setResourcePlayer} />
  <Game />
</>

って感じに書いて操作できるI/Fを外部に出すとか。

[nnnnusui]

<ResourcePlayer />の再描画を行わずに兄弟要素を変更する為に、 「ResourcePlayerを背景に持つコンテナコンポーネント」を定義するのがよさげ？

<HasResourcePlayer>{ resourcePlayer =>
  <>
    {resourcePlayer}
    <Game />
  </>
}</HasResourcePlayer>