sounds_demo/js/index.js

let objSocket;
let initPlay = false;

let wavesurfer = WaveSurfer.create({
  container: '#pcmGraph',//容器
  waveColor: '#FF55C5',
  progressColor: '#00BFBF',
  split: false,
  minPxPerSec: 8,
  height: 128,
  // barWidth: 1,
  barHeight: 1.5,
  splitChannels: false,
  audioRate: '1',
  plugins: [
    WaveSurfer.spectrogram.create({
      container: '#stftGraph',
      labels: true,
      colorMap: colors,
      fftSamples: 1024,
      height: 256,
    }),
  ]
});

var player = new PCMPlayer({
  // inputCodec: 'Int16',
  inputCodec: 'Float32',
  channels: 1,
  sampleRate: 16000,
  flushTime: 3000
});

// 频域频谱图
const chart = new G2.Chart({
  container: "fftGraph",
  autoFit: true,
  padding: [30, 10, 30, 40],
  defaultInteractions: []
});

wavesurfer.on("finish", () => {
  document.getElementById("playAudio").innerText="播放";
  // wavesurfer.pause();
  objSocket.onclose();
  initSocket("ws://lfxstek.top:28091");
});


window.onload = function () {
  initSocket("ws://lfxstek.top:28091");
  const btn = document.getElementById("btn");
  btn.onclick = sendMessage;
  const playBtn = document.getElementById("playAudio");
  playBtn.onclick = playAudio;
}

function initSocket(wsUrl) {
  // const ws = "ws://" + window.location.hostname + ":8081";
  // const ws = "ws://lfxstek.top:8081";
  objSocket = new WebSocket(wsUrl);
  
  objSocket.onopen = function () {
    console.log("Connected to WebSocket server");
    sendMessage();
  }
  objSocket.onclose = function () {
    console.log("Disconnected");
  }
  objSocket.onmessage = function (evt) {
    console.log("onMessage", evt);
    drawPCMGraph(evt.data);
    document.getElementById("playAudio").innerText="播放";
    playAudio();
  }
  objSocket.onerror = function (evt) {
    console.log("Error ocured: " + evt.data);
  }

}

function sendMessage() {
  if (!objSocket || objSocket.readyState !== 1) {
    return;
  }
  // while (!objSocket || objSocket.readyState !== 1) {
  //   continue;
  // }
  objSocket.send("1");
  console.log("send message");

}

function drawPCMGraph(data) {
  console.log("draw pcm graph");
  const reader = new FileReader();
  reader.readAsArrayBuffer(data);
  reader.onload = () => {
    player.feed(reader.result);
    var buf = new Uint32Array(reader.result);
    const audioDate = new Blob([addWavHeader(buf, 16000, 32, 1)]);
    const srcUrl = window.URL.createObjectURL(audioDate);
    wavesurfer.load(srcUrl);
    // 
    drawFFTGraph(buf);
    wavesurfer.play();
  };
  
}

function playAudio() {
  const playBtn = document.getElementById("playAudio");
  if (playBtn.innerText === "播放") {
    if (!initPlay) {
      initPlay =true;
    }else{
      playBtn.innerText = "暂停";
    }
    
    wavesurfer.play();
  } else {
    playBtn.innerText = "播放";
    wavesurfer.pause();
  }
}

function drawFFTGraph(data) {
  // return
  let newFFT = [];
  // 找最大值
  let max = 0;
  for (let i = 0; i < 512; i++) {//data.length
    if (i < 10) {
      data[i] = 0
    }
    if (data[i] > max) {
      max = data[i];
    }
  }

  // 归一
  for (let i = 0; i < 512; i++) {//data.length
    newFFT.push({
      index: i,
      freq: data[i] / max,
    })
  }

  

  chart.data(newFFT);
  chart.scale({
    index: {
      tickCount: 48,
      nice: true,
    },
    freq: {
      tickCount: 7,
      nice: true,
    }
  });

  chart.axis('index', {
    title: {
      text: '(kHz)',
      position: 'center',
      offset: 25,
      style: {
        fill: '#9BB7EF',
        fontSize: '13'
      }
    }
  })

  chart.interval().position("index*freq");
  chart.legend(false);
  chart.tooltip(false);
  chart.render();
}