先看下 dom 节点部分：

<Text>上传语音</Text>
<Text
  onLongPress={this.handleRecordStart}
  onTouchend={this.handleRecordStop}
>
  长按说话
</Text>
复制代码

其中就两个事件：handleRecordStart 和 handleRecordStop。他们分别是长按时触发和手指松开时触发。

简单实现：

// longpress （长按）时触发
handleRecordStart(e) {
  this.setState({
    record: {
      // 修改录音数据结构，此时录音按钮样式会发生变化。
      text: '松开保存',
      type: 'recording'
    }
  })
  // 开始录音
  this.recorderManager.start({
    duration: 60000,
    sampleRate: 44100,
    numberOfChannels: 1,
    encodeBitRate: 192000,
    format: 'mp3',
    frameSize: 50
  }) 
  Taro.showToast({
    title: '正在录音',
    duration: 60000,
    icon: 'none'
  })
}

// touchend （手指松开）时触发
handleRecordStop() {
  // 复原在 start 方法中修改的录音的数据结构
  this.setState({
    record: {
      text: '长按录音',
      type: 'record'
    }
  })
  // 结束录音、隐藏 Toast 提示框
  wx.hideToast() 
  // 结束录音
  this.recorderManager.stop() 
}
复制代码

这里用了一个 record 对象来记录录音的状态。

注意 recorderManager.start 方法的参数中， duration 指录音时长，这里设置为 60000 ms；format 值为 mp3，意思录音得到的音频文件为 mp3 格式。

温馨提示：最初开发没有设置成格式化为 mp3，导致后台同事增加了工作量（将 m4a 转换成 mp3），这里建议前端直接处理，很方便。

3.1 录音播放

说到音频播放，大家第一时间可能想到的是 Audio 标签，然后给其中的 src 属性动态赋值就好了。没错，PC 端确实是这样。但是小程序比较坑，如下图：

音频播放这里，我们选用了 wx.createInnerAudioContext() 接口。

温馨提示：如果音频上传到后台之后可以返回 .mp3 结尾的 url 链接（例如：http://47.104.167.164/faceVideo/result_2020_07_21_12_33_43.mp3），可以考虑直接利用 wx.createInnerAudioContext() 的 play() 方法实现播放。

由于部分原因，我们后台上传音频文件后，返回的链接是一个云文件 ID（指浏览器打开可以下载此 mp3 文件）。而且经过测试发现，安卓端可以直接播放，IOS 端直接播放没有声音。

然后，请教了一下我们组的架构师，决定将文件先下载下来，然后保存到手机本地，最后播放（经过测试方案可行）。

我们直接看代码：

// 小程序音频播放 api
innerAudioContext = wx.createInnerAudioContext()

// 下载音频文件
downloadFile() {
  const FileSystemManager = wx.getFileSystemManager()
  const { voiceUrl } = this.state
  wx.downloadFile({
    url: voiceUrl,
    header: { 'Content-type': 'audio/mp3' },
    success: res => {
      // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
      if (res.statusCode === 200) {
        FileSystemManager.saveFile({
          tempFilePath: res.tempFilePath,
          // 文件地址为手机本地
          filePath: `${wx.env.USER_DATA_PATH}/${new Date().getTime()}.mp3`,
          success: result => {
            if (result.errMsg == 'saveFile:ok') {
              this.registerAudioContext(result.savedFilePath)
            }
          }
        })
      }
    }
  })
}

// 注册音频控件
registerAudioContext(path) {
  this.innerAudioContext.src = http://www.wxapp-union.com/path
  this.innerAudioContext.play()
  // 避开 IOS 端静音状态没法播放的问题
  this.innerAudioContext.obeyMuteSwitch = false
  this.innerAudioContext.onEnded(res => {
    // isPlaying 记录是否在播放中
    this.setState({ isPlaying: false })
    this.innerAudioContext.stop()
  })
  this.innerAudioContext.onError(res => {
    // 播放音频失败的回调
  })
  this.innerAudioContext.onPlay(res => {
    // 开始播放音频的回调
  })
  this.innerAudioContext.onStop(res => {
    // 播放音频停止的回调
  })
}
复制代码

