I have this little code snippet here

var context = new(window.AudioContext || window.webkitAudioContext)();
.....
var source = context.createMediaElementSource(audio);
var analyser = context.createAnalyser();

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

source.connect(analyser);
analyser.connect(context.destination);
analyser.fftSize = 256;

var bufferLength = analyser.frequencyBinCount;

var dataArray = new Uint8Array(bufferLength);

var WIDTH = canvas.width;
var HEIGHT = canvas.height + (canvas.height * 0.7);

var barWidth = (WIDTH / bufferLength) * 2.5;
var barHeight;
var x = 0;


function renderFrame() {
  x = 0;
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, WIDTH, HEIGHT);
  analyser.getByteFrequencyData(dataArray);

  for (var i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];
    var r = barHeight + (25 * (i / bufferLength));
    var g = 250 * (i / bufferLength);
    var b = 50;
    ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
    ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
    x += barWidth + 1;
  }
  requestAnimationFrame(renderFrame);
}
requestAnimationFrame(renderFrame);


audio.src = jQuery("source").attr("src");
audio.play();

Full code and demo here: https://jsfiddle.net/6gv39mk0/1/show

That basically shows a dynamic waveform when audio is played

It works on desktop browser, android browser, but no way to make it works on iPhone. Am I missing something or is there something that I must declare/do differently?