Аудио визуализация градиентом
 

Всем привет, народ, кто подскажет, почему Safari не хочет рисовать линерал градиенты, вот код, может кто сталкивался:

function AnalyserApp(audio, context){
    
    var context = context;    
    var audioAnimation;
    var audioBuffer;
    var sourceNode;
    var analyser;
    var audio = audio;

    audio.src = window.document.audio_path_real;

    // get the context from the canvas to draw on
    var canvas = document.getElementById('songcanvas');
    var ctx = canvas.getContext("2d");
console.log(ctx);
    var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
    gradient.addColorStop(1, '#550000');
    gradient.addColorStop(0.75, '#ff0000');
    gradient.addColorStop(0.25, '#ffff00');
    gradient.addColorStop(0, '#ffff00');

    ctx.fillStyle = gradient;

    function setupAudioNodes(audio) {
        
        analyser = (analyser || context.createAnalyser());
        analyser.smoothingTimeConstant = 0.8;
        analyser.fftSize = 512;
        
        sourceNode = context.createMediaElementSource(audio);
        sourceNode.connect(analyser);
        sourceNode.connect(context.destination);
        audio.play();
        drawSpectrum();
    }

    function drawSpectrum() {
        var WIDTH = canvas.width,
            HEIGHT = canvas.height,

        array = new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(array);

        ctx.clearRect(0, 0, WIDTH, HEIGHT);
        audioAnimation = requestAnimationFrame(drawSpectrum);
        for (var i = 0; i < (array.length) ; i++) {
            var value = array[i];
            ctx.fillRect(i * 5, HEIGHT - value, 3, HEIGHT);
        }
    }
    
    if (!$.browser.mozilla)setupAudioNodes(audio);
}

Основная функция тут drawSpectrum () она рисует такой спектр при воспроизведении аудио файла (в Хроме и Опере):


Почему это не работает в Сафари, подскажите плз.

window.onload = function () {
                var ctx = document.getElementById("canvas").getContext("2d");
                var audioContext = new (window.AudioContext
                    || window.webkitAudioContext || window.mozAudioContext)();

                var analyser = audioContext.createAnalyser();
                analyser.fftSize = 512;
                analyser.minDecibels = -200
                analyser.smoothingTimeConstant = 0;
                analyser.connect(audioContext.destination);
                var frequencyBins = new Uint8Array(analyser.frequencyBinCount);

                var osc = audioContext.createOscillator();
                osc.connect(analyser);
                osc.start(audioContext.currentTime + 2);
                osc.frequency.setTargetAtTime(1000, audioContext.currentTime + 2, 0.4);
                osc.stop(audioContext.currentTime + 6);

                var WIDTH = 512;
                var HEIGHT = 100;
                var value, h, w;

                function draw() {
                    ctx.clearRect(0, 0, WIDTH, HEIGHT);

                    for (var i = 0; i < frequencyBins.length; i++) {
                        value = frequencyBins[i];
                        h = HEIGHT * (value / 255);
                        w = WIDTH / frequencyBins.length;
                        ctx.fillRect(i * w, HEIGHT - 1, w, -h);
                    }
                };

                function animate() {
                    analyser.getByteFrequencyData(frequencyBins);
                    draw();
                    requestAnimationFrame(animate);
                }

                requestAnimationFrame(animate);
            };

Нашел решение для Сафари, как только это все соеденить....подскажите плз, с меня пиво.