uniapp 开发H5页面，实现语音识别功能--前端，不包含后端转换-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 开发H5页面，实现语音识别功能--前端，不包含后端转换。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、背景

微信小程序开发，内嵌h5页面，不能调用微信内部的插件

二、实现方式

通过安装 js-audio-recorder 插件实现既定需求

三、具体步骤

1、安装插件

npm i js-audio-recorder

2、引入

在需要使用的页面中引入：import Recorder from 'js-audio-recorder';

3、具体配置文章来源地址https://www.toymoban.com/news/detail-849601.html

1、定义recorder
data() {
		return {
			recorder: null
		};
},
2、页面加载时，初始化
onLoad() {
		this.recorder = new Recorder();
},
3、具体方法
methods:{
4、鼠标点击方法
startRecording() {
	this.recorder = new Recorder();
	Recorder.getPermission().then(
		() => {
			console.log('开始录音');
			this.titleShow = true;
			this.recorder.start(); // 开始录音
		},
		(error) => {
			uni.showToast({
				title: '请先允许该网页使用麦克风',
				icon:"error"
			});
			console.log(`${error.name} : ${error.message}`);
		}
	);
},
5、鼠标松开的方法
touchEnd() {
	this.yyShow = false;
	this.titleShow = false;
	const blob = this.recorder.getWAVBlob(); //调这个方法会自动调用stop
	const newbolb = new Blob([blob], { type: 'audio/wav' });
	this.blobToBase64(newbolb)
		.then((base64) => {
			7、调用后端接口
			this.$UniRequest.Post({
				url: this.$AppConfig.audio2text,
				para: {
					audioBase64: base64
				},
				success: (res) => {
					if (res.audiocont == 'null') {
					uni.showToast({
							title: '未识别到您的语音，请重试',
							icon: 'error'
						});
						this.customerText = '';
					} else {
						this.customerText = res.audiocont;
					}
				},
				fail: (err) => {
					uni.showModal({
						title: '提示',
						content: err,
						showCancel: false
					});
				}
			});
		})
		.catch((err) => {
			console.error(err);
		});
},
6、音频转base64
blobToBase64(blob) {
	return new Promise((resolve, reject) => {
		const reader = new FileReader();
		reader.readAsDataURL(blob);
		reader.onload = () => {
			const base64 = reader.result.split(',')[1];
			resolve(base64);
		};
		reader.onerror = () => {
			reject(new Error('blobToBase64 error'));
		};
	});
	}
}

到了这里，关于uniapp 开发H5页面，实现语音识别功能--前端，不包含后端转换的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！