vue 移动端语音输入教程

网上查了半天，全是复制粘贴的博客，实在忍不住，自己开章！
教程vue移动端语音输入！

1、首先你得有https协议的网站域名
因为语音输入需要已经安全验证的网站，才可以获取手机的语音权限！
如果你拥有，就把项目放在这个https域名下。

2、安装vue录音插件

cnpm i js-audio-recorder --s

输入上面命令进行安装插件，安装完成后，在你需要使用录音的页面引入：

3、代码部分：


import Recorder from "js-audio-recorder";
const lamejs = require("lamejs");
const recorder = new Recorder({sampleBits: 16, // 采样位数，支持 8 或 16，默认是16sampleRate: 48000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000numChannels: 1, // 声道，支持 1 或 2， 默认是1// compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
});

methods:{}里录音函数，根据你的需要进行事件点击监听：

 // 录音startMp3() {this.showSound = true;recorder.start().then((res) => {},(error) => {// 出错了console.log(`${error.name} : ${error.message}`);});},// 结束录音stopRecorder() {this.showSound = false;recorder.stop();recorder.destroy().then(function () {});},// 录音播放playRecorder() {// recorder.play();let wav = recorder.getWAVBlob(); //获取 WAV 数据this.showSound = false;const mp3Blob = this.convertToMp3(recorder.getWAV());console.log("录音", mp3Blob);this.uploadVoice(mp3Blob);},//转wav为MP3格式convertToMp3(wavDataView) {// 获取wav头信息const wav = lamejs.WavHeader.readHeader(wavDataView); // 此处其实可以不用去读wav头信息，毕竟有对应的config配置const { channels, sampleRate } = wav;const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128);// 获取左右通道数据const result = recorder.getChannelData();const buffer = [];const leftData =result.left &&new Int16Array(result.left.buffer, 0, result.left.byteLength / 2);const rightData =result.right &&new Int16Array(result.right.buffer, 0, result.right.byteLength / 2);const remaining = leftData.length + (rightData ? rightData.length : 0);const maxSamples = 1152;for (let i = 0; i < remaining; i += maxSamples) {const left = leftData.subarray(i, i + maxSamples);let right = null;let mp3buf = null;if (channels === 2) {right = rightData.subarray(i, i + maxSamples);mp3buf = mp3enc.encodeBuffer(left, right);} else {mp3buf = mp3enc.encodeBuffer(left);}if (mp3buf.length > 0) {buffer.push(mp3buf);}}const enc = mp3enc.flush();if (enc.length > 0) {buffer.push(enc);}return new Blob(buffer, { type: "audio/mp3" });},

4、语音上传到服务器：

    //上传音频uploadVoice(params) {let that = this;let url = api.apiUrl.uploadFile + "?token=" + localStorage.token;var param = new FormData();param.append("file", params);upload(this.ROOT + url, param).then((res) => {console.log("上传", res.data.data);if (res.data.code == "0") {let data = {voice: res.data.data,userId: that.$route.query.userId,anchorId: localStorage.anchorId,};ajaxReq("POST", that.ROOT + api.apiUrl.sengMsg, data).then((res) => {if (res.code == "0") {that.records.push(res.data);that.content = "";that.scrollToBottom();that.showMoreOpratin = false;} else {that.$toast(res.msg);}});} else {that.$toast(res.msg);}});},

重点是这个，方便后台以表单的形式接收文件数据：

提示：如果你是复制粘贴的，很多函数都没有的哦，没有的可以删掉，核心是录音教程，比如你得自己封装upload()上传文件的函数哦！

vue录音插件详细介绍：vue录音插件
有帮到你就点个赞吧！

vue 移动端语音输入教程相关推荐

HTML是一种标识语音,HTML实现网页端语音输入（语音识别，语义理解，olami）
olami开放平台sdk除了支持语音识别功能外,更强大的在于支持语义理解功能,在Android平台和iOS平台都有示例demo供大家下载. 在web端,基于JavaScript用olami开放平台sd ...
【效率神器】电脑上实现语音输入文字
标签:[效率神器]PC端语音输入文字,电脑端语音输入文字,如何轻松在电脑上实现语音输入有时候电脑端打文字还是比较麻烦的,用语音转成文字输入还是比较简单的,而且速度快.那么电脑端怎么通过语音输入了?这 ...
Vue移动端框架Mint UI教程-调用模拟json数据(五)
1:安装 npm install vue-resource 2:打开main.js 注册 import VueResource from 'vue-resource' Vue.use(VueResou ...
VUE—移动端手机号正则验证，不正确显示‘请输入正确手机号’，若正确跳转到发送验证码（图文详情）
VUE-移动端手机号正则验证,不正确显示'请输入正确手机号',若正确跳转到发送验证码先看效果图第一步:写布局 <input type="text" placeholder ...
手机端 html 语音输入,移动端HTML5页面开发备忘录
有关Meta 基本Meta 1 2 3 4 5 6 7 8 搜索引擎Meta 1 2 3 4 5 6 7 8 9 10 页面缓存设置Meta 1 2 3 4 常见问题移动端字体设置 1 2 3 4 ...
微信小程序同声传译开发（语音识别、语音输入转文字）开发教程
微信同声传译插件是微信自研的语音输入,文本翻译等功能的插件封装,用于提供给第三方小程序调用. 1.小程序后台进行配置在浏览器搜索微信公众平台,微信扫码登录小程序.点击设置->第三方设置-> ...
python语音输入功能_“在Python中如何实现一点按钮就出现语音输入语音，输入语音后可以自动翻译为文字的程序？“python语音识别教程...
Python用什么模块开发语音识别系统使用YQ5969,这个语音识别模以支持1--8个咪头,还可以支持本地和识别不同需求.5米内本地识别 93%以上,云端识别率97%.这个语音识别模块可以滤除噪声. ...
Qt通讯录（语音输入+发邮件+发短信+头像）
Qt通讯录(语音输入+发邮件+发短信+头像) 项目背景功能运行程序关键技术语音识别ASR 发送电子邮件 AddressBook5.0 Gitee地址项目背景作为一个Qt小白,迫于大一下学期 ...
ChatGPT 推出 iOS 应用，支持语音输入，使用体验如何？
最近,OpenAI 宣布推出官方 iOS 应用,允许用户随时随地访问其高人气 AI 聊天机器人,此举也打破了近几个月内苹果 App Store 上充斥似是而非的山寨服务的窘境. 该应用程序是 Chat ...

vue 移动端语音输入教程

vue 移动端语音输入教程相关推荐

最新文章

热门文章