js+jquery实现网页播放音乐歌词高亮自动滚动WordPress钻芒简洁美化版

效果如下:

截图：

js+jquery实现网页播放音乐歌词高亮自动滚动WordPress钻芒简洁美化版-钻芒博客

样式根据自己需求修改

项目说明

想给关于页面加个音乐播放控件，加完看着又想加个歌词滚动，嗯..想在的效果和预想的一模一样。（一体性挺强）

文件名： js+jquery实现网页播放音乐歌词高亮自动滚动WordPress钻芒简洁美化版
文件功能描述：js+jquery实现网页播放音乐歌词高亮自动滚动
author：ZMKI修改原作csdn:_冷月心
时间：2019年8月21日14:12:13
修改标识： 钻芒博客www.zmki.cn
修改描述：美化页面，简洁一体！还有新增注释...
项目地址:https://www.zmki.cn/4787.html
原项目地址:https://blog.csdn.net/qq_42813491/article/details/92798869

代码如下:

<!DOCTYPE html>
<!-- /*---------------------------------------------------------------- 
// 文件名： js+jquery实现网页播放音乐歌词高亮自动滚动WordPress钻芒简洁美化版
// 文件功能描述：js+jquery实现网页播放音乐歌词高亮自动滚动
// author：ZMKI修改 原作csdn:_冷月心
// 时间：2019年8月21日20:12:13
// 修改标识： 钻芒博客www.zmki.cn
// 修改描述：美化页面，简洁一体！还有新增注释...
// 项目地址:https://www.zmki.cn/4787.html
// 原项目地址:https://blog.csdn.net/qq_42813491/article/details/92798869
//----------------------------------------------------------------*/
 -->
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>十七岁</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.bg {
				/* 歌词调整区 */
				width: 100%;/* 歌词显示盒子宽 */
				height: 100px;/* 歌词显示盒子高度，需要多显示几行歌词相应调大即可 */
				/*  */ /* 歌词背景颜色 */
				margin: 15px auto;
				color: darkgrey;/* 歌词默认颜色,灰色 */
				font-size: 12px;/* 歌词字体默认大小 */
				overflow: hidden;
				position: relative;
				font-family: "微软雅黑";
			}

			.bg ul {
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				list-style: none;
			}

			.bg ul li {
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
			}

			.bg ul li.active {
				/* 歌词高亮滚动区 */
				color: black;/* 歌词滚动高亮颜色 */
				/* font-weight: bold; *//* 文本加粗，不要，太丑了！ */
				font-size: 15px; /* 歌词滚动行文字大小 */
			}

			audio {
				/* 播放器调整区 */
				width: 100%; /* 调整播放器宽度 */
				/* 其他要修改播放器在这里修改 */

			}
		</style>
	</head>

	<body>
		<center> <audio autoplay="autoplay" src="https://a-oss.zmki.cn/2019/ijqeaf0kniiaeoijadsolzmpel4179.mp3" controls></audio></center><!-- 这里修改播放器播放音乐 -->
		<!-- 上边的autoplay="autoplay"属性为自动播放，不想让自动播放删去即可 -->
		<div class="bg"></div><!-- 歌词显示盒子 -->
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 <script type="text/javascript">
    $(function() {
        function parseLyric(text) {
            //按行分割歌词