[iOS/Android] Music Playback Issue After Resuming Inactive Pyxel Web Page

[shiromofufactory]

On the web version of Pyxel on iOS (and possibly on Android as well), when music is playing and the user switches to another app or leaves the page inactive for a while, the music may not resume playback when returning to the Pyxel page.

The conditions for reproducing this issue are not entirely clear. Sometimes the music resumes correctly, especially if the user returns to the page shortly after leaving it.

It seems challenging to address this issue solely on the application side. Would it be possible to investigate and address this behavior within the Pyxel engine itself?

[kitao]

Regarding the sound playback on Web, Pyxel just uses SDL2 embedded in Emscripten and there's no difference from other platforms from the viewpoint of code for sound-related feature. So it would be the issue about SDL2 on Web.

[shiromofufactory]

Thank you for your response. I understand that the issue is caused by the behavior of Web SDL2.

As a non-expert suggestion, I wonder if it might be possible to forcibly resume audio playback by calling the SDL_PauseAudioDevice() method, which is also used in audio.rs, when the page becomes active again (e.g., triggered by the JavaScript 'visibilitychange' event).

Would such an approach be feasible?

[kitao]

If we can identify the related window events, it might be possible to control audio playback as well.

SDL -> Pyxel low level event

pyxel/rust/pyxel-platform/src/event.rs

Lines 33 to 94 in de4385f

	while unsafe { SDL_PollEvent(addr_of_mut!(sdl_event)) } != 0 {
	match unsafe { sdl_event.type_ as SDL_EventType } {
	// Window
	SDL_WINDOWEVENT => {
	pyxel_events.extend(handle_window_event(sdl_event));
	}
	SDL_DROPFILE => {
	pyxel_events.extend(handle_drop_file(sdl_event));
	}
	SDL_QUIT => {
	pyxel_events.extend(handle_quit());
	}
	// Keyboard
	SDL_KEYDOWN => {
	pyxel_events.extend(handle_key_down(sdl_event));
	}
	SDL_KEYUP => {
	pyxel_events.extend(handle_key_up(sdl_event));
	}
	SDL_TEXTINPUT => {
	pyxel_events.extend(handle_text_input(sdl_event));
	}
	// Mouse
	SDL_MOUSEBUTTONDOWN => {
	pyxel_events.extend(handle_mouse_button_down(sdl_event));
	}
	SDL_MOUSEBUTTONUP => {
	pyxel_events.extend(handle_mouse_button_up(sdl_event));
	}
	SDL_MOUSEWHEEL => {
	pyxel_events.extend(handle_mouse_wheel(sdl_event));
	}
	// Gamepad
	SDL_CONTROLLERDEVICEADDED => {
	handle_controller_device_added(sdl_event);
	}
	SDL_CONTROLLERDEVICEREMOVED => {
	handle_controller_device_removed(sdl_event);
	}
	SDL_CONTROLLERAXISMOTION => {
	pyxel_events.extend(handle_controller_axis_motion(sdl_event));
	}
	SDL_CONTROLLERBUTTONDOWN => {
	pyxel_events.extend(handle_controller_button_down(sdl_event));
	}
	SDL_CONTROLLERBUTTONUP => {
	pyxel_events.extend(handle_controller_button_up(sdl_event));
	}
	#[cfg(target_os = "emscripten")]
	SDL_JOYBUTTONDOWN => {
	pyxel_events.extend(handle_joy_button_down(sdl_event));
	}
	#[cfg(target_os = "emscripten")]
	SDL_JOYBUTTONUP => {
	pyxel_events.extend(handle_joy_button_up(sdl_event));
	}
	_ => {}
	}
	}

https://github.com/kitao/pyxel/blob/main/rust/pyxel-platform/src/window.rs#L170-L182

Pyxel low level event -> system control

pyxel/rust/pyxel-engine/src/system.rs

