fix: Modernize audio playback by gonfunko · Pull Request #9560 · RaspberryPiFoundation/blockly
The basics
The details
Resolves
- Fixes Preloading sounds have become noticeable in Chrome #3536
- Fixes Connecting/disconnecting block audio does not work #4538
- Fixes First user interaction on multiplayground on iOS triggers angry clacking sounds #5798
Proposed Changes
This PR modernizes Blockly's audio playback to remove decade-old hacks:
-
Preloading has been improved by fetching the audio file when it is loaded and storing its bytes, rather than creating
HTMLAudioElementinstances and playing them on page load to try to trick the browser into fetching and caching them. Because we're no longer relying on playingHTMLAudioElements, various hacks to do this in response to user interaction in order to prevent the browser suppressing it are also unnecessary. This incidentally fixes several situations whereby the preloading/playback could be heard on pageload, because we no longer play sounds until we actually intend to play them. -
The OGG and WAV files have been removed; MP3 is supported by all modern browsers, so these fallbacks were just wasting bandwidth.
-
Rather than creating and cloning audio tags based on useragent, we now just use the WebAudio API to play sounds.
Testing
I manually verified that block connection, disconnection and delete sounds play properly on Safari, Mobile Safari (in the simulator), Chrome and Firefox. I also verified that bulk deletion after e.g. "Scatter" in the playground plays lots of delete sounds in quick succession properly.