电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例

瀏覽:5日期:2022-10-25 14:20:46

引言

在與實(shí)現(xiàn)了語音合成、語義分析、機(jī)器翻譯等算法的后端交互時(shí),頁面可以設(shè)計(jì)成更為人性化、親切的方式。我們采用類似于聊天對(duì)話的實(shí)現(xiàn),效果如下:

智能客服(輸入文本,返回引擎處理后的文本結(jié)果)

Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例

語音合成(輸入文本,返回文本以及合成的音頻)

Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例

如上圖所示,返回文本后,再返回合成出的音頻。音頻按鈕嵌在對(duì)話氣泡中,可以點(diǎn)擊播放。

語音識(shí)別(在頁面錄制語音發(fā)送,頁面實(shí)時(shí)展示識(shí)別出的文本結(jié)果)

Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例

實(shí)現(xiàn)功能及技術(shù)要點(diǎn)

1、基于WebSocket實(shí)現(xiàn)對(duì)話流頁面與后端的交互是實(shí)時(shí)互動(dòng)的,所以采用WebSocket協(xié)議,而不是HTTP請(qǐng)求,這樣后端推送回的消息可以實(shí)時(shí)顯示在頁面上。WebSocket的返回是隊(duì)列的、無序的,在后續(xù)處理中我們也需要注意這一點(diǎn),在后文中會(huì)說到。2、調(diào)用設(shè)備麥克風(fēng)進(jìn)行音頻錄制和轉(zhuǎn)碼加頭,基于WebAudio、WaveSurferJS等實(shí)現(xiàn)音頻處理和繪制3、基于Vue的響應(yīng)式頁面實(shí)現(xiàn)4、CSS3 + Canvas + JS 交互效果優(yōu)化

錄制音頻CSS動(dòng)畫效果 聊天記錄自動(dòng)滾動(dòng)

下面給出部分實(shí)現(xiàn)代碼。

集成WebSocket

我們的聊天組件是頁面?zhèn)冗叴蜷_的抽屜(el-drawer),Vue組件會(huì)在打開時(shí)創(chuàng)建,關(guān)閉時(shí)銷毀。在組件中引入WebSocket,并管理它的開、關(guān)、消息接收和發(fā)送,使它的生命周期與組件一致(打開窗口時(shí)創(chuàng)建ws連接,關(guān)閉窗口時(shí)關(guān)閉連接,避免與后臺(tái)連接過多。)

