Javascript Web Audio API AnalyserNode不起作用

Question

該代碼應該流式傳輸任何URL並提供音頻的可視化。 不幸的是，可視化工具無法正常工作。 可視化依賴於來自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並在該事件觸發后連接它。

由於實現中的錯誤，它也無法在Safari中使用。 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