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连接
pen = this.open
// 监听socket错误信息
r =
/
/ 监听socket消息
ssage = Message
lose = this.close
}
}
destroyed(){
this.socket.close()
}
如上，将WebSocket的事件绑定到JS⽅法中，可以在对应⽅法中实现对数据的接收和发送。
打开浏览器控制台，选中指定的标签，便于对WebSocket连接进⾏监控和查看。
⾳频录制采集
从浏览器端⾳频和视频采集基于⽹页即时通信（Web Real-Time
Communication，简称WebRTC）的API。通过WebRTC的getUserMedia实现，获取⼀个MediaStream对象，将该对象关联到AudioContext即可获得⾳频。
if (UserMedia) {
{ audio: true }, // 只启⽤⾳频
function(stream) {
var context = new(window.webkitAudioContext || window.AudioContext)()
var audioInput = ateMediaStreamSource(stream)
var recorder = new Recorder(audioInput)
},
function(error) {
switch (de || 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('⽆法打开麦克风。异常信息:' + (de || error.name))
break
}
}
)
} else {
throwError('当前浏览器不⽀持录⾳功能。')
}
注意：若UserMedia获取到的是undefined，是Chrome浏览器的安全策略导致的，需要通过https请求或配置浏览器，配置地址： chrome://flags/#unsafely-treat-insecure-origin-as-secure
业务中对接的语⾳识别引擎为实时转写引擎，即：不是录制完成后再发送，⽽是⼀边录制⼀边进⾏编码并发送。
使⽤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" ></div>
</div>
</div>
对于聊天记录的⽓泡展⽰，与数据类型相关性很强，ChatRecord组件只关⼼对数据的处理和展⽰，我们可以完全不⽤关⼼消息的发送、接收、⾳频的录制、停⽌录制、接受⾳频等逻辑，只需要根据数据来展⽰不同的样式即可。
这样Vue的响应式就充分获得了⽤武之地：⽆需⽤代码对样式展⽰进⾏控制，只需要设计合理的数据格式和样式模板，然后注⼊不同的数据即可。
模板页⾯：使⽤v-if控制，修改chatList⾥的对象内容即可改变页⾯展⽰。
根据业务需求，将ChatRecord可能接收到的数据分为以下⼏类：
发送⽅为⾃⼰：
⽂本输⼊，显⽰⽂本
实现简单，不做赘述。
语⾳输⼊ Loading状态，显⽰波纹动画和计时
计时器使⽤JS的setInterval⽅法，每100ms更新⼀次录制时长 dTimer = setInterval(() => {
this.audioDuration = this.audioDuration + 0.1
}, 100)
停⽌后清空计时器：
语⾳输⼊完毕，根据录制的语⾳，绘制波纹
效果：
使⽤wavesurfer插件:
initWaveSurfer() {
this.$nextTick(() => {
this.wavesurfer = ate({
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.wavesurfer.load(res)
setTimeout(() => {
this.audioDuration = AudioDuration()
}, 100)
})
})
},
// 将⾳频转化成url地址
convertAudioToUrl(audio) {
let blobUrl = ''
if (this.data.sendBy === 'self') {
blobUrl = ateObjectURL(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, {
/
/ 这⾥⼀定要处理⼀下 ateObjectURL
preview: ateObjectURL(result),
name: `XXX.wav`
})
resolve(ateObjectURL(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。
svg canvas
使⽤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
}, il(this.$refs.audioPlayer.duration) * 1000)
}
},
聊天记录⾃动定位到最后⼀条：
使⽤scrollIntoView()⽅法
记录每次会话对应的记录ID（recordId）：
定义单次会话的id，并在返回的消息中回传，从⽽建⽴多条websocket返回的关联关系。
以上就是全部实现。难点主要是请求麦克风权限和对⾳频进⾏编码，在加wav头时必须保证和采样时的采样率、频率⼀致。以上就是Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例的详细内容，更多关于vue 实现H5聊天对话交互的资料请关注其它相关⽂章！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。