微信小程序开发之录音机 音频播放 动画实例

1. 前言

随着移动互联网的快速发展，微信小程序越来越受到人们的关注和使用。微信小程序具有轻便、快速、无需下载等优点，因此在各行各业都被广泛使用。本文将介绍如何在微信小程序中开发录音机音频播放动画，让我们一起来看看。

2. 录音机实现步骤

2.1 获取录音授权

获取录音授权是实现录音机的第一步。在微信小程序中，我们可以通过wx.authorize方法获取授权。该方法需要传递类型“scope.record”，当用户允许授权后，我们就可以调用微信小程序提供的API实现录音功能。

wx.authorize({
  scope: 'scope.record',
  success () {
    console.log('授权成功')
  },
  fail () {
    console.log('授权失败')
  }
})

2.2 录音

获取录音授权后，我们就可以开始录音了。在微信小程序中，我们可以使用wx.startRecord和wx.stopRecord方法实现录音功能。

var recorderManager = wx.getRecorderManager()
// 开始录音
recorderManager.start({
  format: 'mp3'
})
        
// 停止录音
recorderManager.stop()

2.3 播放音频

录音成功后，我们可以使用wx.playVoice方法播放音频。该方法需要传递音频文件的路径。

// 播放音频
wx.playVoice({
  filePath: res.tempFilePath
})

2.4 实现动画效果

为了让录音机更加生动有趣，我们可以实现一个动画效果。具体实现过程如下：

利用标签作为动画的图片载体

使用CSS3中的animation属性实现动画

在动画执行时，修改图片的src属性实现动态图片效果

/* 动画实现 */
@keyframes voice {
  to {
    transform: scaleX(1.2) scaleY(1.2);
  }
}
.voice-animated {
  animation: voice .8s ease-in-out infinite alternate-reverse;
}

// 修改图片的src属性
var voiceAnimation = wx.createAnimation({
  duration: 1000,
  timingFunction: 'linear'
})
voiceAnimation.rotate(10).step()
this.setData({
  voiceAnimation: voiceAnimation.export(),
  voiceUrl: '/images/voice2.gif'
})

3. 完整代码

下面是完整的代码：

Page({
  data: {
    isRecording: false, // 判断是否正在录音的标识
    voiceUrl: '/images/voice1.png', // 录音机图片路径
    voiceAnimation: {}, // 录音机动画
    voiceData: {} // 录音数据
  },
  // 授权录音
  authorizeRecord: function() {
    wx.authorize({
      scope: 'scope.record',
      success () {
        console.log('授权成功')
      },
      fail () {
        console.log('授权失败')
      }
    })
  },
  // 开始录音
  startRecord: function() {
    var that = this
    this.setData({
      isRecording: true
    })
    // 修改图片的src属性
    var voiceAnimation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'linear'
    })
    voiceAnimation.rotate(10).step()
    this.setData({
      voiceAnimation: voiceAnimation.export()
    })
    // 开始录音
    var recorderManager = wx.getRecorderManager()
    recorderManager.onStart(function(res) {
      console.log("开始录音")
    })
    recorderManager.start({
      format: 'mp3'
    })
  },
  // 停止录音
  stopRecord: function() {
    var that = this
    this.setData({
      isRecording: false
    })
    // 修改图片的src属性
    var voiceAnimation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'linear'
    })
    voiceAnimation.rotate(-10).step()
    this.setData({
      voiceAnimation: voiceAnimation.export(),
      voiceUrl: '/images/voice1.png'
    })
    // 停止录音
    var recorderManager = wx.getRecorderManager()
    recorderManager.onStop(function(res) {
      console.log("停止录音")
      that.setData({
        voiceData: res
      })
    })
    recorderManager.stop()
  },
  // 播放录音
  playVoice: function() {
    var that = this
    var voiceData = this.data.voiceData
    wx.playVoice({
      filePath: voiceData.tempFilePath
    })
    // 修改图片的src属性
    var voiceAnimation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'linear'
    })
    voiceAnimation.rotate(-10).step()
    
    that.setData({
      voiceAnimation: voiceAnimation.export(),
      voiceUrl: '/images/voice1.png'
    })
  }
})

4. 总结

本文介绍了如何在微信小程序中开发录音机音频播放动画。通过本文的学习，您应该对微信小程序的开发有了更深入的了解，同时也对录音机音频播放动画的实现有了更深刻的理解。