Question

代码应该流式传输任何网址并提供音频的可视化。不幸的是，可视化工具无法正常工作。可视化依赖于来自AnalyzerNode的数据，该数据始终返回空数据。为什么此代码中的AnalyserNode不起作用？在I .connect（）之后，源节点上的numberOfOutputs会增加，但AnalyserNode上的numberOfInputs不会更改。

<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>

Answer 1

您应该为音频的canplay事件设置一个事件监听器，并且只设置MediaElementSource并在该事件触发后连接它。

它也是won't work in Safari due to a bug in their implementation。 AFAIK Chrome是唯一能够正确支持Web Audio API的浏览器。

Javascript Web Audio API AnalyserNode不起作用

1 个答案: