Thank you to the whole three.js community for all the work that’s gone into it!
We had great fun building Greenham Women Digital; an archival website hosting an interactive, 3D, curated experience of the Greenham Common Women’s Peace Camp, with the capacity to display responses, memories, and images uploaded by visitors on an ongoing basis.
The app has to ensure to only decode and play audio files when a user interaction has happened. You need a similar logic like the web audio examples e.g. webaudio_visualizer.
You normally solve this issue by having an additional screen with some sort of start of play button. This additional screen can also be used to tell the user to turn on audio or use headphones for best experience.
Thank you for your feedback, we are aware of this behaviour. The landing page has random audio container triggered by interaction with the UI so if the user does not hover/click on the buttons before clicking/touching somewhere in the browser window the error does not occur.
Even if the AudioContext error does arise on the start page, it’s only once during the whole experience. The audio behaves correctly throughout (turns out some people spent on it 6h straight), we also have not experienced distortion on Chrome you linked to.
Having said that we do use our landing page as a sort-of buffer (this is why it’s not three.js) so we might disable sound until the first interaction with the navbar, no errors at all is always better!
We would appreciate any other comments you may wish to share!