uniapp录音功能

录音功能需要使用到uniapp官方文档里面的API

模版区

javascript 复制代码
<template>
	<view>
		<button @tap="startRecord">开始录音</button>
		<button @tap="endRecord">停止录音</button>
		<button @tap="playVoice">播放录音</button>
	</view>
</template>

js

javascript 复制代码
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
 
innerAudioContext.autoplay = true;
 
export default {
	data() {
		return {
			text: 'uni-app',
			voicePath: ''
		}
	},
	onLoad() {
		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();
			}
		}
	}
}

现在就是可以进行一个简单的录音,暂停以及播放,再根据需求进行更改即可

还有需要注意的就是在进行真机调试的时候需要判断用户是否打开了录音权限

javascript 复制代码
uni.authorize({
					scope: 'scope.record',
					success() {
						recorderManager.start({
							format: 'mp3'
						});
						t.getTimeInterval();
						uni.setInnerAudioOption({
							obeyMuteSwitch: false
						})
					},
					fail() {
						uni.showModal({
							content: '检测到您没打开录音功能权限,是否去设置打开?',
							confirmText: "确认",
							cancelText: '取消',
							success(res) {
								recorderManager.start();
								t.time = setInterval(this.timer, 50)
							}
						})
					}
				})
相关推荐
web守墓人43 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
为风而战44 分钟前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
longze_75 小时前
Ubuntu连接不上网络问题(Network is unreachable)
linux·服务器·ubuntu
Dirschs5 小时前
【Ubuntu22.04安装ROS Noetic】
linux·ubuntu·ros
雪碧聊技术5 小时前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
@Dream_Chaser5 小时前
uniapp页面间通信
uni-app
qianshanxue115 小时前
ubuntu 操作记录
linux