Complete, minimal testcase here:
Steps to reproduce:
1. Visit the URL.
2. Click the button to have "user interaction" in order to play a sound via WebAudio (it will play once per second from then on). Sound is fine.
3. Play the video.
4. As soon as the video is being played, the sound is either distorted, too fast, or stops working altogether (random)
The video has been rendered with 48 kHz audio, my suspicion is that Webkit doesn't recognize the sample rate change or WebAudio isn't capable of resampling.
So far I've tried this on three different iPhones running 10.0.2, 10.2.1, and 10.3 Beta, and haven't been able to reproduce the issue. On what OS and device combo are you seeing this behavior? Also, is this behavior reproducing when playing over the devices' speakers, or with headphones?
iPhone SE (MLM62DN/A) on iOS 10.2.1. It is often not exactly distortion, it sounds more as if the mixing buffer is too short and part of it is repeated. Listen closely. (happens on internal speaker).
I can reproduce the same issue on an iPhone 6 Plus (10.2.1). This is even more noticeable if the audio in the video element has an even lower sample rate (like 22050 Hz). This does not seem to affect 6s and 6s plus. Those devices only support 48 kHz, so this issue might not apply to devices that are locked to 48 kHz.
Relevant to the severity of this issue:
All AudioContexts created after playing a video with low sample rate audio will inherit that same low sample rate. This persists for the lifetime of the browser tab. That means we are capped at playing audio at a much worse sample rate than the device would normally support.