Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互 (3)

页面嵌入audio标签，将hidden设置为true使其不显示：

<div> <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头时必须保证和采样时的采样率、频率一致 。