微信小程序实现录音时的麦克风动画效果实例

微信小程序实现录音时的麦克风动画效果实例

录音时麦克风动画效果是一种常见的交互体验，在微信小程序中实现也非常简单。下面详细讲解如何实现。

1. 获取用户录音授权

首先，我们要先获取用户录音的授权。在小程序中，可以通过调用 wx.getSetting 方法获取用户是否授权录音的状态。如果用户未授权，则可以通过 wx.authorize 方法请求授权。

示例代码如下:

wx.getSetting({
  success(res) {
    if (!res.authSetting['scope.record']) {
      wx.authorize({
        scope: 'scope.record',
        success() {
          console.log('授权成功')
        },
        fail() {
          console.log('授权失败')
        }
      })
    }
  }
})

2. 调用录音接口实现录音

获取用户授权后，我们可以调用小程序提供的录音接口进行录音。调用录音接口时，可以传入一个回调函数，在录音过程中触发这个回调函数，对录音的状态进行处理。

下面是一个示例代码，记录了录音的开始、暂停和结束状态。

Page({
  data: {
    recordStatus: 'stop' // 记录录音状态
  },
  startRecord() {
    const recorderManager = wx.getRecorderManager();
    recorderManager.onStart(() => {
      console.log('开始录音')
      this.setData({
        recordStatus: 'recording'
      })
    });
    recorderManager.onResume(() => {
      console.log('恢复录音')
      this.setData({
        recordStatus: 'recording'
      })
    });
    recorderManager.onPause(() => {
      console.log('暂停录音')
      this.setData({
        recordStatus: 'paused'
      })
    });
    recorderManager.onStop((res) => {
      console.log('结束录音', res.tempFilePath)
      this.setData({
        recordStatus: 'stop'
      })
    });
    const options = {
      duration: 30000, // 最长录音时长，单位 ms，超过后自动停止录音，默认为 60000
      sampleRate: 44100, // 采样率，有效值 8000/16000/44100，默认为 44100
      numberOfChannels: 1, // 录音通道数，有效值 1/2，默认为 1
      encodeBitRate: 192000, // 编码码率，有效值见下表格，默认为 192000
      format: 'mp3', // 音频格式，有效值 aac/mp3，默认为 aac
      frameSize: 50, // 每一帧的采样数
    };
    recorderManager.start(options);
  },
  pauseRecord() {
    const recorderManager = wx.getRecorderManager();
    recorderManager.pause();
  },
  stopRecord() {
    const recorderManager = wx.getRecorderManager();
    recorderManager.stop();
  }
})

3. 实现麦克风动画效果

最后，我们来实现麦克风动画效果。我们可以利用小程序提供的 wx.createAnimation 方法和 setData 方法实现。

具体实现过程如下：

1. 在 wxml 文件中添加一个图标用于表示麦克风：

<icon type="voice" class="icon" bindtap="startRecord"></icon>

1. 在 wxss 文件中，定义麦克风图标的样式，并定义几个关键帧作为动画的效果。

.icon {
  color: #bcbcbc;
  font-size: 80rpx;
  animation: scale 1s linear infinite;
  transform-origin: center center;
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.recording {
  color: #f00;
  animation-play-state: running;
}

1. 在 js 文件中，使用 wx.createAnimation 创建麦克风动画，并在录音状态改变时触发动画。

Page({
  data: {
    recordStatus: 'stop', // 记录录音状态
    micAnimation: {}, // 存储麦克风动画
  },
  onLoad() {
    this.micAnimation = wx.createAnimation({
      duration: 1000,
      timingFunction: "ease-out",
      delay: 0,
      transformOrigin: "50% 50% 0",
    })
  },

  startRecord() {
    // 记录状态
    this.setData({
      recordStatus: 'recording'
    });

    // 开始动画
    this.micAnimation.scale(1.2).step();
    this.setData({
      micAnimation: this.micAnimation.export()
    });

    // 开始录音
    // ...
  },

  pauseRecord() {
    // 记录状态
    this.setData({
      recordStatus: 'paused'
    });

    // 暂停动画
    this.micAnimation.scale(1.0).step();
    this.setData({
      micAnimation: this.micAnimation.export()
    });

    // 暂停录音
    // ...
  },

  stopRecord() {
    // 记录状态
    this.setData({
      recordStatus: 'stop'
    });

    // 停止动画
    this.micAnimation.scale(1.0).step();
    this.setData({
      micAnimation: this.micAnimation.export()
    });

    // 停止录音
    // ...
  },
})

这样，我们就实现了一个录音时的麦克风动画效果。