created(){ if (typeof WebSocket === ’undefined’) { alert(’您的瀏覽器不支持socket’) } else { // 實(shí)例化socket this.socket = new WebSocket(this.socketServerPath) // 監(jiān)聽socket連接 this.socket.onopen = this.open // 監(jiān)聽socket錯(cuò)誤信息 this.socket.onerror = this.error // 監(jiān)聽socket消息 this.socket.onmessage = this.onMessage this.socket.onclose = this.close }}destroyed(){ this.socket.close()}

如上,將WebSocket的事件綁定到JS方法中,可以在對(duì)應(yīng)方法中實(shí)現(xiàn)對(duì)數(shù)據(jù)的接收和發(fā)送。打開瀏覽器控制臺(tái),選中指定的標(biāo)簽,便于對(duì)WebSocket連接進(jìn)行監(jiān)控和查看。

Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例

音頻錄制采集

從瀏覽器端音頻和視頻采集基于網(wǎng)頁即時(shí)通信(Web Real-TimeCommunication,簡稱WebRTC) 的API。通過WebRTC的getUserMedia實(shí)現(xiàn),獲取一個(gè)MediaStream對(duì)象,將該對(duì)象關(guān)聯(lián)到AudioContext即可獲得音頻。

可參考RecorderJS的實(shí)現(xiàn): https://github.com/mattdiamond/Recorderjs/blob/master/examples/example_simple_exportwav.html

if (navigator.getUserMedia) { navigator.getUserMedia( { audio: true }, // 只啟用音頻 function(stream) { var context = new(window.webkitAudioContext || window.AudioContext)() var audioInput = context.createMediaStreamSource(stream) var recorder = new Recorder(audioInput) }, function(error) { switch (error.code || error.name) { case ’PERMISSION_DENIED’: case ’PermissionDeniedError’: throwError(’用戶拒絕提供信息。’) break case ’NOT_SUPPORTED_ERROR’: case ’NotSupportedError’: throwError(’瀏覽器不支持硬件設(shè)備。’) break case ’MANDATORY_UNSATISFIED_ERROR’: case ’MandatoryUnsatisfiedError’: throwError(’無法發(fā)現(xiàn)指定的硬件設(shè)備。’) break default: throwError(’無法打開麥克風(fēng)。異常信息:’ + (error.code || error.name)) break } } ) } else { throwError(’當(dāng)前瀏覽器不支持錄音功能。’) }

注意: 若navigator.getUserMedia獲取到的是undefined,是Chrome瀏覽器的安全策略導(dǎo)致的,需要通過https請(qǐng)求或配置瀏覽器,配置地址: chrome://flags/#unsafely-treat-insecure-origin-as-secure

瀏覽器采集到的音頻為PCM格式(PCM (脈沖編碼調(diào)制 Pulse Code Modulation)),需要對(duì)音頻加頭才能在頁面上進(jìn)行播放。注意加頭時(shí)采樣率、采樣頻率、聲道數(shù)量等必須與采樣時(shí)相同,不然加完頭后的音頻無法解碼。參考查看https://github.com/mattdiamond/Recorderjs/blob/master/src/recorder.js中exportWav方法。

業(yè)務(wù)中對(duì)接的語音識(shí)別引擎為實(shí)時(shí)轉(zhuǎn)寫引擎,即:不是錄制完成后再發(fā)送,而是一邊錄制一邊進(jìn)行編碼并發(fā)送。使用onaudioprocess方法監(jiān)聽語音的輸入:

Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例

參考這個(gè)實(shí)現(xiàn),我們可以在每次監(jiān)聽到有數(shù)據(jù)寫入時(shí),從buffer中獲取到錄制到的數(shù)據(jù),并進(jìn)行編碼、壓縮,再通過WebSocket發(fā)送。

Vue組件設(shè)計(jì)和業(yè)務(wù)實(shí)現(xiàn)

分析頁面業(yè)務(wù)邏輯,將代碼拆分成兩個(gè)組件:ChatDialog.vue 聊天對(duì)話框頁面,根據(jù)輸入類型,分為文本輸入、語音輸入。ChatRecord.vue聊天記錄組件,根據(jù)發(fā)送方(自己或者系統(tǒng))展示向左/向右的氣泡,根據(jù)內(nèi)容顯示文本、音頻等。ChatDialog是ChatRecord的父組件,遍歷ChatDialog中的chatList對(duì)象(Array),將chatList中的項(xiàng)注入到ChatRecord中。

<div class='chat-list'> <div v-for='(item,index) in chatList' :key='index' class='msg-wrapper'> <chat-record ref='chatRecord' :data='item' @showJson='showJsonDialog'></chat-record> </div> <div style='height:0px; overflow:hidden'></div> </div></div>

對(duì)于聊天記錄的氣泡展示,與數(shù)據(jù)類型相關(guān)性很強(qiáng),ChatRecord組件只關(guān)心對(duì)數(shù)據(jù)的處理和展示,我們可以完全不用關(guān)心消息的發(fā)送、接收、音頻的錄制、停止錄制、接受音頻等邏輯,只需要根據(jù)數(shù)據(jù)來展示不同的樣式即可。這樣Vue的響應(yīng)式就充分獲得了用武之地:無需用代碼對(duì)樣式展示進(jìn)行控制,只需要設(shè)計(jì)合理的數(shù)據(jù)格式和樣式模板,然后注入不同的數(shù)據(jù)即可。模板頁面: 使用v-if控制,修改chatList里的對(duì)象內(nèi)容即可改變頁面展示。

根據(jù)業(yè)務(wù)需求,將ChatRecord可能接收到的數(shù)據(jù)分為以下幾類:

發(fā)送方為自己:

文本輸入,顯示文本

實(shí)現(xiàn)簡單,不做贅述。

語音輸入 Loading狀態(tài),顯示波紋動(dòng)畫和計(jì)時(shí)

Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例

該動(dòng)畫使用CSS實(shí)現(xiàn),參考地址: https://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html

計(jì)時(shí)器使用JS的setInterval方法,每100ms更新一次錄制時(shí)長

this.recordTimer = setInterval(() => { this.audioDuration = this.audioDuration + 0.1 }, 100)

停止后清空計(jì)時(shí)器:

語音輸入完畢,根據(jù)錄制的語音,繪制波紋

效果:

Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例

使用wavesurfer插件:

initWaveSurfer() { this.$nextTick(() => { this.wavesurfer = WaveSurfer.create({ container: this.$refs.waveform, height: 20, waveColor: ’#3d6fff’, progressColor: ’blue’, backend: ’MediaElement’, mediaControls: false, audioRate: ’1’, fillParent: false, maxCanvasWidth: 500, barWidth: 1, barGap: 2, barHeight: 5, barMinHeight: 3, normalize: true, cursorColor: ’#409EFF’ }) this.convertAudioToUrl(this.waveAudio).then((res) => { this.wavesurfer.load(res) setTimeout(() => { this.audioDuration = this.getAudioDuration() }, 100) }) }) }, // 將音頻轉(zhuǎn)化成url地址 convertAudioToUrl(audio) { let blobUrl = ’’ if (this.data.sendBy === ’self’) { blobUrl = window.URL.createObjectURL(audio) return new Promise((resolve) => { resolve(blobUrl) }) } else { return this.base64ToBlob({ b64data: audio, contentType: ’audio/wav’ }) } }, base64ToBlob({ b64data = ’’, contentType = ’’, sliceSize = 512 } = {}) { return new Promise((resolve, reject) => { // 使用 atob() 方法將數(shù)據(jù)解碼 let byteCharacters = atob(b64data) let byteArrays = [] for ( let offset = 0; offset < byteCharacters.length; offset += sliceSize ) { let slice = byteCharacters.slice(offset, offset + sliceSize) let byteNumbers = [] for (let i = 0; i < slice.length; i++) { byteNumbers.push(slice.charCodeAt(i)) } // 8 位無符號(hào)整數(shù)值的類型化數(shù)組。內(nèi)容將初始化為 0。 // 如果無法分配請(qǐng)求數(shù)目的字節(jié),則將引發(fā)異常。 byteArrays.push(new Uint8Array(byteNumbers)) } let result = new Blob(byteArrays, { type: contentType }) result = Object.assign(result, { // 這里一定要處理一下 URL.createObjectURL preview: URL.createObjectURL(result), name: `XXX.wav` }) resolve(window.URL.createObjectURL(result)) }) },

發(fā)送方為系統(tǒng):

僅返回文本:顯示文本 僅返回音頻(參考發(fā)送方為自己的實(shí)現(xiàn))

Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例

返回文本,隨即返回文本對(duì)應(yīng)的合成音頻,顯示文本和播放按鈕

Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例

頁面嵌入audio標(biāo)簽,將hidden設(shè)置為true使其不顯示:

<div class='audio-player'> <svg-icon v-if='!isPlaying' icon-class=’play’ @click='onClickAudioPlayer' /> <svg-icon v-else icon-class=’pause’ @click='onClickAudioPlayer' /> <audio :src='http://www.hdgsjgj.cn/bcjs/playAudioUrl' autostart='true' hidden='true' ref='audioPlayer' /> </div>

playAudioUrl的生成參考上面生成的wavesurfer的url。使用isPlaying參數(shù)記錄當(dāng)前音頻的播放狀態(tài),并使用setTimeout方法,當(dāng)播放了音頻時(shí)長后,將播放按鈕自動(dòng)置為play。

onClickAudioPlayer() { if (this.isPlaying) { this.$refs.audioPlayer.pause() this.isPlaying = false } else { // 每次點(diǎn)擊時(shí),開始播放,并在播放完畢將isPlaying置為false this.$refs.audioPlayer.currentTime = 0 this.$refs.audioPlayer.play() this.isPlaying = true setTimeout(() => { // 將正在播放重置為false this.isPlaying = false }, Math.ceil(this.$refs.audioPlayer.duration) * 1000) } },

聊天記錄自動(dòng)定位到最后一條:

使用scrollIntoView()方法

記錄每次會(huì)話對(duì)應(yīng)的記錄ID(recordId):

定義單次會(huì)話的id,并在返回的消息中回傳,從而建立多條websocket返回的關(guān)聯(lián)關(guān)系。

以上就是全部實(shí)現(xiàn)。難點(diǎn)主要是請(qǐng)求麥克風(fēng)權(quán)限和對(duì)音頻進(jìn)行編碼,在加wav頭時(shí)必須保證和采樣時(shí)的采樣率、頻率一致 。

以上就是Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例的詳細(xì)內(nèi)容,更多關(guān)于vue 實(shí)現(xiàn)H5聊天對(duì)話交互的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 彭世修脚_修脚加盟_彭世修脚加盟_彭世足疗加盟_足疗加盟连锁_彭世修脚技术培训_彭世足疗 | 机械加工_绞车配件_立式离心机_减速机-洛阳三永机械厂 | 安徽泰科检测科技有限公司【官方网站】 | 英语词典_成语词典_日语词典_法语词典_在线词典网 | 旋振筛|圆形摇摆筛|直线振动筛|滚筒筛|压榨机|河南天众机械设备有限公司 | uv机-uv灯-uvled光固化机-生产厂家-蓝盾机电| 真空泵厂家_真空泵机组_水环泵_旋片泵_罗茨泵_耐腐蚀防爆_中德制泵 | 安徽合肥格力空调专卖店_格力中央空调_格力空调总经销公司代理-皖格制冷设备 | 芝麻黑-芝麻黑石材厂家-永峰石业| 环氧树脂地坪_防静电地坪漆_环氧地坪漆涂料厂家-地壹涂料地坪漆 环球电气之家-中国专业电气电子产品行业服务网站! | 安徽合肥项目申报咨询公司_安徽合肥高新企业项目申报_安徽省科技项目申报代理 | 福州时代广告制作装饰有限公司-福州广告公司广告牌制作,福州展厅文化墙广告设计, | 反渗透水处理设备|工业零排放|水厂设备|软化水设备|海南净水设备--海南水处理设备厂家 | CTAB,表面活性剂1631溴型(十六烷基三甲基溴化铵)-上海升纬化工原料有限公司 | 真空泵厂家_真空泵机组_水环泵_旋片泵_罗茨泵_耐腐蚀防爆_中德制泵 | 烟台条码打印机_烟台条码扫描器_烟台碳带_烟台数据采集终端_烟台斑马打印机-金鹏电子-金鹏电子 | 求是网 - 思想建党 理论强党| 深圳法律咨询【24小时在线】深圳律师咨询免费 | 交通气象站_能见度检测仪_路面状况监测站- 天合环境科技 | 旋振筛_不锈钢旋振筛_气旋筛_旋振筛厂家—新乡市大汉振动机械有限公司 | 超声波电磁流量计-液位计-孔板流量计-料位计-江苏信仪自动化仪表有限公司 | 专业的新乡振动筛厂家-振动筛品质保障-环保振动筛价格—新乡市德科筛分机械有限公司 | YJLV22铝芯铠装电缆-MYPTJ矿用高压橡套电缆-天津市电缆总厂 | 交流伺服电机|直流伺服|伺服驱动器|伺服电机-深圳市华科星电气有限公司 | 液压油缸-液压缸厂家价格,液压站系统-山东国立液压制造有限公司 液压油缸生产厂家-山东液压站-济南捷兴液压机电设备有限公司 | 安全阀_弹簧式安全阀_美标安全阀_工业冷冻安全阀厂家-中国·阿司米阀门有限公司 | 购买舔盐、舔砖、矿物质盐压块机,鱼饵、鱼饲料压块机--请到杜甫机械 | 全自动端子机|刺破式端子压接机|全自动双头沾锡机|全自动插胶壳端子机-东莞市傅氏兄弟机械设备有限公司 | 东莞螺杆空压机_永磁变频空压机_节能空压机_空压机工厂批发_深圳螺杆空压机_广州螺杆空压机_东莞空压机_空压机批发_东莞空压机工厂批发_东莞市文颖设备科技有限公司 | 安徽合肥格力空调专卖店_格力中央空调_格力空调总经销公司代理-皖格制冷设备 | 脑钠肽-白介素4|白介素8试剂盒-研域(上海)化学试剂有限公司 | 宜兴市恺瑞德环保科技有限公司| 一体化净水器_一体化净水设备_一体化水处理设备-江苏旭浩鑫环保科技有限公司 | crm客户关系管理系统,销售管理系统,crm系统,在线crm,移动crm系统 - 爱客crm | 原子吸收设备-国产分光光度计-光谱分光光度计-上海光谱仪器有限公司 | 塑料异型材_PVC异型材_封边条生产厂家_PC灯罩_防撞扶手_医院扶手价格_东莞市怡美塑胶制品有限公司 | 谷梁科技 | 济宁工业提升门|济宁电动防火门|济宁快速堆积门-济宁市统一电动门有限公司 | 长城人品牌官网| 深圳办公室装修-写字楼装修设计-深圳标榜装饰公司 | 重庆网站建设,重庆网站设计,重庆网站制作,重庆seo,重庆做网站,重庆seo,重庆公众号运营,重庆小程序开发 |