Norway


When connecting an element with a audio using createMediaElementSource(), I noticed that this occasionally leads to when played back on devices (iPhone, iPad). I never experienced those issues when using a (cheap) android 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 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 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?

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



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here