audio歌词高亮显示，歌词和歌曲可以点击切换（Vue）

效果：

歌词显示主要源码:

<link href="rabbit-lyrics/rabbit-lyrics.css" rel="stylesheet" type="text/css" />
<script src="rabbit-lyrics/rabbit-lyrics.js" type="text/javascript"></script>

下载rabbit-lyrics参考 https://mp.csdn.net/mdeditor/85112513#
HTML

<div id="lyrics-1" data-media="#myaudio" data-height="100" style="display: none;"></div>

<div id="audioInfo">
	<audio id="myaudio" :src="song.musicUrlAudio" ref="audio" autoplay @pause="onPause" @play="onPlay" @timeupdate="onTimeupdate"
	 @loadedmetadata="onLoadedmetadata" @error="error" @ended="nextMusic">
	</audio>
</div>

JavaScript

var app = new Vue(){
	created: function () {
	     this.readLyric();
	}
	preMusic() {
		this.readLyric();
	},
	nextMusic() {
		this.readLyric();
	},
	methods:{
		readLyric() {
			var btnmusic = document.getElementById('musicImage');
			var btnlyrics = document.getElementById('lyrics-1')
			if (this.song.musicUrlLyric) {
				btnmusic.style.display = 'block';
				btnlyrics.style.display = 'none';
				fetch(this.song.musicUrlLyric).then(function (response) {
					return response.text();
					console.log(response)
				}).then(function (text) {
					parseLyric(text);
				});
				
				btnmusic.addEventListener("click", click);
				function click(e) {
					//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时浏览器的缩放、滚动条滚动等
					e.preventDefault();
					btnmusic.style.display = 'none';
				btnlyrics.style.display = 'block';
				};
				btnlyrics.addEventListener("click", click2);
				function click2(e) {
					e.preventDefault();
					btnmusic.style.display = 'block';
				btnlyrics.style.display = 'none';
				};
			} else {
				btnlyrics.style.display = 'none';
				btnmusic.style.display = 'block';
			}
		},
	}
}
function parseLyric(text) {
	document.getElementById('lyrics-1').innerHTML = text;
	new RabbitLyrics({
		element: document.getElementById('lyrics-1'),
		mediaElement: document.getElementById('myaudio'),
	})
} 

参考我的栏目：https://blog.csdn.net/fengtingyan/article/category/8542284