I am looking for an explanation, bug report or viable workaround regarding degraded audio quality when a html audio element is used as a source of a web audio graph. The issue seems to occur both when using chrome or safari at least on ios 12.1
A recording of the introduced noise can be found here: https://st-h.github.io/test/ios_playback_noise.mp3
A basic page to reproduce the issue can be found here: https://jsfiddle.net/st___h/36w7vxn2/27/show
source code is available here: https://jsfiddle.net/st___h/36w7vxn2/27
Same code runs without any issue on macOS desktop and android devices, however leads to issues every now and then on every iOS I have tried. Please not that in order to reproduce the issue, a few reloads of the page might be required as the issue is not present every time audio is played back.
I have opened a similar question over at stackoverflow, which currently hasn't received much attention
In order to reproduce the issue, a audio element and a web audio graph is required like:
const context = new window.webAudioContext();
const audio = new Audio();
context.createMediaElementSource(audio);
...continue setup and play...The issue does not seem to occur when another means of source like BufferSource is used.
To work around this issue we had to implement a player dedicated to iOS devices, which makes use of a BufferSource, downloads the whole audio file and keeps it in memory. However, it seems very unfortunate that we have to force mobile iOS users to download the whole audio file with limited bandwitdh and keep it in the already limited memory, while we are able to stream just fine on mac desktop, where we would have both sufficient bandwith and memory.
