引言

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

• 智慧客服（輸入文字，返回引擎處理後的文字結果）

• 語音合成（輸入文字，返回文字以及合成的音訊）

如上圖所示，返回文字後，再返回合成出的音訊。
音訊按鈕嵌在對話氣泡中，可以點選播放。

• 語音識別（在頁面錄製語音傳送，頁面實時展示識別出的文字結果）

實現功能及技術要點

1、基於WebSocket實現對話流
頁面與後端的互動是實時互動的，所以採用WebSocket協議，而不是HTTP請求，這樣後端推送回的訊息可以實時顯示在頁面上。

• 錄製音訊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連線進行監控和檢視。

音訊錄製採集

從瀏覽器端音訊和視訊採集基於網頁即時通訊（Web Real-Time
Communication，簡稱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方法監聽語音的輸入：

參考這個實現，我們可以在每次監聽到有資料寫入時，從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 id="msg_end" style="height:0px; overflow:hidden"></div>
  </div>
</div>

對於聊天記錄的氣泡展示，與資料型別相關性很強，ChatRecord元件只關心對資料的處理和展示，我們可以完全不用關心訊息的傳送、接收、音訊的錄製、停止錄製、接受音訊等邏輯，只需要根據資料來展示不同的樣式即可。
這樣Vue的響應式就充分獲得了用武之地：無需用程式碼對樣式展示進行控制，只需要設計合理的資料格式和樣式模板，然後注入不同的資料即可。
模板頁面： 使用v-if控制，修改chatList裡的物件內容即可改變頁面展示。

根據業務需求，將ChatRecord可能接收到的資料分為以下幾類：

傳送方為自己：

• 文字輸入，顯示文字

實現簡單，不做贅述。

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

該動畫使用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)

停止後清空計時器：

• 語音輸入完畢，根據錄製的語音，繪製波紋

效果：

使用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))
  })
 },

傳送方為系統：

• 僅返回文字：顯示文字
• 僅返回音訊（參考傳送方為自己的實現）

• 返回文字，隨即返回文字對應的合成音訊，顯示文字和播放按鈕

頁面嵌入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="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聊天對話互動的資料請關注我們其它相關文章！