Lines 181 to 208 in de4385f

	match event {
	Event::WindowShown => {
	self.system.paused = false;
	pyxel_platform::set_audio_enabled(true);
	}
	Event::WindowHidden => {
	self.system.paused = true;
	pyxel_platform::set_audio_enabled(false);
	}
	Event::KeyPressed { key } => {
	self.press_key(key);
	}
	Event::KeyReleased { key } => {
	self.release_key(key);
	}
	Event::KeyValueChanged { key, value } => {
	self.change_key_value(key, value);
	}
	Event::TextInput { text } => {
	self.add_input_text(&text);
	}
	Event::FileDropped { filename } => {
	self.add_dropped_file(&filename);
	}
	Event::Quit => {
	pyxel_platform::quit();
	}
	}

[kitao]

For now, Pyxel stops and resumes audio playback when the window gets shown/hidden.

[shiromofufactory]

Thank you very much. Is this fix reflected in the latest version (2.3.12)?

[kitao]

いえ、上記は現在の実装状況の話で、iOS/Androidで適切に音を制御するには、さらにハンドリングするべきウィンドウイベントを特定、追加する必要がある（それさえできればあとは簡単）というお話になります。

[shiromofufactory]

承知しました、状況の共有ありがとうございます！

[kitao]

週末潰して調査しましたが想像以上に厄介な感じになってきました。

単にウィンドウイベントを拾ってオーディオのポーズを解除すれば良いわけではなく、一度タブがアクティブではなくなった場合、ユーザーインプットがあったタイミングと同時にオーディオを再開させないと（Web版Pyxelの起動時に「CLICK/TOUCH TO START」をするのと同じ流れ）、Webのオートプレイポリシーに抵触してオーディオの再生がブラウザから許可されなさそうです。

そうだとすると、割と大掛かりな「Pyxelアプリの一時停止→Pyxelアプリの外で入力を待ってからの復帰」の仕組みを作ることになります。ただ、それをすれば確実に解決するかまだわかっておらず、やっても空振りになってしまう可能性があるため、まずはそのやり方で間違いないという確証を何とか得たいと思っています。

[kitao]

Pyxelとは別にAudioContextを作成して、そちらに対してsuspendかつキー入力があった時にresume処理を行うことで同じブラウザページ上のPyxelの音も復活させる手法を編み出せましたので、それを入れた2.3.15をリリースしました。
半日くらいしたらサーバーがリフレッシュされて確認できるかと思います。（手元のローカルサーバー＋iPhoneでは動作確認できています）

また、新しいWeb版Pyxelは起動時にバージョン表示がされるようになっていますので、2.3.15に切り替わったかどうかはデバッグコンソールで確認できます。

[shiromofufactory]

ありがとうございます！！
明日以降に動作確認して報告させていただきます。

[shiromofufactory]

MacとiOS(Safari)を接続してテストしたのですが、ページを離れてホーム画面に戻り、しばらく（15秒くらい）経ってからSafariを再選択して元のページに戻ってもAudioが再生されませんでした。
テストプログラムはsample04で、ver2.3.15は確認しています。
以下、Mac経由で取得したiOSのSafariのログです。

私が理解していないかもしれないのは「suspendかつキー入力があった時に」という部分で、iOSなので直接的にキー入力ができていません。（タップはしましたが変化ありませんでした。）
この「suspendかつキー入力があった時に」の条件をもう少し詳しくお聞きしてもよいでしょうか。

