Tengo este pequeño fragmento de código aquí

 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();

Código completo y demostración aquí: https://jsfiddle.net/6gv39mk0/1/show

Eso básicamente muestra una forma de onda dinámica cuando se reproduce audio

Funciona en el navegador de escritorio, en el navegador de Android, pero no hay forma de que funcione en el iPhone. ¿Me estoy perdiendo algo o hay algo que debo declarar/hacer de manera diferente?