fix: Modernize audio playback by gonfunko · Pull Request #9560 · RaspberryPiFoundation/blockly

The basics

The details

Resolves

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 HTMLAudioElement instances and playing them on page load to try to trick the browser into fetching and caching them. Because we're no longer relying on playing HTMLAudioElements, 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.