在 JS 画布中绘制正弦波没有任何作用

Question

我编写了以下内容以从 AudioBuffer 中绘制声波，但我得到的是带有水平直线的画布：

const { audioContext, analyser } = this.getAudioContext();

const source = audioContext.createBufferSource();

source.buffer = audioBuffer;

source.connect(audioContext.destination);

const canvas = document.getElementById('canvas');

const canvasCtx = canvas.getContext("2d");

let sinewaveDataArray = new Uint8Array(analyser.fftSize);

const drawSinewave = function() {

    analyser.getByteTimeDomainData(sinewaveDataArray);

    requestAnimationFrame(drawSinewave);

    canvasCtx.fillStyle = 'white';

    canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

    canvasCtx.lineWidth = 2;

    canvasCtx.strokeStyle = "black";

    canvasCtx.beginPath();

    const sliceWidth = canvas.width * 1.0 / analyser.fftSize;

    let x = 0;

    for(let i = 0; i < analyser.fftSize; i++) {

        const v = sinewaveDataArray[i] / 128.0; // byte / 2 || 256 / 2

        const y = v * canvas.height / 2;

        if(i === 0) {

            canvasCtx.moveTo(x, y);

        } else {

            canvasCtx.lineTo(x, y);

        }

        x += sliceWidth;

    }

    canvasCtx.lineTo(canvas.width, canvas.height / 2);

    canvasCtx.stroke();

};

source.start();

drawSinewave();

getAudioContext =  () => {

        AudioContext = window.AudioContext || window.webkitAudioContext;

        const audioContext = new AudioContext();

        const analyser = audioContext.createAnalyser();

        return { audioContext, analyser };

    };

我正在寻找的最终结果类似于这里的第一个图像剪辑：https ://meyda.js.org/

知道我缺少什么吗？

Answer 1

我认为需要进行两个小改动才能使其正常工作。source.start()需要响应用户事件来执行。可以使用带有单击处理程序的简单按钮来实现此目的。这是处理某些浏览器中存在的自动播放策略所必需的。aReferenceToAButton.addEventListener('click',&nbsp;async&nbsp;()&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;await&nbsp;audioContext.resume(); &nbsp;&nbsp;&nbsp;&nbsp;source.start();});最后但同样重要的是，您需要通过AnalyserNode.source &nbsp;&nbsp;&nbsp;&nbsp;.connect(analyser) &nbsp;&nbsp;&nbsp;&nbsp;.connect(audioContext.destination);我希望这有帮助。