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

实现录音功能

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

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

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

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

这里录音展示是使用了插件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>