Javascript Web Audio API AnalyserNode Not Working

问题

The code is supposed to stream any url and provide a visualization of the audio. Unfortunately, the visualizer is not working. The visualization relies on the data from the AnalyzerNode, which is always returning empty data. Why doesn't the AnalyserNode in this code work? The numberOfOutputs on the source node increases after I .connect() them, but the numberOfInputs on the AnalyserNode does not change.

<html>
    <head>
        <script>
            var context;
            var source;
            var analyser;
            var canvas;
            var canvasContext;

            window.addEventListener('load', init, false);
            function init() {
                try {
                    // Fix up for prefixing
                    window.AudioContext = window.AudioContext || window.webkitAudioContext;

                    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

                    context = new AudioContext();
                    analyser = context.createAnalyser();
                    canvas = document.getElementById("analyser");
                    canvasContext = canvas.getContext('2d');
                }
                catch(e) {
                    alert(e);
                    alert('Web Audio API is not supported in this browser');
                }
            }

            function streamSound(url) {
                var audio = new Audio();
                audio.src = url;
                audio.controls = true;
                audio.autoplay = true;
                source = context.createMediaElementSource(audio);
                source.connect(analyser);
                analyser.connect(context.destination);
                document.body.appendChild(document.createElement('br'));
                document.body.appendChild(audio);
                render();
            }

            function render(){
                window.requestAnimationFrame(render);
                //Get the Sound data
                var freqByteData = new Uint8Array(analyser.frequencyBinCount);
                analyser.getByteFrequencyData(freqByteData);
                //we Clear the Canvas
                canvasContext.clearRect(0, 0, canvas.width, canvas.height);
                //draw visualization
                for(var i=0;i<analyser.frequencyBinCount;i++){
                    canvasContext.fillRect(i*2,canvas.height,1,-freqByteData[i]);
                    //Data seems to always be zero
                    if(freqByteData[i] != 0) {
                        alert(freqByteData[i]);
                    }
                }
            }
        </script>
    </head>
    <body>
        <button onclick="streamSound(document.getElementById('url').value)"> Stream sound</button>
        <input id="url" size='77' value="Enter a URL to Stream">
        <br />
        <canvas id="analyser" width="600" height="200"></canvas>
    </body>
</html>