uniapp H5怎么获取声音频率并绘制声波图

在uniapp H5中获取声音频率并绘制声波图可以通过以下步骤实现：

1. 使用HTML5的Web Audio API获取麦克风输入的音频数据。
2. 将音频数据转换成频率数据，可以使用FFT算法进行频谱分析。
3. 将频率数据绘制成声波图，可以使用Canvas进行绘制。

以下是一个简单的示例代码：

<template>
  <canvas id="canvas"></canvas>
</template>

<script>
export default {
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      // 获取麦克风输入的音频数据
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
          const audioContext = new AudioContext();
          const source = audioContext.createMediaStreamSource(stream);
          const analyser = audioContext.createAnalyser();

          // 配置AnalyserNode，将音频数据转换成频率数据
          analyser.fftSize = 2048;
          const bufferLength = analyser.frequencyBinCount;
          const dataArray = new Uint8Array(bufferLength);

          source.connect(analyser);

          // 每隔16.7毫秒获取一次频率数据，并绘制成声波图
          setInterval(() => {
            analyser.getByteFrequencyData(dataArray);

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();

            const barWidth = canvas.width / bufferLength;
            let x = 0;

            for (let i = 0; i < bufferLength; i++) {
              const barHeight = dataArray[i] / 2;

              ctx.fillStyle = `rgb(${barHeight}, 0, 0)`;
              ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);

              x += barWidth + 1;
            }
          }, 16.7);
        })
        .catch(err => {
          console.error(err);
        });
    }
  }
}
</script>

在上面的示例代码中，我们使用了HTML5的Web Audio API获取麦克风输入的音频数据，然后将音频数据转换成频率数据，并使用Canvas将频率数据绘制成声波图。你可以将上面的代码复制到你的uniapp项目中，并根据需要进行修改。