Javascript Web音频API AnalyzerNode不工作_Javascript_Html_Audio_Web_Web Audio Api

Javascript Web音频API AnalyzerNode不工作

javascript html audio web

Javascript Web音频API AnalyzerNode不工作,javascript,html,audio,web,web-audio-api,Javascript,Html,Audio,Web,Web Audio Api,该代码应该是流式传输任何url，并提供音频的可视化。不幸的是，可视化工具无法工作。可视化依赖于来自AnalyzerNode的数据，AnalyzerNode总是返回空数据。为什么代码中的AnalyzerNode不工作？源节点上的numberOfOutputs在I.connect（）之后会增加，但AnalyzerNode上的numberOfInputs不会更改 <html> <head> <script> var c

该代码应该是流式传输任何url，并提供音频的可视化。不幸的是，可视化工具无法工作。可视化依赖于来自AnalyzerNode的数据，AnalyzerNode总是返回空数据。为什么代码中的AnalyzerNode不工作？源节点上的numberOfOutputs在I.connect（）之后会增加，但AnalyzerNode上的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>


var语境；
var源；
var分析仪；
var帆布；
var canvasContext；
addEventListener（'load'，init，false）；
函数init（）{
试一试{
//设置前缀
window.AudioContext=window.AudioContext | | window.webkitadiocontext；
window.requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame||
window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
上下文=新的AudioContext（）；
Analyzer=context.createAnalyzer（）；
canvas=document.getElementById（“分析器”）；
canvasContext=canvas.getContext（'2d'）；
}
捕获（e）{
警报（e）；
警报（“此浏览器不支持Web音频API”）；
}
}
函数streamSound（url）{
var audio=新音频（）；
audio.src=url；
audio.controls=true；
audio.autoplay=true；
source=context.createMediaElementSource（音频）；
源。连接（分析仪）；
分析器.连接（上下文.目的地）；
document.body.appendChild（document.createElement（'br'））；
文件.正文.附件（音频）；
render（）；
}
函数render（）{
window.requestAnimationFrame（渲染）；
//获取声音数据
var FREKBYTEDATA=新UINT8阵列（分析仪频率BINCOUNT）；
分析仪。获取频率数据（频率数据）；
//我们清理画布
canvasContext.clearRect（0，0，canvas.width，canvas.height）；
//绘制可视化
对于（var i=0；i您应该为音频的canplay
事件设置一个事件侦听器，并且只设置MediaElementSource
并在该事件触发后连接它
此外，AFAIK Chrome是唯一正确支持Web音频API的浏览器