是否有任何ReactJS库可用于从音频分析仪绘制正弦波?

时间:2019-05-29 11:48:04

标签: javascript reactjs canvas visualization web-audio-api

在网络应用中,我应该实现正弦波绘制,以便在从麦克风录制时进行可视化。我正在使用Web Audio API从麦克风获取数据。

 const { audioData } = this.props;
    const canvas = this.canvas.current;
    const height = canvas.height;
    const width = canvas.width;
    const context = canvas.getContext('2d');
    let x = 0;
    const sliceWidth = (width * 1.0) / audioData.length;

    context.lineWidth = 2;
    context.strokeStyle = '#000000';
    context.clearRect(0, 0, width, height);

    context.beginPath();
    context.moveTo(0, height / 4);
    for (const item of audioData) {
      const y = (item / 255.0) * height;
      context.lineTo(x, y);
      x += sliceWidth;
    }
    context.lineTo(x, height / 2);
    context.stroke();

enter image description here

0 个答案:

没有答案