这里做了两件事情：

• 用 wx.downloadFile() 接口将文件下载下来，注意参数中 header 属性， Content-type 值为 audio/mp3。即将此文件识别为音频类文件。这里用到微信里的文件管理器 wx.getFileSystemManager() ，接口中的 saveFile() 方法可以把文件保存到本地
• 用 wx.createInnerAudioContext() 的 play() 方法播放存在本地的音乐 mp3 文件

这里考虑到播放完之后，存在手机的录音文件会越来越多。我们想想办法，做一做性能优化工作。也就是在恰当的时机清楚多余文件。

代码如下：

componentWillUnmount() {
  this.clearDir()
}

// 删除下载的音频文件
clearDir() {
  const FileSystemManager = wx.getFileSystemManager()
  const __dirPath = wx.env.USER_DATA_PATH
  FileSystemManager.readdir({
    dirPath: __dirPath,
    success: res => {
      const { errMsg, files } = res
      if (errMsg == 'readdir:ok') {
        files.forEach(item => {
          FileSystemManager.unlink({
            filePath: `${__dirPath}/${item}`
          })
        })
      }
    }
  })
}
复制代码

梳理一下：

用 wx.getFileSystemManager() 接口中 readdir() 方法读取到指定目录（wx.env.USER_DATA_PATH）的所有文件。在其读取成功的回调中做一个 forEach 循环，然后用 unlink() 删除文件。最后将此方法放在生命周期 componentWillUnmount 中调用。

小程序的录音和播放都简单的介绍了，这里也拓展一下。说一说 PC 端比较原始的音频播放方法。

项目中没有引用播放器插件，这里直接用 audio 标签来实现。 html 的部分如下：

const { voice_url, isPlaying } = this.state;

return (
  <>
    <p>
      <span>音频：</span>
      <Button onClick={this.onBtnClick}>{isPlaying ? '停止' : '播放'}</Button>
    </p>

    <audio
      id={`audio`}
      src={voice_url}
      autoPlay={true}
      ref={this.audioRef}
      preload={'auto'}
      onCanPlay={() => {}}
      onTimeUpdate={() => {}}>
      <track src={voice_url} kind='captions' />
    </audio>
  </>
)
复制代码

然后看下 PC 端解析播放部分，和小程序原理差不多，先下载，后播放。代码如下：

// 播放或者暂停
onBtnClick = () => {
  const { isPlaying } = this.state;
  // 区分播放还是暂停
  if (isPlaying) {
    this.audioRef.current.pause();
  } else {
    this.downloadFile();
  }
  this.setState({ isPlaying: !isPlaying });
};

// 下载文件
downloadFile = () => {
  const { download_url } = this.state;
  axios.get(download_url as string, { responseType: 'blob' }).then((res: any) => {
    const reader = new FileReader();
    const data = http://www.wxapp-union.com/res.data;
    reader.onload = e => {
      this.executeDownload(data);
    };
    reader.readAsText(data);
  });
};

// 在浏览器上预览音频文件
executeDownload = (data: any) => {
  if (!data) {
    return;
  }
  // 将文件转化音频流的链接
  const url = window.URL.createObjectURL(new Blob([data], { type: 'audio/mp3' }));
  // 前端存储这个链接
  this.setState({ voice_url: url });
};
复制代码

梳理：

• 创建 audio 标签作为音频播放的容器
• 点击页面的播放按钮触发文件下载方法
• 通过 axios 下载资源文件，用 new FileReader() 读取文件，并且在文件完全加载时，利用 window.URL.createObjectURL() 方法生成可以在浏览器上预览音频文件的链接
• audio 监听到 src 属性的变化时，会自动播放出声音