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

这里就需要用到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();
			}
		},
	}
}

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