如何创建wave控件？

<canvas id="waveform" width="600" height="200"></canvas>

var canvas = document.getElementById('waveform');
var context = new AudioContext();

function loadAudio(url) {
  return new Promise(function(resolve, reject) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
    request.onload = function() {
      context.decodeAudioData(request.response, resolve, reject);
    };
    request.send();
  });
}

loadAudio('audio.wav').then(function(buffer) {
  // 音频解码成功后的处理逻辑
}).catch(function(error) {
  console.error('音频解码失败:', error);
});

function drawWaveform(buffer) {
  var channelData = buffer.getChannelData(0); // 获取左声道的音频数据
  var canvasContext = canvas.getContext('2d');
  var width = canvas.width;
  var height = canvas.height;
  var step = Math.ceil(channelData.length / width);
  var amp = height / 2;

  canvasContext.fillStyle = 'rgb(255, 255, 255)';
  canvasContext.fillRect(0, 0, width, height);
  canvasContext.lineWidth = 1;
  canvasContext.strokeStyle = 'rgb(0, 0, 0)';
  canvasContext.beginPath();

  for (var i = 0; i < width; i++) {
    var min = 1.0;
    var max = -1.0;

    for (var j = 0; j < step; j++) {
      var datum = channelData[(i * step) + j];
      if (datum < min) {
        min = datum;
      }
      if (datum > max) {
        max = datum;
      }
    }

    canvasContext.moveTo(i, (1 + min) * amp);
    canvasContext.lineTo(i, (1 + max) * amp);
  }

  canvasContext.stroke();
}

drawWaveform(buffer);

var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start();