Implementing Audio Recording and Playback in WeChat Mini Programs with PHP Backend Storage

Overview WeChat Mini Programs provide voice capabilities; this article shows how to record audio, play back recordings, and store the files on a PHP backend.

Recording Function Implementation The recording feature uses the wx.getRecorderManager API, allowing configuration of duration, sample rate, channels, bitrate, and format. The following code demonstrates obtaining the recorder manager, starting a recording, and handling the stop event to retrieve the temporary file path.

<code>// 获取全局唯一的录音管理器 RecorderManager
const recorderManager = wx.getRecorderManager();

// 开始录音
recorderManager.start({
  // 录音时长，默认为60秒
  duration: 60000,
  // 录音采样率
  sampleRate: 44100,
  // 录音通道数
  numberOfChannels: 1,
  // 编码码率
  encodeBitRate: 96000,
  // 音频格式
  format: 'mp3',
});

// 监听录音结束事件
recorderManager.onStop(function (res) {
  // res.tempFilePath 为录音文件的临时路径
  const tempFilePath = res.tempFilePath;
});</code>

The code first obtains the recorder manager instance, starts recording with the desired parameters, and listens for the onStop event to capture the temporary file path for later use.

Playback Function Implementation Playback uses the wx.createInnerAudioContext API. The code creates an inner audio context, sets its source to the recorded file path, and plays it. An onEnded listener handles the end of playback.

<code>// 创建内部音频上下文 innerAudioContext 实例
const innerAudioContext = wx.createInnerAudioContext();

// 播放录音
innerAudioContext.src = 'tempFilePath';
innerAudioContext.play();

// 监听音频播放结束事件
innerAudioContext.onEnded(function (res) {
  // 音频播放结束时的回调函数
});</code>

This snippet shows how to instantiate the audio context, assign the recorded file path, start playback, and react when playback finishes.

Recording Storage Implementation Recorded files are temporary and must be uploaded to a server. The Mini Program uses wx.uploadFile (not shown) to send the file, while the PHP backend receives and saves it. The following PHP code processes the uploaded file and stores it in a designated directory.

<code>if(!empty($_FILES[$filekey])) {
  $file = $_FILES[$filekey]['tmp_name'];
  $filename = $_FILES[$filekey]['name'];
  $filesize = $_FILES[$filekey]['size'];
  $filetype = $_FILES[$filekey]['type'];

  if($file) {
    $filecontent = file_get_contents($file);
    $filename = date('YmdHis') . '_' . $filename;
    $filepath = '/path/to/your/upload/dir/' . $filename;
    file_put_contents($filepath, $filecontent);
  }
}</code>

The PHP script checks for an uploaded file, reads its contents, generates a timestamped filename, and writes the file to a specified directory.

Conclusion By following the steps above, developers can add voice recording and playback to WeChat Mini Programs and persist recordings on a PHP server, enabling richer audio interactions in their applications.