Stereo panning with Web Audio API; WebM

[Tom Chen]

Refactor ./src/utils/playSound.ts with Web Audio API (howler.js used eventually).

• Use GainNode to control volume
• Use StereoPannerNode to add stereo panning. Sound effects for the player on the left/right should be panned left/right
• Use webm rather than mp3
• Restore MP3 instead of WebM for Safari compatibility (this is easier than using fallback)
• Stereo Option (Enable or disable)

Refs:

• https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics
• https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API

[Tom Chen]

• Stereo Option (Enable or disable)
• Use webm

[Tom Chen]

Safari can't play WebM currently. Should have MP3 fallback

Detect WebM support:
https://stackoverflow.com/a/7451727

Edit: I eventually restored mp3 instead of webm. It's easier to control the preloading and PWA