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

您的位置:首頁技術文章
文章詳情頁

Vue +WebSocket + WaveSurferJS 實現H5聊天對話交互的實例

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

引言

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

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

Vue +WebSocket + WaveSurferJS 實現H5聊天對話交互的實例

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

Vue +WebSocket + WaveSurferJS 實現H5聊天對話交互的實例

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

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

Vue +WebSocket + WaveSurferJS 實現H5聊天對話交互的實例

實現功能及技術要點

1、基于WebSocket實現對話流頁面與后端的交互是實時互動的,所以采用WebSocket協議,而不是HTTP請求,這樣后端推送回的消息可以實時顯示在頁面上。WebSocket的返回是隊列的、無序的,在后續處理中我們也需要注意這一點,在后文中會說到。2、調用設備麥克風進行音頻錄制和轉碼加頭,基于WebAudio、WaveSurferJS等實現音頻處理和繪制3、基于Vue的響應式頁面實現4、CSS3 + Canvas + JS 交互效果優化

錄制音頻CSS動畫效果 聊天記錄自動滾動

下面給出部分實現代碼。

集成WebSocket

我們的聊天組件是頁面側邊打開的抽屜(el-drawer),Vue組件會在打開時創建,關閉時銷毀。在組件中引入WebSocket,并管理它的開、關、消息接收和發送,使它的生命周期與組件一致(打開窗口時創建ws連接,關閉窗口時關閉連接,避免與后臺連接過多。)

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

如上,將WebSocket的事件綁定到JS方法中,可以在對應方法中實現對數據的接收和發送。打開瀏覽器控制臺,選中指定的標簽,便于對WebSocket連接進行監控和查看。

Vue +WebSocket + WaveSurferJS 實現H5聊天對話交互的實例

音頻錄制采集

從瀏覽器端音頻和視頻采集基于網頁即時通信(Web Real-TimeCommunication,簡稱WebRTC) 的API。通過WebRTC的getUserMedia實現,獲取一個MediaStream對象,將該對象關聯到AudioContext即可獲得音頻。

可參考RecorderJS的實現: 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(’瀏覽器不支持硬件設備。’) break case ’MANDATORY_UNSATISFIED_ERROR’: case ’MandatoryUnsatisfiedError’: throwError(’無法發現指定的硬件設備。’) break default: throwError(’無法打開麥克風。異常信息:’ + (error.code || error.name)) break } } ) } else { throwError(’當前瀏覽器不支持錄音功能。’) }

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

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

業務中對接的語音識別引擎為實時轉寫引擎,即:不是錄制完成后再發送,而是一邊錄制一邊進行編碼并發送。使用onaudioprocess方法監聽語音的輸入:

Vue +WebSocket + WaveSurferJS 實現H5聊天對話交互的實例

參考這個實現,我們可以在每次監聽到有數據寫入時,從buffer中獲取到錄制到的數據,并進行編碼、壓縮,再通過WebSocket發送。

Vue組件設計和業務實現

分析頁面業務邏輯,將代碼拆分成兩個組件:ChatDialog.vue 聊天對話框頁面,根據輸入類型,分為文本輸入、語音輸入。ChatRecord.vue聊天記錄組件,根據發送方(自己或者系統)展示向左/向右的氣泡,根據內容顯示文本、音頻等。ChatDialog是ChatRecord的父組件,遍歷ChatDialog中的chatList對象(Array),將chatList中的項注入到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>

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

根據業務需求,將ChatRecord可能接收到的數據分為以下幾類:

發送方為自己:

文本輸入,顯示文本

實現簡單,不做贅述。

語音輸入 Loading狀態,顯示波紋動畫和計時

Vue +WebSocket + WaveSurferJS 實現H5聊天對話交互的實例

該動畫使用CSS實現,參考地址: https://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html

計時器使用JS的setInterval方法,每100ms更新一次錄制時長

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

停止后清空計時器:

語音輸入完畢,根據錄制的語音,繪制波紋

效果:

Vue +WebSocket + WaveSurferJS 實現H5聊天對話交互的實例

使用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) }) }) }, // 將音頻轉化成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() 方法將數據解碼 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 位無符號整數值的類型化數組。內容將初始化為 0。 // 如果無法分配請求數目的字節,則將引發異常。 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)) }) },

發送方為系統:

僅返回文本:顯示文本 僅返回音頻(參考發送方為自己的實現)

Vue +WebSocket + WaveSurferJS 實現H5聊天對話交互的實例

返回文本,隨即返回文本對應的合成音頻,顯示文本和播放按鈕

Vue +WebSocket + WaveSurferJS 實現H5聊天對話交互的實例

頁面嵌入audio標簽,將hidden設置為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參數記錄當前音頻的播放狀態,并使用setTimeout方法,當播放了音頻時長后,將播放按鈕自動置為play。

