如何使用css或js创建波形以在播放音频文件时显示

<audio id="audio" src="audio.mp3" controls></audio>

var audio = document.getElementById('audio');
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioContext.createAnalyser();
var source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);

var bufferLength = analyser.fftSize;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

var canvas = document.getElementById('waveform');
var canvasContext = canvas.getContext('2d');

function drawWaveform() {
  requestAnimationFrame(drawWaveform);
  
  analyser.getByteTimeDomainData(dataArray);
  
  canvasContext.fillStyle = 'rgb(255, 255, 255)';
  canvasContext.fillRect(0, 0, canvas.width, canvas.height);
  
  canvasContext.lineWidth = 2;
  canvasContext.strokeStyle = 'rgb(0, 0, 0)';
  
  canvasContext.beginPath();
  
  var sliceWidth = canvas.width * 1.0 / bufferLength;
  var x = 0;
  
  for(var i = 0; i < bufferLength; i++) {
    var v = dataArray[i] / 128.0;
    var y = v * canvas.height / 2;
    
    if(i === 0) {
      canvasContext.moveTo(x, y);
    } else {
      canvasContext.lineTo(x, y);
    }
    
    x += sliceWidth;
  }
  
  canvasContext.lineTo(canvas.width, canvas.height / 2);
  canvasContext.stroke();
}

drawWaveform();

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