crackles and noises when playing iOS web audio with simple graph

Question

When connecting an audio element with a web audio graph using createMediaElementSource() , I noticed that this occasionally leads to crackles when played back on iOS devices (iPhone, iPad). I never experienced those issues when using a (cheap) android device or macOS desktop running the exact same code.

The noises usually show up very soon after playback starts and persists throughout the file. Usually when there are no audible issues shortly after playback starts, they do not appear at all.

a demo can be found here, but please be aware that I might require to retry a few times until the issue shows up https://jsfiddle.net/st___h/36w7vxn2/8/show

full code: https://jsfiddle.net/st___h/36w7vxn2/8/

a recording of the iPad output, illustrating the issue can be found here: https://st-h.github.io/test/ios_playback_noise.mp3

this is the snipped used to set up the graph:

var context = new(window.AudioContext || window.webkitAudioContext)();
var gainNode = context.createGain();

var audio = new Audio();
audio.loop = true;
audio.crossOrigin = "anonymous";

audio.addEventListener('error', function(e) {
  alert(e);
});
var source = context.createMediaElementSource(audio);
source.connect(gainNode);
gainNode.connect(context.destination);

audio.src = "https://st-h.github.io/test/latencies.mp3";
audio.play();
gainNode.gain.setValueAtTime(0.9, gainNode.context.currentTime);

If I just connect the source to the destination without any node in between the issue is less likely to show up. Using a different node like an analyser does not make any notable difference.

When the sampleRate of the audioContext is printed out I noticed that either 44100 or 48000 might be shown. However, I did not find any correlation between the issue showing up and the sample rate used. (checked because there were reports in the past that this might be an issue and the type of noise could be related to a wrong sample rate)

tested using an iPhone 6s and an iPad Pro (2017). Interestingly this shows up using chrome browser on iOS as well. Any ideas what might be going wrong here?

update

Adding a canvas and an analyser node seems to increase the likeliness of the issue showing up: https://jsfiddle.net/st___h/36w7vxn2/27/show

I also submitted a bug to the apple bug reporter

29.3.19

probably this might be a bug within webkit: https://bugs.webkit.org/show_bug.cgi?id=196293 https://bugs.webkit.org/show_bug.cgi?id=190552 At least it looks I am not the only one facing a similar issue.

After a month the bug report still has not received any response. A posting to the apple dev forum has gone without notice as well.

Answer 1

This has been driving me crazy for ages. Steve Hummingbird, does the BufferSource workaround that you mentioned here allow you to pause and resume playback?

https://forums.developer.apple.com/thread/114772