js录音支持h5 pc ios android

最近在做h5录音的页面要求可暂停录音,继续录音，写好后发现不兼容ios,无奈只能找兼容方法，找了一天也没找到，后来看到一个网站在ios上可以暂停录音，后来引入他的js文件果然能用了

网站放下面了

Recorder H5: 用于html5网页中的前端录音解决方案，此录音插件支持mp3 wav pcm amr ogg webm格式，支持实时上传 语音识别 音频可视化 实时处理，可在PC端 移动端 Android iOS 原生App中跨平台使用https://xiangyuecn.gitee.io/recorder/这是他的gitee地址Recorder: html5 js 录音 mp3 wav ogg webm amr 格式，支持pc和Android、iOS部分浏览器、Hybrid App（提供Android iOS App源码）、微信，提供ASR语音识别转文字 H5版语音通话聊天示例 DTMF编码解码https://gitee.com/xiangyuecn/Recorder

接下来说一下实现步骤,先把项目克隆下来

 1.使用script标签引入recorder.mp3.min.js这个文件

2.封装成组件使用,大家看源码吧,我是用uniapp写的

<template><view class=""><u-toast ref="uToast" /></view>
</template>
<script>import '../recorder.mp3.min.js'export default {data() {return {rec: null}},methods: {getRecorderManager(success) {//初始化Recorder.ConnectEnableWorklet = truethis.rec = Recorder({type: "mp3",sampleRate: 16000,bitRate: 16,onProcess: (buffers, powerLevel, bufferDuration, bufferSampleRate, newBufferIdx, asyncEnd) => {//录音实时回调，大约1秒调用12次本回调，buffers为开始到现在的所有录音pcm数据块(16位小端LE)//可实时绘制波形（extensions目录内的waveview.js、wavesurfer.view.js、frequency.histogram.view.js插件功能）//可利用extensions/sonic.js插件实时变速变调，此插件计算量巨大，onProcess需要返回true开启异步模式//可实时上传（发送）数据，配合Recorder.SampleData方法，将buffers中的新数据连续的转换成pcm上传，或使用mock方法将新数据连续的转码成其他格式上传，可以参考文档里面的：Demo片段列表 -> 实时转码并上传-通用版；基于本功能可以做到：实时转发数据、实时保存数据、实时语音识别（ASR）等}});this.rec.open(() => { //打开麦克风授权获得相关资源this.$emit('start', true)//rec.start() 此处可以立即开始录音，但不建议这样编写，因为open是一个延迟漫长的操作，通过两次用户操作来分别调用open和start是推荐的最佳流程success && success();}, (msg, isUserNotAllow) => { //用户拒绝未授权或不支持this.$emit('start', false)});},start() {//开始录音this.rec.start()this.$emit('vicoGetRecording', true)},stop() {//停止录音this.rec.stop((blob, duration) => {let localUrl = URL.createObjectURL(blob)const recorder = {data: blob,duration,localUrl,}console.log(recorder);this.$emit('success', recorder)this.$emit('vicoSuccess', recorder)})},pause() { //暂停if (this.rec) {this.rec.pause();};},resume() { //继续if (this.rec) {this.rec.resume();};},close(){//完全关闭if (this.rec) {this.rec.close();}},cancel() { //取消录音if (this.rec) {this.rec.close();}Recorder.ConnectEnableWorklet = truethis.rec = Recorder({type: "mp3",sampleRate: 16000,bitRate: 16,onProcess: (buffers, powerLevel, bufferDuration, bufferSampleRate, newBufferIdx, asyncEnd) => {//录音实时回调，大约1秒调用12次本回调，buffers为开始到现在的所有录音pcm数据块(16位小端LE)//可实时绘制波形（extensions目录内的waveview.js、wavesurfer.view.js、frequency.histogram.view.js插件功能）//可利用extensions/sonic.js插件实时变速变调，此插件计算量巨大，onProcess需要返回true开启异步模式//可实时上传（发送）数据，配合Recorder.SampleData方法，将buffers中的新数据连续的转换成pcm上传，或使用mock方法将新数据连续的转码成其他格式上传，可以参考文档里面的：Demo片段列表 -> 实时转码并上传-通用版；基于本功能可以做到：实时转发数据、实时保存数据、实时语音识别（ASR）等}});this.rec.open(() => { //打开麦克风授权获得相关资源success && success();}, (msg, isUserNotAllow) => { //用户拒绝未授权或不支持this.$emit('start', false)});}}}
</script>

 调用组件

<template><view class="content"><button type="primary" @click="start">录音</button><button type="primary" @click="pause">暂停</button><button type="primary" @click="resume">继续</button><button type="primary" @click="stop">结束</button><button type="primary" @click="cancel">清空当前录音，重新录制</button><button type="primary" @click="close">关闭录音,释放资源</button><vico @start="vicoStart" @vicoSuccess="luyinSuccess" ref='vicoRecorder'></vico></view>
</template><script>import vico from './testluyin/testluyin.vue'export default {components: {vico},data() {return {}},methods: {vicoStart(isUserMedia) {// 获取语音权限if (isUserMedia) {//有录音权限} else {this.$refs.uToast.show({title: '用户拒绝了录音请求!',type: 'error',})}},start() { //开始this.$refs.vicoRecorder.start()},pause() { //暂停this.$refs.vicoRecorder.pause()},resume() { //继续this.$refs.vicoRecorder.resume()},stop() { //完成this.$refs.vicoRecorder.stop()},cance(){//清空当前录音，重新录制this.$refs.vicoRecorder.cancel()},close() {//完全关闭this.$refs.vicoRecorder.close()},luyinSuccess(data){//录音成功回来的文件console.log(data);}},}
</script>

不懂留言