我編寫了以下內容以從 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/知道我缺少什么嗎?
在 JS 畫布中繪制正弦波沒有任何作用
牧羊人nacy
2022-07-01 16:49:50