ブラウザでのリロード等でページ表示後最初の音声再生が音割れすることがある

[meronmks]

💡 Summary

#12433 にて同時再生された際の音割れへの対策が入ってますが、この対策がなされた状態のクライアントを利用していても爆音になったり、音割れするぐらいの大きさの音となってしまうことがある。

ちょっと怪しいなと思ってるのは25ms待ってますが、リソース読み込みが25ms以内に終わらなかった場合ここで待ってしまって結果同時に鳴ってしまっているのではないかと疑ってます。

misskey/packages/frontend/src/scripts/sound.ts

Line 177 in 5cd4c36

const buffer = await loadAudio(soundStore);

🥰 Expected Behavior

音割れせずに通知音が鳴る

🤬 Actual Behavior

音割れした通知音が鳴る

📝 Steps to Reproduce

1. GTLなどの更新頻度がそこそこ高いTLをメインにする
2. ページをリロードする
3. 数回ほど音が鳴らずにノートが流れる
4. 音声リソースの読み込み終了タイミング？かなにかのタイミングで爆音で通知音が鳴る

💻 Frontend Environment

* Model and OS of the device(s):
* Browser:
* Server URL:
* Misskey:

🛰 Backend Environment (for server admin)

* Installation Method or Hosting Service:
* Misskey:
* Node:
* PostgreSQL:
* Redis:
* OS and Architecture:

[kakkokari-gtyih]

ロードが終わらない限りPromiseは返らないはず・・・？

misskey/packages/frontend/src/scripts/sound.ts

Lines 164 to 169 in 5cd4c36

	playFile(sound).finally(() => {
	// ごく短時間に音が重複しないように
	setTimeout(() => {
	canPlay = true;
	}, 25);
	});

[kakkokari-gtyih]

25msが短すぎた疑惑はある

[meronmks]

25msが短すぎた疑惑はある

確かに、事象からロードまで流れて、ほかのサウンド再生要求があった際既にcanPlay == trueなのかなと思いましたけどPromiseが完了（又はエラー）になるまでfinally()が呼ばれないのであれば単純に短すぎて効果が無かった説もありそうですね。

[meronmks]

このIssue書いてからも何度か発生していますがリロード時だけでなくバックグラウンドに追いやってしばらくしてから再度フォアグラウンドに戻したら爆音になったり、ボーっとTLを眺めているときにも極まれに爆音となったりと音が重なってはなさそうな状態でも発生したりするので絞り込めるどころか謎が深まってきてしまった・・・

[Sayamame-beans]

新たに報告が入りました

Android Firefoxでリアクションで音割れが発生しているようです
Misskeyを読み込んだあととリフレッシュしたあと初めてリアクションするときに必ず発生します
スマホのメディア音量を０にしても発生します
https://misskey.niri.la/notes/9o9gqpek6j

Samsung S21 SCG09
Android 13 OneUI 5.1
Firefox 121.0.1
https://misskey.niri.la/notes/9o9gtt91gt

なお、サーバーは
Server URL: https://misskey.niri.la
Misskey: 2023.12.2-kinel.1 (2023.12.2と殆ど同じ)
です。

[kakkokari-gtyih]

Server URL: https://misskey.niri.la/

バブルゲーム入っていますか？（あの前後でサウンド再生周りに改修が入っているのでそれが原因の可能性がある）

[Sayamame-beans]

Server URL: https://misskey.niri.la/

バブルゲーム入っていますか？（あの前後でサウンド再生周りに改修が入っているのでそれが原因の可能性がある）

バブルゲームは入っていません。

[kakkokari-gtyih]

@meronmks さんの事象がFirefoxで起こったものであるならば、ブラウザ側のバグの可能性がある（上述の通り25msが短すぎた疑惑は依然としてあるけど）

[meronmks]

Firefoxで起こったものであるならば、ブラウザ側のバグの可能性がある

自環境は以下なのでブラウザで起因はなさそうかもです。

Windows 11
Google Chrome 120.0.6099.200（Official Build） （64 ビット）

[u1-liquid]

現時点でサウンド周りはほぼ最新developであるioでも発生していますね
GTLで再読み込みすると最初のノートの通知音が爆音になることを確認しました
Google Chrome　バージョン: 122.0.6226.2（Official Build）dev （64 ビット）
Firefox Developer Edition バージョン: 122.0b7 (64 ビット)
両方で発生しています

[zyoshoka]

画面をリロードした後何も操作（クリックなど）をせず放置すると、タイムラインが流れていても一切音が鳴らず、そして何件かノートが流れた後クリックするとこの問題が再現しました。

恐らく AudioContext が sticky activation を必要としているのが原因で、このアクティベーションがあるまでの間に流れたノートの発生させる音が溜まっていき、アクティベーションが起きた瞬間に放出される？のが音割れを生むのではと推測します。