JavaScript 音频可视化

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#upload {
    position: fixed;
    top: 0;
    left: 0;
}

audio {
    position: fixed;
    top: 0;
    right: 0;
}

<input type="file" id="upload" accept="audio/mpeg">

  const upload = document.querySelector('#upload')

  upload.addEventListener('change', (e) => {
    const [file] = e.target.files
    if (!file) upload.value = ''
    const { type } = file
    if (!type.includes('audio')) {
      alert('仅支持音频格式文件')
      upload.value = ''
      return false
    }
    const url = URL.createObjectURL(file)
    draw(url)
  })

  function draw(url) {
    const {
      clientWidth: width,
      clientHeight: height,
    } = document.body
    const audio = new Audio
    audio.src = url
    audio.controls = true
    audio.load()
    const canvas = document.createElement('canvas')
    canvas.width = width
    canvas.height = height
    document.body.appendChild(audio)
    document.body.appendChild(canvas)
    const canvasCtx = canvas.getContext('2d')
    const audioCtx = new AudioContext
    const sourceNode = audioCtx.createMediaElementSource(audio)
    // 音频分析器
    const analyser = audioCtx.createAnalyser()
    analyser.fftSize = 128 // FFT
    sourceNode.connect(analyser)
    analyser.connect(audioCtx.destination)
    const len = analyser.frequencyBinCount
    const buffer = new Uint8Array(len)
    const gap = 2 // 间隙
    const pillarWidth = (width / len) - gap
    const gradient = canvasCtx.createLinearGradient(0, 0, 0, 500)
    gradient.addColorStop(.8, '#1eec1e')
    gradient.addColorStop(.5, '#c97a3d')
    gradient.addColorStop(0, '#f00f00')

    const render = () => {
      canvasCtx.fillStyle = '#fff'
      canvasCtx.fillRect(0, 0, width, height)
      analyser.getByteFrequencyData(buffer)
      let x = 0
      buffer.forEach(v => {
        const pillarHeight = (v / 255) * height
        canvasCtx.fillStyle = gradient
        canvasCtx.fillRect(x, height - (pillarHeight || 2), pillarWidth, pillarHeight || 2)
        x += (pillarWidth + gap)
      })
      requestAnimationFrame(render)
    }
    render()
    audio.play()
  }