vue1.x项目中添加语音动态播放相关功能

template中

<!--每个页面只有一个audio对象，当点击时给此audio赋值-->
<audio @ended="audioEndPlay" v-el:audioEl></audio>



<!--commentType 0 文本  1 语音-->
<template v-if="items.commentType === 1">
	<div class="text" style="display: flex;flex-wrap:  nowrap;">
		<div @click="changeAudio(childrenIndex, items.commentContent)" class="audio_box" :style="{width: items.audioComWidth}" :class="{'audio_box_ani':childrenIndex === currentIndex }"></div>
		<div class="audio_item_duration">{{  items.voiceTimeLength  }}"</div>
	</div>
</template>

<span class="text" v-else>
	{{ items.commentContent}}
</span>

script

changeAudio(id, src) {
    let audio = this.$els.audioel
    if (this.currentIndex === id) {
        audio.pause();
		this.currentIndex = ''
	} else {
        console.log(111)
        this.currentIndex = id
        audio.src = this.audioPre + src
        audio.addEventListener("canplaythrough", function () {
            audio.play();
        }, false);
 
	}

},

audioEndPlay() {
    console.log("完成播放")
    this.currentIndex = ''
}

// 对audio赋值
    this.commentList.forEach((item, index) => {
        // let audio = document.createElement('audio')
        // Vue.set(item, 'audioSrc', this.audioSrcList[index]);
        // audio.src = this.audioPre + item.audioSrc
        // audio.addEventListener("canplaythrough", function () {
        //     console.log(audio.duration)
        //     Vue.set(item, 'audioDuration', Math.round(audio.duration))
        //     Vue.set(item, 'audioComWidth', Math.round(audio.duration) / 60 * 600 + 'px')
        // }, false);
		if (item.commentType === 1) {
		    let vLength = ''
			if (item.voiceTimeLength < 20) {
                vLength = 100
			} else if (item.voiceTimeLength > 60) {
                vLength = 300
			} else {
                vLength = Math.round(item.voiceTimeLength) / 60 * 300
			}
            Vue.set(item, 'audioComWidth', vLength + 'px')
		}

    })

css 动画播放

.audit-details-list .audio_box {
    display: inline-block;
    width: 240px;
    height: 23px;
    /*background-color: ;*/
    background: url("../images/audioToRight03.png") no-repeat 12px/cover #608FDB;
    border-radius: 5px;
    background-size: 12px 16px;
    cursor: pointer;

}

.audio_box_ani {
    -webkit-animation: voiceplay 1s infinite step-start;
    -moz-animation: voiceplay 1s infinite step-start;
    -o-animation: voiceplay 1s infinite step-start;
    animation: voiceplay 1s infinite step-start;
}


.app-voice-you .app-voice-pause{
    /*从未播放*/

}
.app-voice-you .app-voice-play{
    /*播放中（不需要过渡动画）*/

}
@-webkit-keyframes voiceplay {
    0%,
    100% {
        background-image: url("../images/audioToRight01.png");
    }
    33.333333% {
        background-image: url("../images/audioToRight02.png");
    }
    66.666666% {
        background-image: url("../images/audioToRight03.png");
    }
}

.audit-details-list .audio_item_duration {
    line-height: 23px;
    margin-left: 20px;





}

效果图