js 选择一个音频文件，绘制音频的波形，从右向左逐渐前进。

选择一个音频文件，绘制波形，从右向左逐渐前进。

完整代码：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="audio/*" />
    <button @click="stopPlayback" :disabled="!isLoaded">停止</button>
    <canvas ref="canvas" width="1201" height="211"></canvas>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      // audioUrl:"http://121.41.225.74:9091/mintti/app/storage/newFile/b26uvk9ipd8n5iop1lzs.wav",
      audioUrl: "http://121.41.225.74:9091/mintti/app/storage/newFile/c19xqqqtd8ywqyaf8gno.wav",
      // audioUrl: "http://121.41.225.74:9091/mintti/app/storage/newFile/d3msxipdfxrbyijm3ys0.wav",
      // audioUrl:"http://121.41.225.74:9091/mintti/app/storage/newFile/xm456t9dptsrigxye84q.wav",

      dataArray: [],
      isPlaying: false,
      isLoaded: false,
      drawInterval: 200, // 设置绘制的时间间隔（单位：毫秒）
      drawIntervalId: null,
      fileData: new Int8Array(0),
      index: 0,
      mWidth: 0,
      mHeight: 0,
    }
  },
  mounted() {
    const ctx = this.$refs.canvas.getContext('2d')
    this.drawGrid(ctx)
    this.downloadAudio()
  },
  methods: {
    // 下载音频文件
    downloadAudio() {
      axios({
        method: 'get',
        url: this.audioUrl,
        responseType: 'arraybuffer'
      }).then(res => {
        if (!res) {
          return;
        }

        console.log("decodeAudioData")
        this.loadAudio(res.data)
      }).catch(error => {
        console.error('下载音频时出错:', error);
      });;
    },

    handleFileChange(event) {
      this.isLoaded = false
      const file = event.target.files[0]

      this.stopPlayback()
      const reader = new FileReader();
      reader.onload = (e) => {
        console.log("onLoad")
        this.loadAudio(e.target.result)

      };

      reader.readAsArrayBuffer(file);
    },

    loadAudio(res) {
      this.dataArray = []
      this.isLoaded = true
      this.index = 0;
      // 获取文件的前 100 个字节
      this.fileData = new Int8Array(res);
      this.refreshData()

      this.drawIntervalId = setInterval(() => {
        console.log("定时器执行了")
        this.refreshData()
      }, this.drawInterval)//循环读取
    },
    refreshData() {
      let i = this.index
      console.log("文件总长度：" + this.fileData.byteLength + ",,i=" + i)
      if (i * 1600 + 44 > this.fileData.byteLength) {
        clearInterval(this.drawIntervalId)
        return
      }
      const byteArray = this.fileData.slice(i * 1600 + 44, (i + 1) * 1600 + 44);

      // 创建一个新的 Uint16Array,长度为 byteArray 的一半
      let shortArray = new Int16Array(byteArray.length / 2)

      //遍历 byteArray,将每两个字节合并成一个短整型
      for (let i = 0; i < byteArray.length; i += 2) {
        shortArray[i / 2] = (byteArray[i] & 0xFF) | (byteArray[i + 1] & 0xFF) << 8;
      }

      const step = 10;

      for (let i = 0; i < shortArray.length; i += step) {
        // console.log(i + "文件short值：" + shortArray[i])
        if (this.mWidth > 0 && this.dataArray.length >= this.mWidth) {
          this.dataArray.shift()
        }
        this.dataArray.push(shortArray[i])
      }

      this.isPlaying = true
      this.draw2();
      this.index += 1;
    },
    stopPlayback() {
      console.log("停止播放-stopPlayback")
      this.isPlaying = false

      clearInterval(this.drawIntervalId)
      const ctx = this.$refs.canvas.getContext('2d')
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
      this.drawGrid(ctx)
    },

    draw2() {
      if (!this.isPlaying) {
        return
      }
      // console.log('开始绘图-draw')

      const ctx = this.$refs.canvas.getContext('2d')
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
      this.drawGrid(ctx)
      this.drawWaveform(ctx)
    },
    drawGrid(ctx) {
      const { width, height } = ctx.canvas
      this.mWidth = ctx.canvas.width
      this.mHeight = ctx.canvas.height

      ctx.strokeStyle = '#ccc'
      ctx.lineWidth = 1

      for (let i = 0; i < height; i += 10) {
        ctx.beginPath()
        ctx.moveTo(0, i)
        ctx.lineTo(width, i)
        ctx.stroke()
      }

      for (let j = 0; j < width; j += 10) {
        ctx.beginPath()
        ctx.moveTo(j, 0)
        ctx.lineTo(j, height)
        ctx.stroke()
      }
    },
    drawWaveform(ctx) {
      ctx.beginPath()
      ctx.lineWidth = 1
      ctx.strokeStyle = '#25ebd7'


      let x = 0
      let len = this.dataArray.length;
      let index = this.mWidth - len;
      for (let i = index + 1; i < this.mWidth; i++) {
        const mCenterY = this.mHeight / 2;
        const y = mCenterY - (this.dataArray[i - index - 1] / (32768 / mCenterY));
        // console.log(`i=${i},position=${i - index - 1},,data=${this.dataArray[i - index - 1]},,y=${y},,mCenterY=${mCenterY}`)
        x = i - 1;

        ctx.lineTo(x, y)
        ctx.stroke()
      }
    },
  }
}
</script>