Javascript 音频可视化

Question

I'm making a small recording feature using the user/browser microphone. When the microphone is getting sound an audio visualization is shown (like an equalizer). So fare so good.

But i really want to change the way the visualization looks to something like the image below. But i have never worked with this area before and don't know how to go about it.

I imagine something like this: https://images.app.goo.gl/pfKgnGnQz3MJVkbW6

I have two questions:

1. Is it possible to get a result like the attached?
2. How do you get started on something like that? (or has anyone done something like this that can share examples?)

My current code for the equlizer visualization

audioContext = new AudioContext();
gumStream = stream;
input = audioContext.createMediaStreamSource(stream);
rec = new Recorder(input,{numChannels:1})
rec.record()

inputPoint = audioContext.createGain();
audioInput = input;
audioInput.connect(inputPoint);

analyserNode = audioContext.createAnalyser();
analyserNode.fftSize = 1024;
inputPoint.connect( analyserNode );
updateAnalysers();

function updateAnalysers(time) {
if (!analyserContext) {
    var canvas = document.getElementById("analyser");
    canvasWidth = canvas.width;
    canvasHeight = canvas.height;
    analyserContext = canvas.getContext('2d');
}

{
    var SPACING = 5;
    var BAR_WIDTH = 5;
    var numBars = Math.round(canvasWidth / SPACING);
    var freqByteData = new Uint8Array(analyserNode.frequencyBinCount);

    analyserNode.getByteFrequencyData(freqByteData); 

    analyserContext.clearRect(0, 0, canvasWidth, canvasHeight);
    analyserContext.fillStyle = '#D5E9EB';
    analyserContext.lineCap = 'round';
    var multiplier = analyserNode.frequencyBinCount / numBars;

    // Draw rectangle for each frequency bin.
    for (var i = 0; i < numBars; ++i) {
        var magnitude = 0;
        var offset = Math.floor( i * multiplier );
        for (var j = 0; j< multiplier; j++)
            magnitude += freqByteData[offset + j];
        magnitude = magnitude / multiplier;
        var magnitude2 = freqByteData[i * multiplier];
        analyserContext.fillRect(i * SPACING, canvasHeight, BAR_WIDTH, -magnitude);
    }
}

rafID = window.requestAnimationFrame( updateAnalysers );
}

Answer 1

Ans 1:

Your image is broken so can't answer but as far as I know, you can visualize any waveform using audio data

How do you get started on something like that? (or has anyone done something like this that can share examples?)

Ans 2:

So I did use the customized waveform. I am sharing my code

 import React, { Component } from "react"; import AudioVisualiser from "./AudioVisualiser"; class AudioAnalyser extends Component { constructor(props) { super(props); this.state = { audioData: new Uint8Array(0) }; this.tick = this.tick.bind(this); } componentDidMount() { this.audioContext = new (window.AudioContext || window.webkitAudioContext)(); this.analyser = this.audioContext.createAnalyser(); this.dataArray = new Uint8Array(this.analyser.frequencyBinCount); this.source = this.audioContext.createMediaStreamSource(this.props.audio); this.source.connect(this.analyser); this.rafId = requestAnimationFrame(this.tick); } tick() { this.analyser.getByteTimeDomainData(this.dataArray); this.setState({ audioData: this.dataArray }); this.rafId = requestAnimationFrame(this.tick); } componentWillUnmount() { cancelAnimationFrame(this.rafId); // this.analyser.disconnect(); // this.source.disconnect(); } render() { return <AudioVisualiser audioData={this.state.audioData} />; } } export default AudioAnalyser;

import React, { Component } from 'react';

class AudioVisualiser extends Component {
  constructor(props) {
    super(props);
    this.canvas = React.createRef();
  }

  componentDidUpdate() {
    this.draw();
  }

  draw() {
    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 / 2);
    for (const item of audioData) {
      const y = (item / 255.0) * height;
      context.lineTo(x, y);
      x += sliceWidth;
    }
    context.lineTo(x, height / 2);
    context.stroke();
  }

  render() {
    return <canvas width="300" height="300" ref={this.canvas} />;
  }
}

export default AudioVisualiser;