uniapp使用recorder-core实现H5、App、微信小程序多端适配的录音功能

  1. 在你的项目根目录安装recorder-corenpm install recorder-core --registry=https://registry.npmmirror.com/
  2. 导入Recorder-UniCore组件:插件市场下载本组件,然后添加到你的项目中 /uni_modules/Recorder-UniCore
  3. 在需要录音的vue文件内编写以下代码,按需引入需要的js
<script> /**这里是逻辑层**/
//必须引入的Recorder核心(文件路径是 /src/recorder-core.js 下同),使用import、require都行
import Recorder from 'recorder-core' //注意如果未引用Recorder变量,可能编译时会被优化删除(如vue3 tree-shaking),请改成 import 'recorder-core',或随便调用一下 Recorder.a=1 保证强引用

//必须引入的RecordApp核心文件(文件路径是 /src/app-support/app.js)
import RecordApp from 'recorder-core/src/app-support/app'

//所有平台必须引入的uni-app支持文件(如果编译出现路径错误,请把@换成 ../../ 这种)
import '@/uni_modules/Recorder-UniCore/app-uni-support.js'

/** 需要编译成微信小程序时,引入微信小程序支持文件 **/
// #ifdef MP-WEIXIN
    import 'recorder-core/src/app-support/app-miniProgram-wx-support.js'
// #endif

/** H5、小程序环境中:引入需要的格式编码器、可视化插件,App环境中在renderjs中引入 **/
// 注意:如果App中需要在逻辑层中调用Recorder的编码/转码功能,需要去掉此条件编译,否则会报未加载编码器的错误
// #ifdef H5 || MP-WEIXIN
    //按需引入你需要的录音格式支持文件,如果需要多个格式支持,把这些格式的编码引擎js文件统统引入进来即可
    import 'recorder-core/src/engine/mp3'
    import 'recorder-core/src/engine/mp3-engine' //如果此格式有额外的编码引擎(*-engine.js)的话,必须要加上

    //可选的插件支持项,把需要的插件按需引入进来即可
    import 'recorder-core/src/extensions/waveview'
// #endif

// ... 这后面写页面代码,用选项式API风格(vue2、vue3)、setup组合式API风格(仅vue3)都可以

/**在逻辑层中编写**/
//import ... 上面那些import代码

//var vue3This=getCurrentInstance().proxy; //当用vue3 setup组合式 API (Composition API) 编写时,直接在import后面取到当前实例this,在需要this的地方传vue3This变量即可,其他的和选项式 API (Options API) 没有任何区别;import {getCurrentInstance} from 'vue';详细可以参考Demo项目中的 page_vue3____composition_api.vue

//RecordApp.UniNativeUtsPlugin={ nativePlugin:true };  //App中启用配套的原生录音插件支持,配置后会使用原生插件进行录音,没有原生插件时依旧使用renderjs H5录音
//App中提升后台录音的稳定性:配置了原生插件后,可配置 `RecordApp.UniWithoutAppRenderjs=true` 禁用renderjs层音频编码(WebWorker加速),变成逻辑层中直接编码(但会降低逻辑层性能),后台运行时可避免部分手机WebView运行受限的影响
//App中提升后台录音的稳定性:需要启用后台录音保活服务(iOS不需要),Android 9开始,锁屏或进入后台一段时间后App可能会被禁止访问麦克风导致录音静音、无法录音(renderjs中H5录音也受影响),请调用配套原生插件的`androidNotifyService`接口,或使用第三方保活插件

export default {
data() { return {} } //视图没有引用到的变量无需放data里,直接this.xxx使用

,mounted() {
    this.isMounted=true;
UniApp 是一款基于 Vue.js 的跨平台框架,用于构建原生应用。如果你想通过 UniApp 上传录音文件并以 WAV 格式传递给后台服务器,可以按照以下步骤操作: 1. **音频录制**: 使用 UniApp 提供的 `uni.mediaRecorder` API 来录制用户的语音。确保先获取用户权限,然后创建一个 MediaRecorder 实例。 ```javascript let mediaRecorder; const startRecording = async () => { try { mediaRecorder = await uni.createMediaRecorder({ audio: true, mimeType: 'audio/wav', // 指定 wav 格式 }); mediaRecorder.start(); } catch (error) { console.error('Error starting recording:', error); } }; ``` 2. **数据处理**: 录制完成后,监听 `dataavailable` 或者 `stop` 事件,将录音数据转换成 Blob 对象。 ```javascript mediaRecorder.addEventListener('dataavailable', (event) => { if (event.data.size > 0) { const blob = new Blob([event.data], { type: 'audio/wav' }); // 进行文件压缩或者其他预处理 uploadWAV(blob); // 自定义上传函数 } }); ``` 3. **上传至服务器**: 创建一个上传文件的接口,并使用 UniApp 的 `uni.uploadFile` 函数发送请求到后台。 ```javascript async function uploadWAV(blob) { try { const formData = new FormData(); formData.append('file', blob, 'recording.wav'); // 将 blob 作为 file 附件 const response = await uni.request({ url: '/api/upload', // 后台上传接口地址 method: 'post', data: formData, }); console.log('Upload result:', response.data); } catch (error) { console.error('Upload failed:', error); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值