h5实现语音识别调用

话不多说，直接上代码（此案例使用的vue3+vant）

创建语音识别功能js, HZRecorder.js

function HZRecorder(stream, config) {config = config || {};config.sampleBits = config.sampleBits || 16;   //采样数位 8, 16config.sampleRate = config.sampleRate || 16000;  //采样率16khzvar context = new (window.webkitAudioContext || window.AudioContext)();var audioInput = context.createMediaStreamSource(stream);var createScript = context.createScriptProcessor || context.createJavaScriptNode;var recorder = createScript.apply(context, [4096, 1, 1]);var audioData = {size: 0     //录音文件长度, buffer: []   //录音缓存, inputSampleRate: context.sampleRate  //输入采样率, inputSampleBits: 16    //输入采样数位 8, 16, outputSampleRate: config.sampleRate  //输出采样率, oututSampleBits: config.sampleBits    //输出采样数位 8, 16, input: function (data) {this.buffer.push(new Float32Array(data));this.size += data.length;}, compress: function () { //合并压缩//合并var data = new Float32Array(this.size);var offset = 0;for (var i = 0; i < this.buffer.length; i++) {data.set(this.buffer[i], offset);offset += this.buffer[i].length;}//压缩var compression = parseInt(this.inputSampleRate / this.outputSampleRate);var length = data.length / compression;var result = new Float32Array(length);var index = 0, j = 0;while (index < length) {result[index] = data[j];j += compression;index++;}return result;}, encodeWAV: function () {var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);var bytes = this.compress();var dataLength = bytes.length * (sampleBits / 8);var buffer = new ArrayBuffer(44 + dataLength);var data = new DataView(buffer);var channelCount = 1;//单声道var offset = 0;var writeString = function (str) {for (var i = 0; i < str.length; i++) {data.setUint8(offset + i, str.charCodeAt(i));}}// 资源交换文件标识符writeString('RIFF'); offset += 4;// 下个地址开始到文件尾总字节数,即文件大小-8data.setUint32(offset, 36 + dataLength, true); offset += 4;// WAV文件标志writeString('WAVE'); offset += 4;// 波形格式标志writeString('fmt '); offset += 4;// 过滤字节,一般为 0x10 = 16data.setUint32(offset, 16, true); offset += 4;// 格式类别 (PCM形式采样数据)data.setUint16(offset, 1, true); offset += 2;// 通道数data.setUint16(offset, channelCount, true); offset += 2;// 采样率,每秒样本数,表示每个通道的播放速度data.setUint32(offset, sampleRate, true); offset += 4;// 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true); offset += 4;// 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8data.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;// 每样本数据位数data.setUint16(offset, sampleBits, true); offset += 2;// 数据标识符writeString('data'); offset += 4;// 采样数据总数,即数据总大小-44data.setUint32(offset, dataLength, true); offset += 4;// 写入采样数据if (sampleBits === 8) {for (var i = 0; i < bytes.length; i++, offset++) {var s = Math.max(-1, Math.min(1, bytes[i]));var val = s < 0 ? s * 0x8000 : s * 0x7FFF;val = parseInt(255 / (65535 / (val + 32768)));data.setInt8(offset, val, true);}} else {for (var i = 0; i < bytes.length; i++, offset += 2) {var s = Math.max(-1, Math.min(1, bytes[i]));data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);}}return new Blob([data], { type: 'audio/wav' });}};//开始录音this.start = function () {audioInput.connect(recorder);recorder.connect(context.destination);}//停止this.stop = function () {recorder.disconnect();}//获取音频文件this.getBlob = function () {this.stop();console.log(audioData.encodeWAV())return audioData.encodeWAV();}//回放this.play = function (audio) {var blob=this.getBlob();// saveAs(blob, "F:/3.wav");audio.src = window.URL.createObjectURL(this.getBlob());}//上传this.upload = function () {return this.getBlob()}//音频采集recorder.onaudioprocess = function (e) {audioData.input(e.inputBuffer.getChannelData(0));//record(e.inputBuffer.getChannelData(0));}return this;}export {HZRecorder}

使用方式

// 触发语音的方法
<van-buttontype="warning"@touchstart="speakClick"@touchend="speakEndClick"square>点击说话</van-button>

引用js

import { HZRecorder } from "../../utils/HZRecorder";
export default {setup() {let recorder;const speakInfo = ref("");// 初始化语音const initAudio = () => {navigator.getUserMedia =navigator.getUserMedia ||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMedia;navigator.getUserMedia({ audio: true },function (stream) {recorder = new HZRecorder(stream);console.log("初始化完成");},function (e) {console.log("No live audio input: " + e);});};// 语音开始const speakClick = () => {recorder.start();const toast = Toast({duration: 0,forbidClick: true,message: "语音输入中...",});};// 语音结束const speakEndClick = () => {Toast.clear();let audioData = new FormData();audioData.append("speechFile", recorder.getBlob());getSpeechRecognition(audioData).then((res) => {speakInfo.value = res.data});};}return {speakClick,speakEndClick,speakInfo,}
}

完结撒花

h5实现语音识别调用相关推荐

h5页面生成图片分享到微信js_微信端h5页面如何调用分享页面的接口
这次给大家带来微信端h5页面如何调用分享页面的接口,微信端h5页面调用分享页面接口的注意事项有哪些,下面就是实战案例,一起来看一下. 最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加 ...
android h5调用百度地图,h5页面如何调用百度地图获取当前位置（代码）
本篇文章给大家带来的内容是关于h5页面如何调用百度地图获取当前位置(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在项目中越来越多的用到了手机的GRS定位功能,使用百度地图A ...
html5调用封装库jar,H5项目如何调用aar、jar包资源（HBuilder离线打包实践）
H5项目如何调用aar.jar包资源(HBuilder离线打包实践) H5项目如何调用aar.jar包资源(HBuilder离线打包实践) 我司项目提供Android的SDK(jar,aar),而客户 ...
H5使用JS-SDK调用企业微信接口、调试
企业微信开发者工具文档企业微信-错误码查找工具写在前面的注意事项 config注入的是企业的身份与权限 agentConfig注入的是应用的身份与权限 jsapi_ticket是H5应用调用企业微 ...
陪玩系统源码开发，H5页面中调用支付功能的实现
最近在陪玩系统源码开发工作中,有个H5页面需要实现微信支付和支付宝支付的功能,现在已经完成,抽个时间写出来,分享给有需要的人. 第一步:先判断当前环境判断陪玩系统源码中用户所属环境,根据环境不同,执 ...
iOS原生和H5的相互调用
为什么现在越来越多的APP中开始出现H5页面? 1,H5页面开发效率更高,更改更加方便: 2,适当缩小APP安装包的大小: 3,蹭热点更加方便,比如五一,十一,双十一搞活动: 那么为什么说H5无法取代 ...
php h5微信公众号支付接口,微信公众号H5支付接口调用方法
本文实例为大家分享了微信内h5调用支付接口的具体代码,供大家参考,具体内容如下官方文档微信公众号h5接口调用 // 判断微信版本是否在5.0以上 // window.navigator.user ...
h5 在线语音识别接口
广告关闭腾讯云双11爆品提前享,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高满返5000元! 产品体验客户端接入实时语音识别技术指引上线了解更多功能发布语音识别产品已开 ...
Android与H5相互接口调用及Android端接口整理
近几年随着HTML5的功能越来越强大,H5页面的性能虽然稍差,单其灵活性很高,更新页面成本比原生小很多,一个页面可以被android和ios同时使用开发成本也比较低,所以移动端的开发已经不是单单的原生 ...

h5实现语音识别调用

h5实现语音识别调用相关推荐

最新文章

热门文章