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 = true
				this.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 = true
				this.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>

不懂留言,如果对你有用记得点个赞呦