UniApp’s tips and practices for audio playback and recording

UniApp (Universal App) is a cross-platform application development framework that can be used to develop mobile applications, applets and H5 applications based on HTML5. In UniApp, audio playback and recording is a common requirement. This article will introduce some techniques and practices for audio playback and recording, and provide relevant code examples.

1. Audio playback
In UniApp, you can use uni.createInnerAudioContext() to create an audio object. The following is a simple audio playback code example:

// 创建音频对象
const audio = uni.createInnerAudioContext();

// 设置音频源
audio.src = '__STATIC__/audio/sample.mp3';

// 播放音频
audio.play();

// 监听音频播放完成事件
audio.onEnded(() => {
  console.log('音频播放完成');
});

// 监听音频播放错误事件
audio.onError((err) => {
  console.log('音频播放错误', err);
});

In the above code, an audio object is created through the createInnerAudioContext() method. Then, use the src attribute to set the audio source, here using the path to the static resource. Next call the play() method to play the audio. Monitor the audio playback completion event through the onEnded() method. When the audio playback is completed, the callback function will be triggered. Monitor audio playback error events through the onError() method. When an audio playback error occurs, the callback function will be triggered.

2. Audio recording
In UniApp, you can use the uni.startRecord() and uni.stopRecord() methods to achieve audio recording. The following is a simple audio recording code example:

// 开始录制音频
uni.startRecord({
  success: (res) => {
    console.log('音频录制成功', res.tempFilePath);
  },
  fail: (err) => {
    console.log('音频录制失败', err);
  }
});

// 停止录制音频
setTimeout(() => {
  uni.stopRecord();
}, 5000);

In the above code, audio recording is started through the startRecord() method. The startRecord() method receives an object as a parameter, and the success and fail attributes can be defined in the object. When the audio recording is successful, the success function will be called, and res.tempFilePath contains the recorded audio temporary file path. When audio recording fails, the fail function will be called, and the err parameter contains error information.

Set a 5-second delay through the setTimeout() method, and then call the stopRecord() method to stop recording audio.

3. Summary
This article introduces the techniques and practices of audio playback and recording in UniApp, and provides relevant code examples. Create an audio object through the createInnerAudioContext() method, set the audio source and play the audio, monitor the audio playback completion event through the onEnded() method, and monitor the audio playback error event through the onError() method. Start recording audio through the startRecord() method, and stop recording audio through the uni.stopRecord() method. I hope this article will help you implement audio playback and recording in UniApp.

The above is the detailed content of UniApp’s tips and practices for audio playback and recording. For more information, please follow other related articles on the PHP Chinese website!