[Log] Launch Pyxel 2.3.15 with Pyodide 0.27.3 (pyxel.js, line 45)
[Log] Object (pyxel.js, line 46)
[Log] Loading pyxel (pyodide.asm.js, line 10)
[Log] Loaded pyxel (pyodide.asm.js, line 10)
[Log] Attempting to fetch 'frozen' (pyxel.js, line 198)
[Error] Failed to load resource: the server responded with a status of 404 () (frozen, line 0)
[Log] Attempting to import '_hashlib' (pyodide.asm.js, line 10)
[Log] Attempting to fetch '_hashlib' (pyxel.js, line 198)
[Error] Failed to load resource: the server responded with a status of 404 () (_hashlib, line 0)
[Log] Attempting to import 'ssl' (pyodide.asm.js, line 10)
[Log] Attempting to fetch 'ssl' (pyxel.js, line 198)
[Error] Failed to load resource: the server responded with a status of 404 () (ssl, line 0)
[Log] Attempting to fetch '04_sound_api.py' (pyxel.js, line 198)
[Log] Copied '../../python/pyxel/examples/04_sound_api.py' to '/pyxel_working_directory/04_sound_api.py' (pyxel.js, line 222)
[Error] WebGL: INVALID_ENUM: disable: invalid capability
	disable
	<?>.wasm-function[5441]
	<?>.wasm-function[2118]
	2118
	invoke_vi (pyodide.asm.js:10:1244115)
	<?>.wasm-function[2190]
	invoke_viiiiiiiiiiiiiii (pyodide.asm.js:10:1248907)
	<?>.wasm-function[775]
	775
	invoke_viiii (pyodide.asm.js:10:1244609)
	<?>.wasm-function[740]
	740
	invoke_ii (pyodide.asm.js:10:1243973)
	<?>.wasm-function[774]
	774
	<?>.wasm-function[4586]
	<?>.wasm-function[2195]
	2195
	<?>.wasm-function[4586]
	<?>.wasm-function[1151]
	<?>.wasm-function[1160]
	<?>.wasm-function[3428]
	<?>.wasm-function[3429]
	<?>.wasm-function[1165]
	<?>.wasm-function[1152]
	<?>.wasm-function[1169]
	<?>.wasm-function[2652]
	<?>.wasm-function[2584]
	2584
	<?>.wasm-function[4586]
	<?>.wasm-function[1151]
	<?>.wasm-function[1160]
	<?>.wasm-function[3428]
	<?>.wasm-function[3426]
	<?>.wasm-function[3393]
	<?>.wasm-function[2184]
	<?>.wasm-function[1160]
	<?>.wasm-function[3428]
	<?>.wasm-function[3426]
	<?>.wasm-function[3392]
	<?>.wasm-function[3428]
	<?>.wasm-function[3429]
	<?>.wasm-function[1165]
	<?>.wasm-function[1160]
	<?>.wasm-function[494]
	Xe (pyodide.asm.js:10:62955)
	（anonymous関数） (pyxel.js:444)

[kitao]

キー入力は、具体的にはkeydown, click, touchstartのイベントを監視しています。
https://github.com/kitao/pyxel/blob/main/wasm/pyxel.js#L259-L269

私も今手元で確認してみましたが、ローカル環境(Mac)でホスティングしているページにiPhoneのChromeからアクセスするとオーディオは復帰できたのですが、グローバルなサーバーの方にアクセスすると復帰ができませんでした。（今回の処理をなくすとローカルでもオーディオは復帰しなくなります）

ローカルかどうかで何か状況に違いがあり、そこを突き止める必要があるようです。
私が知らないWebのルールがあるか、実行にローカルかどうかで僅かな時間差があり、今回の処理のキーイベント検知とPyxel側のオーディオ再生とどちらが先行するかで結果が変わってしまっているか、なのかなとは思うのですが毎回CDNの更新を待つのも非現実的なのでなかなかチェックに骨が折れそうです。

[kitao]

その後、Pyxelのaudioのオンオフや状態取得をJavaScriptから取得可能にして、制御する等もやってみましたが、どうも、音がなるならないは純粋にブラウザのオートプレイにまつわる制約（SDLのオーディオ命令云々とはもはや関係ないレイヤー）のせいっぽいです。

なので画面が戻るジャストのタイミングで画面を触れば再生されることがある様子なのと、今最も簡単な対策は画面が再表示されたタイミングでalertダイアログ出して、明示的にタッチイベントの発生と音の再生の頭を合わせてやるのが良さそうな感じがしています。

引き続き実験を少しずつ進めていきます。

[shiromofufactory]

ありがとうございます。「操作しないと音が鳴らない」というブラウザ制約が復帰時にも発生してしまうためということですね・・
想像以上に厄介な問題でお手数をおかけして申し訳ありません。あまり泥沼化するようでしたらしばらく優先度下げるなどご調整いただけましたら幸いです。よろしくお願いいたします。

[kitao]

今もうサーバーから配信されている 2.3.16 では少しAudioContextの復活支持のやり方を工夫してみました。
状況変わったかご確認いただいてもよろしいですか