uni-app 播放本地音频和实时获取音频波形数据

在uni-app中播放本地音频并实时获取音频波形数据，可以通过使用uni-app的音频播放组件audio以及canvas绘制波形图来实现。下面是一个基本的代码示例，展示如何实现这两个功能。

1. 播放本地音频

首先，确保你已经在项目中放置了本地音频文件，比如local-audio.mp3。

<template>
  <view>
    <audio
      id="myAudio"
      :src="audioSrc"
      controls
      @timeupdate="onTimeUpdate"
    ></audio>
    <canvas canvas-id="waveformCanvas" style="width: 100%; height: 200px;"></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioSrc: '/static/local-audio.mp3'
    };
  },
  methods: {
    onTimeUpdate(e) {
      // 在这里可以获取音频播放的进度等信息，用于绘制波形图
      this.drawWaveform(e.detail.currentTime);
    },
    drawWaveform(currentTime) {
      // 假设你已经有波形数据，这里使用模拟数据
      const canvas = uni.createCanvasContext('waveformCanvas');
      const width = uni.getSystemInfoSync().windowWidth;
      const height = 200;
      const amplitude = 100; // 振幅

      // 清除画布
      canvas.clearRect(0, 0, width, height);

      // 模拟波形数据
      const data = Array.from({ length: width }, (_, i) => Math.sin((i / width) * 2 * Math.PI) * amplitude);

      // 根据当前播放时间偏移波形
      const offsetX = currentTime * (width / this.audioDuration); // 假设audioDuration在某种方式下已知或计算得出

      data.forEach((value, index) => {
        canvas.lineTo(index + offsetX, height / 2 + value);
      });

      // 绘制
      canvas.stroke();
      canvas.draw();
    }
  },
  onLoad() {
    // 这里可以获取音频的总时长（假设你有办法预先知道，比如通过文件元数据）
    // this.audioDuration = ...;
  }
};
</script>

注意事项

1. 音频元数据：在实际应用中，你可能需要获取音频的总时长（audioDuration），这通常通过读取音频文件的元数据获得。在uni-app中，你可能需要借助第三方库或服务端来处理这个需求。

2. 波形数据：上述示例使用正弦波模拟波形数据。在真实应用中，你需要从音频文件中提取实际的波形数据，这通常涉及较为复杂的音频处理，可能需要使用Web Audio API或其他音频处理库。

3. 性能优化：实时绘制波形图可能会对性能产生影响，特别是在高分辨率或长音频文件的情况下。考虑使用requestAnimationFrame进行动画绘制，以及优化绘制逻辑以减少不必要的重绘。