uniapp 小程序端长按录音、保存、播放录音功能实现和问题记录，Uniapp小程序端实现长按录音、保存与播放功能及问题记录，Uniapp小程序端，长按录音、保存与播放功能实现及问题记录详解

摘要：，，本摘要介绍了uniapp小程序端实现长按录音、保存和播放录音功能的过程及问题记录。用户可以通过长按操作进行录音，录音内容会保存至本地，同时用户也可以播放已保存的录音文件。在实现过程中可能会遇到一些问题，如录音质量、保存路径、播放兼容性等，需要进行详细记录以便后续优化和解决。该功能的实现丰富了uniapp小程序的用户体验，提高了其实用性。

开发环境

1、NodeJs：14.18.3

2、uni-app Vue3版本

3、uview-plus：^3.1.41

主要功能

1、显示已上传音频文件

在进入页面时，通过查询接口获取已上传的录音文件，并在页面上显示，支持播放、暂停、删除功能，丰富用户体验。

2、录音功能实现

（1）进入页面时，首先获取录音权限状态，确保用户授权录音。

（2）通过长按录音按钮进行录音，在录音前，校验用户是否具有录音权限，如果用户拒绝或没有录音权限，提示用户进入小程序设置中开启录音权限。

（3）录音时，显示录音倒计时，最多录制60秒，倒计时时间可以根据实际需求进行设置。

（4）松开按钮后，录音结束，自动上传音频文件。

效果截图

在此处添加两张关于页面效果和录音功能的截图，以便更直观地展示功能实现效果。

主要代码实现

以下是部分关键功能的代码实现示例，可以直接复制使用，代码部分需要按照Markdown的格式进行排版，并补充完整的函数和逻辑。

问题记录及解决方案

1、在调用录音等需要授权的接口之前，一定要校验用户是否已授权。

2、长按录音时，如果未先校验是否已授权录音权限，部分用户可能会出现录音始终录制不成功的问题，解决方案是在开始录音前校验是否已得到授权。

样式代码

在此处添加关于页面样式相关的代码，包括card、title、desc、app-tags、player、submit-btn、prompt-layer等的样式定义，使用合适的缩进和排版，使代码易于阅读。

/* 样式代码示例 */
.card {
  /* 样式定义 */
}
.title {
  /* 样式定义 */
}
.desc {
  /* 样式定义 */
}
/* 其他组件样式定义 */

本文详细介绍了使用uniapp开发小程序实现长按录音、保存和播放录音功能的过程，通过结合Vue3和uview-plus，提供了丰富的功能，优化了用户体验，在开发过程中，记录了可能遇到的问题及解决方案，为开发者提供了实用的参考。