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

柔情只为你懂 2022-12-22 13:30 1011阅读 0赞

实现录音功能

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

大部分是直接搬了[官网][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内注册即可）并使用

添加后运行即可。

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小程序实现录音计时、播放、暂停等功能][uni-app]

[uni.getRecorderManager]: https://uniapp.dcloud.io/api/media/record-manager?id=getrecordermanager
[luno-audio]: https://ext.dcloud.net.cn/plugin?id=480
[uni-app]: https://blog.csdn.net/a18792627168/article/details/116759156