onClickAudioPlayer() { if (this.isPlaying) { this.$refs.audioPlayer.pause() this.isPlaying = false } else { // 每次點擊時,開始播放,并在播放完畢將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) } },

聊天記錄自動定位到最后一條:

使用scrollIntoView()方法

記錄每次會話對應的記錄ID(recordId):

定義單次會話的id,并在返回的消息中回傳,從而建立多條websocket返回的關聯關系。

以上就是全部實現。難點主要是請求麥克風權限和對音頻進行編碼,在加wav頭時必須保證和采樣時的采樣率、頻率一致 。

以上就是Vue +WebSocket + WaveSurferJS 實現H5聊天對話交互的實例的詳細內容,更多關于vue 實現H5聊天對話交互的資料請關注好吧啦網其它相關文章!

標簽: Vue
相關文章:
主站蜘蛛池模板: 干法制粒机_智能干法制粒机_张家港市开创机械制造有限公司 | 干洗加盟网-洗衣店品牌排行-干洗设备价格-干洗连锁加盟指南 | 无菌水质袋-NASCO食品无菌袋-Whirl-Pak无菌采样袋-深圳市慧普德贸易有限公司 | 动物麻醉机-数显脑立体定位仪-北京易则佳科技有限公司 | 太空舱_民宿太空舱厂家_移动房屋太空舱价格-豪品建筑 | 南京雕塑制作厂家-不锈钢雕塑制作-玻璃钢雕塑制作-先登雕塑厂 | 蜘蛛车-登高车-高空作业平台-高空作业车-曲臂剪叉式升降机租赁-重庆海克斯公司 | 北京森语科技有限公司-模型制作专家-展览展示-沙盘模型设计制作-多媒体模型软硬件开发-三维地理信息交互沙盘 | 雨水收集系统厂家-雨水收集利用-模块雨水收集池-徐州博智环保科技有限公司 | 防爆鼓风机-全风-宏丰鼓风机-上海梁瑾机电设备有限公司 | POS机办理_个人pos机免费领取-银联pos机申请首页| 常州企业采购平台_常州MRO采购公司_常州米孚机电设备有限公司 | 上海盐水喷雾试验机_两厢式冷热冲击试验箱-巨怡环试 | 缠绕机|缠绕膜包装机|缠绕包装机-上海晏陵智能设备有限公司 | 厂厂乐-汇聚海量采购信息的B2B微营销平台-厂厂乐官网 | 高效复合碳源-多核碳源生产厂家-污水处理反硝化菌种一长隆科技库巴鲁 | 长沙发电机-湖南发电机-柴油发电机供应厂家-长沙明邦智能科技 | 工作服定制,工作服定做,工作服厂家-卡珀职业服装(苏州)有限公司 | 武汉EPS线条_EPS装饰线条_EPS构件_湖北博欧EPS线条厂家 | 防爆正压柜厂家_防爆配电箱_防爆控制箱_防爆空调_-盛通防爆 | 手术示教系统-数字化手术室系统-林之硕医疗云智能视频平台 | 带锯机|木工带锯机圆木推台锯|跑车带锯机|河北茂业机械制造有限公司| | 气力输送设备_料封泵_仓泵_散装机_气化板_压力释放阀-河南锐驰机械设备有限公司 | 阿里巴巴诚信通温州、台州、宁波、嘉兴授权渠道商-浙江联欣科技提供阿里会员办理 | 青州开防盗门锁-配汽车芯片钥匙-保险箱钥匙-吉祥修锁店 | 移动机器人产业联盟官网| 全自动包装秤_全自动上袋机_全自动套袋机_高位码垛机_全自动包装码垛系统生产线-三维汉界机器(山东)股份有限公司 | 厂房出售_厂房仓库出租_写字楼招租_土地出售-中苣招商网-中苣招商网 | 衢州装饰公司|装潢公司|办公楼装修|排屋装修|别墅装修-衢州佳盛装饰 | 上海皓越真空设备有限公司官网-真空炉-真空热压烧结炉-sps放电等离子烧结炉 | 耐酸碱胶管_耐腐蚀软管总成_化学品输送软管_漯河利通液压科技耐油耐磨喷砂软管|耐腐蚀化学软管 | 石家庄装修设计_室内家装设计_别墅装饰装修公司-石家庄金舍装饰官网 | 贵州自考_贵州自学考试网| 数控走心机-双主轴走心机厂家-南京建克 | 空气净化器租赁,空气净化器出租,全国直租_奥司汀净化器租赁 | 车辆定位管理系统_汽车GPS系统_车载北斗系统 - 朗致物联 | 电动卫生级调节阀,电动防爆球阀,电动软密封蝶阀,气动高压球阀,气动对夹蝶阀,气动V型调节球阀-上海川沪阀门有限公司 | 电动车头盔厂家_赠品头盔_安全帽批发_山东摩托车头盔—临沂承福头盔 | 选矿设备-新型重选设备-金属矿尾矿重选-青州冠诚重工机械有限公司 | 河南橡胶接头厂家,河南波纹补偿器厂家,河南可曲挠橡胶软连接,河南套筒补偿器厂家-河南正大阀门 | 玖容气动液压设备有限公司-气液增压缸_压力机_增压机_铆接机_增压器 |