uniapp实现h5录音功能

uniapp录音功能是不支持h5的，很多小伙伴可能会遇到在h5实现不了录音功能。下面我将为大家介绍一种我亲测的在uniapp实现h5中的录音。

recorder-core的使用方式：
1、先通过npm安装，然后通过import/require引入

//通过npm安装
npm install recorder-core

(1)引入方式1

//通过import/require引入
//必须引入的核心，换成require也是一样的。注意：recorder-core会自动往window下挂载名称为Recorder对象，全局可调用window.Recorder，也许可自行调整相关源码清除全局污染
import Recorder from 'recorder-core'//需要使用到的音频格式编码引擎的js文件统统加载进来
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine'

（2）引入方式2

<script src="你项目中的路径/src/recorder-core.js"></script> <!--必须引入的录音核心-->
<script src="你项目中的路径/src/engine/mp3.js"></script> <!--相应格式支持文件-->
<script src="你项目中的路径/src/engine/mp3-engine.js"></script> <!--如果此格式有额外的编码引擎的话，也要加上-->
<script src="你项目中的路径/src/extensions/waveview.js"></script>  <!--可选的扩展支持项-->

2、通过HbuildX开发的小伙伴，可以在uniapp插件市场找到搜recorder-core，然后使用HbuildX导入，导入完成后也是要通过import/require引入使用的（引入方式跟上面一样）

3、也是在uniapp插件市场去下载到项目中去

我自己的录音案例：

//开始录音的方法
uploadRecord() {// 开始录音var This = this;This.touchStart = true;var rec = this.rec = Recorder({type: This.typeis,bitRate: This.bitRate,sampleRate: This.sampleRate,onProcess: function(buffers, powerLevel, duration, sampleRate) {This.duration = duration;This.powerLevel = powerLevel;}});rec.open(function() {uni.showToast({title:'开始录音',icon:'none'})console.log('开始录音')This.rec.start();This.reclog("已打开:" + This.type + " " + This.sampleRate + "hz " + This.bitRate + "kbps", 2);}, function(msg, isUserNotAllow) {// This.dialogCancel();console.log(msg, isUserNotAllow)This.reclog((isUserNotAllow ? "UserNotAllow，" : "") + "打开失败：" + msg, 1);});This.waitDialogClickFn = function() {// This.dialogCancel();This.reclog("打开失败：权限请求被忽略，用户主动点击的弹窗", 1);};},

//结束录音的方法
h5btn_sub_stop() {console.log(123123)var This = this;This.touchStart = false;var rec = This.rec;This.rec = null;if (!rec) {This.reclog("未打开录音", 1);wx.showToast({title:'未开始录音'})return;}rec.stop(function(blob, duration) {var reader = new FileReader();reader.addEventListener("load", function() {console.log(reader)if (reader.result.length > 100) {This.he_show = true}}, false);reader.readAsDataURL(blob);console.log(blob,duration,'blob')let blobURL = window.URL.createObjectURL(blob)console.log(blobURL,'--------')uni.uploadFile({file: blob,name: 'file',formData:{file:blob},url:'https:xxxxxxxx/api/Upload/Upload',//上传录音的接口success: function(res) {var resData = res;if (resData.statusCode == 200) {This.audioSrc = res.data} else {uni.showToast({title: '文件上传过大',icon: 'none'})}},fail(e) {console.log(e,'失败原因')uni.showToast({title: '上传失败',icon: 'none'})},complete() {uni.hideLoading();}})}, function(s) {This.reclog("结束出错：" + s, 1);}, true); //自动close},

h5 使用recorder-core 用于html5录音 GitHub: https://github.com/xiangyuecn/Recorder

uniapp实现h5录音功能相关推荐

uni-app:实现H5的录音功能，并上传到服务器
uni-app:实现H5的录音功能在H5中录音有很大的限制,需要在https的域名下或者localhost本地下才可不然会报错 <view><button @tap=" ...
Thinkphp5.1允许uni-app的H5跨域请求接口解决方法
Thinkphp5.1允许uni-app的H5跨域请求接口解决方法参考文章: (1)Thinkphp5.1允许uni-app的H5跨域请求接口解决方法 (2)https://www.cnblogs. ...
uniapp 开发h5 优化加载速度
uniapp 开发h5 优化加载速度 1.选择manifest.json.点击H5配置.勾选发行时启用摇树优化这个功能可以减少网站体积加快首页渲染速度 2.配置nginx服务器,启用gzip压缩,示 ...
uniapp项目H5端横屏问题-样式错乱+字体大小+video
项目场景: 项目场景:uniapp项目 H5端,由于用户手机打开了旋转模式,横屏的话H5会变形,之前设计没做这方面的样式兼容. 问题描述: 部分用户手机打开了旋转之后,打开H5会有样式混乱问题. 原因 ...
uniapp开发h5微信授权登录(详细教程)
uniapp开发h5微信授权登录文章目录 uniapp开发h5微信授权登录前言一.前期准备--申请测试账号二.正式开发--前端代码三.打包发布总结前言我也是第一次做h5授权微信登录,网 ...
uniapp 在h5 模式下扫码
uniapp 在h5下是不支持扫码功能只能自己找api去搞 qrcode.js 解析二维码(源码)https://blog.csdn.net/z_jing0927/article/details/1 ...
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
DIY官网一站式婚庆案例实战,可视化设计导出微擎.UNIAPP.H5.微信小程序源码. 这里将给大家展示演示出来的所有不同类型演示. DIY官网一站式婚庆案例实战官网在线演示例子一站式婚庆服务公司后 ...
uniapp中h5网页微信公众号授权
uniapp微信网页授权 uniapp中h5网页微信公众号授权主要代码获取code返回的code截取代码 uniapp中h5网页微信公众号授权微信官方文档–>网页授权 uniapp中h5网 ...
UNIAPP中H5微信登录
UNIAPP中H5微信登录 UNIapp中自带封装好的接口,但是在打包成H5中,微信登录对于新手来说网上教程比较少,大部分是分享的教程 H5微信登录之前你需要先在微信公众平台配置js接口安全域名,切记 ...

uniapp实现h5录音功能

uniapp实现h5录音功能

uniapp实现h5录音功能相关推荐

最新文章

热门文章