微信小程序音频录制---波纹循环动画

对于微信小程序的音频录制，可以使用wx.getRecorderManager()来进行录音操作。同时，可以使用wx.createInnerAudioContext()来播放录制的音频文件。

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

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

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

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

const ctx = wx.createCanvasContext('wave')
const screenWidth = wx.getSystemInfoSync().windowWidth
const screenHeight = wx.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

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

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

wx.getRecorderManager().onStop(() => {
  clearInterval(timer)
  drawWave(0)
})

这样就可以实现一个简单的波纹循环动画了。需要注意的是，由于小程序的canvas只支持2d绘图，所以波纹的效果只能是平面的。如果需要实现3d效果，可以考虑使用WebGL等技术。