uni-app实现录音及播放功能

实现录音功能

这里就需要用到uni.getRecorderManager()

大部分是直接搬了官网的代码，但是还是需要记录一下修改的部分

下面这段代码运行在微信小程序上、下面这段代码运行在微信小程序上、下面这段代码运行在微信小程序上

下面这段代码最好运行到微信开发者工具后，然后真机调试，因为小程序直接调试录音会报错

export default {
	data: {
		recorderManager: {},
		innerAudioContext: {},
        voicePath: ''
	},
	onLoad(options) {
		this.recorderManager = uni.getRecorderManager();
		this.innerAudioContext = uni.createInnerAudioContext();
		
		// 为了防止苹果手机静音无法播放
		uni.setInnerAudioOption({  
			obeyMuteSwitch: false  
		})
		
		this.innerAudioContext.autoplay = true;
		
		console.log("uni.getRecorderManager()",uni.getRecorderManager())
		let self = this;
		this.recorderManager.onStop(function (res) {
			console.log('recorder stop' + JSON.stringify(res));
			self.voicePath = res.tempFilePath;
		});
	},
	methods: {
		startRecord() {
			console.log('开始录音');
			this.recorderManager.start();
		},
		endRecord() {
			console.log('录音结束');
			this.recorderManager.stop();
		},
		playVoice() {
			console.log('播放录音');
			console.log('this.voicePath',this.voicePath);

			if (this.voicePath) {
				this.innerAudioContext.src = this.voicePath;
				this.innerAudioContext.play();
			}
		},
	}
}

这一段是苹果手机静音时无法播放

uni.setInnerAudioOption({  
	obeyMuteSwitch: false  
})

这里录音展示是使用了插件luno-audio，

需要引入import luchAudio from '@/components/luch-audio/luch-audio.vue'、注册（在components内注册即可）并使用

<view class="audioPlay">
	<button @tap="startRecord">开始录音</button>
	<button @tap="endRecord">停止录音</button> 
	<button @tap="playVoice">播放录音</button>
</view>


<!--错误部分
<luch-audio 
	v-if="audioContent"
	:src="audioContent" 
	:play.sync="audioPlayNew"
></luch-audio> -->
<!-- 20210226修改 -->
<luch-audio 
	v-if="voicePath"
	:src="voicePath" 
	:play.sync="audioPlayNew"
></luch-audio>

添加后运行即可。

2021年2月9号更新

更新一个uni-app运行到手机h5的写法

下面这段代码最好真机调试、没有直接在浏览器上调试，录音需要授权

下面这段代码最好真机调试、没有直接在浏览器上调试，录音需要授权

下面这段代码最好真机调试、没有直接在浏览器上调试，录音需要授权

<template>
	<view class="audioPlay">
		<button @click="startRecord">开始录音</button>
		<button @tap="endRecord">停止录音</button> 
		<button @tap="playVoice">播放录音</button>
	</view>
</template>
<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				recorderManager: {},
				innerAudioContext: {},
				text: 'uni-app',
				voicePath: ''
			}
		},
		onLoad() {
			innerAudioContext.autoplay = true;
			console.log("uni.getRecorderManager()",uni.getRecorderManager())
			console.log("uni.createInnerAudioContext()",uni.createInnerAudioContext())
			let self = this;
			recorderManager.onStop(function (res) {
				console.log('recorder stop' + JSON.stringify(res));
				self.voicePath = res.tempFilePath;
			});
		    },
		    methods: {
		        startRecord() {
		            console.log('开始录音');
		            recorderManager.start();
		        },
		        endRecord() {
		            console.log('录音结束');
		            recorderManager.stop();
		        },
		        playVoice() {
		            console.log('播放录音');
		            if (this.voicePath) {
		                innerAudioContext.src = this.voicePath;
		                innerAudioContext.play();
		            }
		        }
		    }
	}
</script>

谢谢一位小姐姐提出来的，然后才会有这个H5的写法，emmmmm，因为我很少写H5。

有个  升级版 的uni-app微信小程序 录音上传  uni-app小程序实现录音计时、播放、暂停等功能