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

设计效果如下：

设计要求如下：

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="toPlaybackRate(item)">{{ item }}</el-button>
                <el-button type="text" slot="reference" class="each-btn">倍速 {{ curRate === 1.0 ? '正常' : curRate }}</el-button>
            </el-popover>
        </div>

点击倍速效果如下：

倍速的实现方法：

        // 播放速度
        toPlaybackRate(rate) {
            this.curRate = rate
            this.$refs.audioPlayer.playbackRate = rate
        },

this.curRate用于展示当前选中的倍速，this.$refs.audioPlayer.playbackRate是给播放器赋值为当前选中的倍速。

4、命中规则文字红色显示

getHitRuleWords方法如下：

        // 命中文字特殊显示，b标签占7个字节，所以在计算后面的from、to时要加上前面加进去的b标签
        getHitRuleWords(words, rule) {
            rule.forEach((item, i) => {
                let from = item.from + i * 7
                let to = item.to + i * 7
                words = words.slice(0, from) + '<b>' + words.slice(from, to) + '</b>' + words.slice(to)
            })
            return words
        }

完整代码（vue实现）如下：

<template>
<div class="audio-out">
    <div class="audio-top">
        <!-- 添加一个音频元素 -->
        <audio ref="audioPlayer" preload="auto" controls controlslist="noplaybackrate nodownload" :src="data.audioUrl" style="width: 480px; height: 30px;"></audio>
        <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="toPlaybackRate(item)">{{ item }}</el-button>
                <el-button type="text" slot="reference" class="each-btn">倍速 {{ curRate === 1.0 ? '正常' : curRate }}</el-button>
            </el-popover>
        </div>
    </div>
    <div class="audio-layer" ref="dialogue">
        <div v-for="(item, i) in data.dialogue" :key="i" :ref="item.begin">
            <template v-if="item.role === '客户'">
                <!-- 用户 or 用户命中规则 -->
                <div class="word-layer" :class="{'hit-rule': item.hitRuleInfoList.length > 0}">
                    <div class="word-header"><el-button type="primary" icon="el-icon-user" circle></el-button></div>
                    <div class="word-cont">
                        <div class="word-time">{{ item.hourMinSec }}</div>
                        <div class="word-text">
                            <div><el-button class="play-btn" type="info" icon="el-icon-caret-right" circle @click="toPlay(item.begin, item.end)"></el-button></div>
                            <template v-if="item.hitRuleInfoList">
                                <p class="text" v-html="getHitRuleWords(item.words, item.hitRuleInfoList)"></p>
                            </template>
                            <template v-else>
                                <p class="text">{{ item.words }}</p>
                            </template>
                            
                        </div>
                    </div>
                </div>
            </template>
            <template v-if="item.role === '客服'">
                <!-- 客服 -->
                <div class="word-layer layer-r" :class="{'hit-rule': item.hitRuleInfoList.length > 0}">
                    <div class="word-cont">
                        <div class="word-time">{{ item.hourMinSec }}</div>
                        <div class="word-text">
                            <template v-if="item.hitRuleInfoList">
                                <p class="text" v-html="getHitRuleWords(item.words, item.hitRuleInfoList)"></p>
                            </template>
                            <template v-else>
                                <p class="text">{{ item.words }}</p>
                            </template>
                            <div><el-button class="play-btn" type="info" icon="el-icon-caret-right" circle @click="toPlay(item.begin, item.end)"></el-button></div>
                        </div>
                    </div>
                    <div class="word-header"><el-button type="info" icon="el-icon-service" circle></el-button></div>
                </div>
            </template>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'audioView',
    props: {
        data: {
            type: Object,
            default () {
                return {
                    audioUrl: '',
                    dialogue: []
                }
            }
        }
    },
    data() {
        return {
            currentTime: 0,
            endTime: 0,
            rateConf: [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0, 2.5, 3.0],
            curRate: 1.0
        }
    },
    watch: {
        data(n) {
            if (Object.keys(n).length <= 0) {
                this.$refs.audioPlayer.pause()
                this.currentTime = 0
                this.endTime = 0
            }
        }
    },
    mounted() {
        // 当音频加载完成时，获取总时长并更新计算属性
        this.$refs.audioPlayer.addEventListener('loadedmetadata', () => {
            this.$refs.audioPlayer.pause()
            this.currentTime = 0
            this.endTime = 0
            this.toPlaybackRate(this.curRate)
        })

        // 监听当前播放时间和音频结束事件
        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
                }
            }
        })
    },
    methods: {
        // 播放速度
        toPlaybackRate(rate) {
            this.curRate = rate
            this.$refs.audioPlayer.playbackRate = rate
        },
        // 命中文字特殊显示
        getHitRuleWords(words, rule) {
            rule.forEach((item, i) => {
                let from = item.from + i * 7
                let to = item.to + i * 7
                words = words.slice(0, from) + '<b>' + words.slice(from, to) + '</b>' + words.slice(to)
            })
            return words
        },
        // 文字播放按钮
        toPlay(begin, end) {
            this.$refs.audioPlayer.currentTime = begin / 1000
            this.$refs.audioPlayer.play()
            this.endTime = end / 1000
        },
        // 下载
        toDownload() {
            window.open(this.data.audioUrl)
        }
    }
}
</script>

<style lang="scss" scoped>
.audio-out {
    display: flex;
    flex-direction: column;
    background-color: #ddd;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.audio-top {
    background-color: #f1f3f4;
    height: 55px;
}
.audio-layer {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}
.audio-btns {
    text-align: right;
    .each-btn {
        padding: 0 5px;

    }
}
// 用户
.word-layer {
    display: flex;
    margin-top: 25px;
    .word-header {
        margin: 0 10px;
        .el-button--primary {
            background-color: #e1f9ff;
            border-color: #e1f9ff;
            color: #2399ff;
        }
    }
    .word-cont {
        position: relative;
        background-color: #e1f9ff;
        border-radius: 20px;
        
    }
    .word-time {
        padding: 0 10px;
        position: absolute;
        left: 0;
        top: -20px;
        color: #999;
    }
    .word-text {
        display: flex;
        align-items: center;
        padding: 5px 10px;
    }
    .text {
        line-height: 1.5em;
    }
    .el-button.is-circle {
        padding: 5px;
        font-size: 18px;
    }
    .play-btn {
        background-color: #2399ff;
        color: #e1f9ff;
        margin: 0 10px 0 0;
    }
    .play-btn.is-circle {
        padding: 0;
        border: 0
    }
}
// 客服
.layer-r {
    justify-content: right;
    .word-time {
        left: auto;
        right: 0;
    }
    .word-cont {
        background-color: #c9c9c9;
    }
    .play-btn {
        background-color: #333;
        color: #c9c9c9;
        margin: 0 0 0 10px;
    }
}
// 命中规则
.hit-rule {
    .word-cont {
        background-color: #fdf2f3;
    }
    .play-btn {
        background-color: #bd0926;
        color: #fdf2f3;
    }
    /deep/.text b {
        color: #FF0000;
        font-weight: normal;
    }
}
</style>