audio: browser does not play audio until refresh

kazzmir commented 2 days ago

Ebitengine Version

2.8.0

Operating System

[ ] Windows
[ ] macOS
[ ] Linux
[ ] FreeBSD
[ ] OpenBSD
[ ] Android
[ ] iOS
[ ] Nintendo Switch
[ ] PlayStation 5
[ ] Xbox
[X] Web Browsers

Go Version (`go version`)

go version go1.23.0 linux/amd64

What steps will reproduce the problem?

ebiten $ wasmserve ./examples/audio

Load localhost:8080 in chrome and click on the page. No audio is heard. Refresh the page and then click on the game area, now sound plays.

chrome Version 129.0.6668.58 (Official Build) (64-bit) I also tested in firefox 130.0.1 (64-bit) with the same result.

What is the expected result?

Audio should play without having to refresh the page

What happens instead?

No audio until a page refresh is done.

Anything else you feel useful to add?

These messages appear in the chrome dev console

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

I can't seem to copy/paste this text, but here is an image of the longer stack trace.

hajimehoshi commented 2 days ago

Thanks. Did you say the warning "The AudioContext was not allowed to start." was shown twice at the first load? I need both stacktraces.

kazzmir commented 2 days ago

When I open the browser to localhost:8080 the first time I get this in the dev console

wasm_exec.js:390 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
syscall/js.valueNew @ wasm_exec.js:390

Then when I click into the wasm game I see

wasm_exec.js:356 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
syscall/js.valueCall @ wasm_exec.js:356
$syscall_js.valueCall @ 03aaed6e:0x1eecc6
$syscall_js.Value.Call @ 03aaed6e:0x1ee6e2
$github.com_ebitengine_oto_v3.newContext.func3.1 @ 03aaed6e:0x60759d
$syscall_js.handleEvent @ 03aaed6e:0x1eafe7
$runtime.handleEvent @ 03aaed6e:0x28899
$wasm_export_resume @ 03aaed6e:0x125205
_resume @ wasm_exec.js:545
(anonymous) @ wasm_exec.js:556

Then I reload the window and see

wasm_exec.js:390 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
syscall/js.valueNew @ wasm_exec.js:390
$syscall_js.valueNew @ 03aaed6e:0x1ef7cc
$syscall_js.Value.New @ 03aaed6e:0x1ef506
$github.com_ebitengine_oto_v3.newContext @ 03aaed6e:0x605c60
$github.com_ebitengine_oto_v3.NewContext @ 03aaed6e:0x604d90
$github.com_hajimehoshi_ebiten_v2_audio.newContext @ 03aaed6e:0x610059
$github.com_hajimehoshi_ebiten_v2_audio.__playerFactory_.initContextIfNeeded @ 03aaed6e:0x611592
$github.com_hajimehoshi_ebiten_v2_audio.__playerImpl_.ensurePlayer @ 03aaed6e:0x611a3f
$github.com_hajimehoshi_ebiten_v2_audio.__playerImpl_.Play @ 03aaed6e:0x612193
$main.NewPlayer @ 03aaed6e:0x69ac18
$main.NewGame @ 03aaed6e:0x69dbea
$main.main @ 03aaed6e:0x69e916
$runtime.main @ 03aaed6e:0x963c7
$wasm_pc_f_loop @ 03aaed6e:0x12513a
$wasm_export_run @ 03aaed6e:0x1251fb
run @ wasm_exec.js:534
(anonymous) @ (index):16
await in (anonymous)
(anonymous) @ (index):23

After this, I can click into the window and hear audio.

hajimehoshi commented 2 days ago

Unfortunately I failed to reproduce this. I'll try to investigate this more. Thanks!

hajimehoshi commented 2 days ago

My current guess is that the event handler for the user input is not invoked directly but indirectly due to the Go scheduler.

hajimehoshi commented 2 days ago

@kazzmir Could you try

go get github.com/hajimehoshi/ebiten/v2@fd3a253d884910359f1b2002a677002b75040c08

? The first click might not start the audio, but multiple clicks should start.

kazzmir commented 2 days ago

With that new version the audio starts on the first click.

hajimehoshi commented 2 days ago

OK thanks!

hajimehoshi / ebiten