WebAudio Pitch Shifting

[iambalaam]

• Improves cypress test harness
  • Tests now use the WebAudio AnalyserNode to inspect the actual audio coming from the browser.
  • We can test output volume and frequency (using our constant volume 440Hz sinwave)
• Adds a custom PhaseVocoderProcessor WebAudio AudioWorklet to manually handle pitch correction.
  • We disable preservesPitch on HTMLMediaElements
  • We handle blocks of 128 audio frames (~3ms) each invocation and use FFT.js
• Uses WebAudio for all audio control of HTMLMediaElements
  • We create an AudioContext for each audioOutput (connecting an element to an audioContext is irreversible)
  • Graph: Media Element -> Source Node -> PhaseVocoderProcessor -> GainNode -> output *
• Adds a build step for the audio worklet
  • Without this step, the worklet would need to be hosted as another file
  • This makes the bundle size a bit bigger, but it's nicer to be dependency-less

---

* I opted for a GainNode here for a couple reasons:

• Provides better accuracy when performing transforms with lower volume
• Provides a handy 'final node' to connect to when testing (that can be connected to an AnalyserNode)

[tomdixon]

Have you checked that the gain node volume scales in the same way as the mediaElement? e.g. that 50% sounds equivalent on both.

[tomdixon]

Can we get an explainer comment on the magic numbers?