Javascript Web Audio API AnalyserNode不起作用

Question

The code is supposed to stream any url and provide a visualization of the audio. 该代码应该流式传输任何URL并提供音频的可视化。 Unfortunately, the visualizer is not working. 不幸的是，可视化工具无法正常工作。 The visualization relies on the data from the AnalyzerNode, which is always returning empty data. 可视化依赖于来自AnalyzerNode的数据，该数据始终返回空数据。 Why doesn't the AnalyserNode in this code work? 为什么此代码中的AnalyserNode不起作用？ The numberOfOutputs on the source node increases after I .connect() them, but the numberOfInputs on the AnalyserNode does not change. 在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

You should setup an event listener for the audio's canplay event and only setup the MediaElementSource and connect it after that event fires. 您应该为音频的canplay事件设置一个事件监听器，并且只设置MediaElementSource并在该事件触发后连接它。

It also won't work in Safari due to a bug in their implementation . 由于实现中的错误，它也无法在Safari中使用。 AFAIK Chrome is the only browser that properly supports the Web Audio API. AFAIK Chrome是唯一能够正确支持Web Audio API的浏览器。

Javascript Web Audio API AnalyserNode不起作用

问题描述

1 个解决方案

解决方案1
3 已采纳 2013-05-17 04:05:14

Javascript Web Audio API AnalyserNode不起作用

问题描述

1 个解决方案

解决方案1 3 已采纳 2013-05-17 04:05:14

解决方案1
3 已采纳 2013-05-17 04:05:14