仿三方智能对话分析原始会话窗口

设计效果如下：

设计要求如下：

1、顶部播放条播放时，文字内容自动滚动。

监听audio事件timeupdate，只要播放器在播放就会触发该事件。每行文字有开始时间begin。判断当前时间（currentTime）<=开始时间（begin）时，滚动到相应位置。

        // 监听当前播放时间和音频结束事件
        this.$refs.audioPlayer.addEventListener('timeupdate', () => {
            this.currentTime = this.$refs.audioPlayer.currentTime
            // 播放或拖动播放器文字滚动
            this.data.dialogue.some(item => {
                if (item.begin >= (this.currentTime * 1000)) {
                    this.$refs.dialogue.scrollTop = this.$refs[item.begin][0].offsetTop - 300
                    return true
                }
            })
            // 暂停播放
            if (this.endTime) {
                if (this.currentTime >= this.endTime) {
                    this.$refs.audioPlayer.pause()
                    this.endTime = 0
                }
            }
        })

2、点击文字边上的播放按钮，顶部播放器跳转到指定位置播放。

toPlay方法能拿到当前文字行的开始和结束时间（服务端给的），把播放器的当前时间设置成开始时间，结束时间设置给this.endTime，监听audio事件timeupdate中有判断：如果this.endTime存在且this.currentTime >= this.endTime，就暂停播放。

        // 文字播放按钮
        toPlay(begin, end) {
            this.$refs.audioPlayer.currentTime = begin / 1000
            this.$refs.audioPlayer.play()
            this.endTime = end / 1000
        },

3、倍速值扩展，增加2.5，3.0

audio的controls属性产生的默认播放器播放速度最大是2，直接扩展没找到解决办法。

通过属性controlslist="noplaybackrate nodownload"把他们隐藏了

noplaybackrate：隐藏播放速度

nodownload：隐藏下载

然后增加2个按钮（下载和倍速）：

        <div class="audio-btns">
            <el-button type="text" class="each-btn" @click="toDownload">下载</el-button>
            <el-popover placement="bottom" trigger="hover" width="300">
                <el-button type="text" v-for="(item, i) in rateConf" :key="i" @click="