uniapp音频录制---波纹循环动画根据时间长短控制长裤

对于uniapp的音频录制，可以使用uniRecorder插件进行录音操作。同时，可以使用uni.createInnerAudioContext()来播放录制的音频文件。

至于波纹循环动画，可以使用uniapp的canvas绘图功能来实现。具体实现步骤如下：

1. 在template文件中添加一个canvas标签，并设置其宽高和id属性。

<canvas id="wave" style="width: 100%; height: 300rpx;"></canvas>

2. 在js文件中获取canvas对象，并设置其属性。

const ctx = uni.createCanvasContext('wave')
const screenWidth = uni.getSystemInfoSync().windowWidth
const screenHeight = uni.getSystemInfoSync().windowHeight
const waveWidth = screenWidth * 0.8
const waveHeight = 100
const waveLeft = (screenWidth - waveWidth) / 2
const waveTop = (screenHeight - waveHeight) / 2

function drawWave(percent) {
  ctx.clearRect(0, 0, screenWidth, screenHeight)
  ctx.setLineWidth(2)
  ctx.setStrokeStyle('#ffffff')
  ctx.beginPath()

  for (let i = 0; i <= waveWidth; i += 20) {
    let x = i + waveLeft
    let y = waveTop + waveHeight / 2 * Math.sin((i / waveWidth) * 2 * Math.PI - percent * 2 * Math.PI)
    ctx.lineTo(x, y)
  }

  ctx.stroke()
  ctx.draw()
}

3. 在录音开始时，使用定时器更新波纹动画。

let timer = null
let startTime = null

uniRecorder.start({
    format: 'mp3'
})

uniRecorder.onStart(() => {
  startTime = Date.now()
  timer = setInterval(() => {
    let duration = Date.now() - startTime
    let percent = duration / 5000  // 5秒循环一次
    drawWave(percent)
  }, 1000 / 60) // 60帧每秒
})

4. 在录音结束时，清除定时器。

uniRecorder.onStop((res) => {
  clearInterval(timer)
  drawWave(0)
  uniRecorder.stop()
})

需要注意的是，在uniapp中，音频录制结束时会返回一个包含音频文件路径的对象。可以使用该路径来播放录制的音频文件，并根据录制时间的长短来控制波纹的长度。具体实现可以在onStop回调函数中进行。

uni.createInnerAudioContext().src = res.tempFilePath
let duration = res.duration  // 音频时长，单位为秒
let waveDuration = Math.min(duration, 5)  // 波纹时长，最长为5秒
let percent = waveDuration / 5  // 计算波纹的百分比
drawWave(percent)

这样就可以实现一个根据录制时间长短控制波纹长度的效果了。