When connecting an audio element with a audio 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) device or macOS desktop running the exact same code.

The 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

full code:

a recording of the iPad output, illustrating the issue can be found here:

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) {
var source = context.createMediaElementSource(audio);

audio.src = "";;
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 .

When the sampleRate of the audioContext is printed out I noticed that either 440 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?


Adding a canvas and an analyser node seems to increase the likeliness of the issue showing up:

Source link


Please enter your comment!
Please enter your name here