设计效果如下：

设计要求如下：

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 - 300return 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 / 1000this.$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 = ratethis.$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 * 7let to = item.to + i * 7words = 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 = 0this.endTime = 0}}},mounted() {// 当音频加载完成时，获取总时长并更新计算属性this.$refs.audioPlayer.addEventListener('loadedmetadata', () => {this.$refs.audioPlayer.pause()this.currentTime = 0this.endTime = 0this.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 - 300return true}})// 暂停播放if (this.endTime) {if (this.currentTime >= this.endTime) {this.$refs.audioPlayer.pause()this.endTime = 0}}})},methods: {// 播放速度toPlaybackRate(rate) {this.curRate = ratethis.$refs.audioPlayer.playbackRate = rate},// 命中文字特殊显示getHitRuleWords(words, rule) {rule.forEach((item, i) => {let from = item.from + i * 7let to = item.to + i * 7words = words.slice(0, from) + '<b>' + words.slice(from, to) + '</b>' + words.slice(to)})return words},// 文字播放按钮toPlay(begin, end) {this.$refs.audioPlayer.currentTime = begin / 1000this.$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>