# UniappRecorderManager

**Repository Path**: scenario-samples/uniapp-recorder-manager

## Basic Information

- **Project Name**: UniappRecorderManager
- **Description**: 本文展示了基于Uni-app实现音频录制、停止录音和播放录音。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-11
- **Last Updated**: 2025-12-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## Uniapp实现开始录音、停止录音和播放录音。
## 简介
*本文展示了基于Uni-app实现音频录制、停止录音和播放录音。*

## 效果预览

<img src='screenshots/img.png' width="200">
<img src='screenshots/img_1.png' width="200">

##  使用说明
1. 使用HBuilderX打开本示例，然后将下载好的“App权限判断和提示”插件安装进项目的uni_modules文件夹中。
2. 在App.vue应用配置中导入插件import 'uni_modules/xxxxx'。
3. harmony是鸿蒙工程定制化配置目录，需要在里面的module.json文件中添加麦克风权限声明，文件路径为：harmony-configs/entry/src/main/module.json5。
4. Uniapp有自己的音频管理器，uni.getRecorderManager()。


## 实现思路
1. Uniapp使用录音管理[recorderManager](https://uniapp.dcloud.net.cn/api/media/record-manager.html#getrecordermanager)可以实现音频录制和停止录音，同时使用内部audio上下文[innerAudioContext](https://uniapp.dcloud.net.cn/api/media/audio-context.html#createinneraudiocontext)可以实现播放录音。参考如下：
```Vue
console.info('hello0');
const recorderManager = uni.getRecorderManager();
console.info('hello1');
const innerAudioContext = uni.createInnerAudioContext();
console.info('hello2');
innerAudioContext.autoplay = true;
const text = 'uni-app';
let voicePath = '';
const startRecord = () => {
  console.info('startRecord');
  recorderManager.start();
}
const endRecord = () => {
  console.info('endRecord');
  recorderManager.stop();
}
const playVoice = () => {
  console.info(`playVoice. voicePath = ${voicePath}`);
  if (voicePath) {
    innerAudioContext.src = voicePath;
    innerAudioContext.play();
  }
}
onLoad(() => {
  recorderManager.onStop(function(res) {
    console.info(`recorder stop. ${JSON.stringify(res)}, res.tempFilePath = ${res
      .tempFilePath}`);
    voicePath = res.tempFilePath;
  });
})
```
2. 录音需要使用麦克风权限，[Uniapp官网](https://uniapp.dcloud.net.cn/api/other/authorize.html#authorize)提供了[App平台的授权判断方式](https://ext.dcloud.net.cn/plugin?id=594)，需要先下载插件导入HBuilder中，再将插件导入项目。

3. 导入插件的checkPermission和requestPermissions方法。
```Vue
import {
  checkPermission,
  requestPermissions
} from '@/uni_modules/permission-handler-plus'
```
4. 首先检查应用是否拥有麦克风权限，再向用户授权使用麦克风。
```Vue
const addPermission = () => {
  // 检查授权信息
  checkPermission("Microphone", (result) => {
    console.info(result)
    if (result == "denied") {
      // 向用户申请授权
      requestPermissions({
        names: ["Microphone"],
        success: (result) => {
          console.info(result)
        },
        fail: (error) => {
          console.error(error)
        }
      })
    }
  })
}
```


## 工程目录
```
├─App.vue                                   // 应用配置，用来配置App全局样式以及监听、应用生命周期
├─index.html                                // 用于web加载渲染的root节点
├─main.js                                   // Vue初始化入口文件
├─manifest.json                             // 应用相关配置
├─pages.json				                // 配置页面路由、导航条、选项卡等页面类信息
├─uni.scss                                  // 内置的常用样式变量
├─harmony-configs		                    // 鸿蒙工程定制化配置目录，每次编译执行HBuilderX都会检查这个目录，如果目录不存在则会自动创建。
│  └─entry
│      └─src
│          └─main
│              └─module.json5               // 应用配置文件，配置requestPermissions等信息
│              └─resources 		            // 资源文件目录，会自动覆盖掉编译uni-app生成鸿蒙工程中的同名文件
├─pages
│  └─index
│      └─index.vue			                // 首页
│          
├─static				                    // 静态资源文件
└─uni_modules                               // 插件目录，用于存放uniapp的插件
```

## 涉及权限
- 麦克风权限：ohos.permission.MICROPHONE

## 约束与限制
+ 本示例支持API Version 20 Release及以上版本。
+ 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
+ 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。