歌词同步滚动，比市面的大多数效果都好，在平滑滚动的前提下加上了鼠标滚轮滚动以及上下拖拽功能

最新推荐文章于 2023-03-05 13:07:25 发布

醒着做梦yyds

最新推荐文章于 2023-03-05 13:07:25 发布

阅读量809

点赞数 1

分类专栏：前端文章标签： javascript jquery html5 js java

本文链接：https://blog.csdn.net/weixin_45448619/article/details/109377459

版权

本文介绍了一种歌词同步滚动的实现方法，利用JavaScript、jQuery和HTML5，结合音频控件的ontimeupdate方法，实现歌词的高亮和平滑滚动。同时，增加了鼠标滚轮滚动和上下拖拽功能。还详细列举了HTML媒体元素的常用属性和JavaScript相关方法，帮助理解音频播放的控制和检测。

摘要由CSDN通过智能技术生成

歌词滚动核心原理

解析歌词文件，转换成JSON 对象，java 代码放在最下面
将歌词时间部分存到数组，字符部分放到 HTML 标签里面，通过Jquery 选中所有歌词 $li ，拿到一个类似于数组的集合，这个集合中的每一列，就对应歌词数组的时间
通过歌曲播放时候的音频控件的 ontimeupdate 方法来执行循环判断，此方法在歌曲播放的时候会被高频调用
在 ontimeupdate 方法体里，用音频控件的 currentTime 返回的当前播放时间来和时间数组里面的值做比较（此属性会随之播放进度的改变而改变）
如果当前播放时间小于时间数组 lrcTime[0] 并且大于 lrcTime[2] 那么就是播放到 lrcTime[1] 这句了，这个时候就高亮 $li[1] 并且清除上一句的高亮，这就是当前句的效果
在改变当前句效果的同时，还要做一个上下滚动效果，通过改变歌词列父级元素的 translateY 来实现，这个值是通过计算播放到第几句，然后乘以单句歌词的高度来计算的，比如单句歌词的高度是，20，那么第一句的 translateY 就是 20，到了第二句就是40,
到了这里，歌词的基本效果就出来了，但是不可拖动，所以我在歌词父元素上面蒙了一个 DIV，这DIV 里面有一个元素在歌词加载的时候，把它的高度设置成和歌词高度一致，让其出现滚动条，就可以通过这个滚动条的高度来控制歌词框的 translateY 的值了，这就是滚轮滚动的效果
拖拽效果用文字很难表达，自己看吧，
直接上源码，直接搞个歌词解析一下粘贴过来，然后修改一下音频控件的路径播放一下就知道是什么效果了，
谷歌浏览器播放本地音频文件不能改变他的播放时间，比如代码设置，或者拖拽音频控件进度条都不行，我就采坑了

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>歌词同步</title>
		<style type="text/css">
			/*当前那句歌词的动画效果，灰变成白*/
			/* Chrome, Safari, Opera */
			@-webkit-keyframes currLrc {
    
				0% {
    font-size: 16px;}
				100% {
    color: #fff;font-size: 16px;}
			}
			/* Standard syntax */
			@keyframes currLrc {
    
				0% {
    font-size: 16px;}
				100% {
    color: #fff;font-size: 16px;}
			}
			/*当前歌词的上一句的动画效果，白变成灰*/
			/* Chrome, Safari, Opera */
			@-webkit-keyframes lastLrc {
    			
				0% {
    color: #fff;font-size: 12px;}
				100% {
    color: #989898;font-size: 12px;}
			}
			/* Standard syntax */
			@keyframes lastLrc {
    
				0% {
    color: #fff;font-size: 12px;}
				100% {
    color: #989898;font-size: 12px;}
			}
			/*滚动条整体样式*/
			#scrollDiv::-webkit-scrollbar {
    
			width: 1px;
			/*background-color: white;*/
			/*display: none;*/
			/*高宽分别对应横竖滚动条的尺寸*/
			/*height: 6px;*/
			/*border-radius: 5px;*/
			}
			/*滚动条里面小方块*/
			/*#scrollDiv::-webkit-scrollbar-thumb {
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
            background-color: black;
        }*/
			/*滚动条里面轨道*/
			/*#scrollDiv::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
            border-radius: 3px;
            background-color: transparent;
        }*/
       

			/*歌词最大框样式，相对定位一定保留，其他可以修改*/
			#lrcModel {
    
				position: relative;
				width: 325px;
				height: 400px;
				margin: 0;
				padding: 0;
				background-color: rgb(33, 36, 41);
				box-shadow: -3px 8px 135px -40px inset black;
			}
			
			#lrcModel * {
    
				margin: 0;
				padding: 0;
			}
			
			/*歌词的样式*/
			#lrcModel li {
    
				overflow: hidden;
				padding-top: 5px;
				padding-bottom: 5px;
				text-align: center;
				color: #989898;
				font-size: 12px;
				list-style: none;
			}
			
			/*不要修改这里大小，或者边距*/
			#lrcModel #lrcUlParent {
    
				display: inline-block;
				height: 100%;
				width: 100%;
				overflow: hidden;
			}
			
			/*不要修改这里大小，或者边距*/
			#lrcModel #lrcList {
    
				width: 100%;
			}
			
			/*隐藏的操作面板的样式，不要修改这里大小，或者边距*/
			#lrcModel #scrollDiv {
    
				vertical-align: top;
				display: inline-block;
				width: 100%;
				/*background-color: red;*/
				height: 100%;
				overflow-y: scroll;
				position: absolute;
				left: 0px;
				top: 0px;
				opacity: 0.001;		/*透明度不能为0，否则鼠标滚轮滚动没效果*/
			}
			#lrcModel #scrollDiv:hover {
    
				cursor: pointer;
			}

		</style>
	</head>

	<body>
		<audio controls loop="loop" id="audio" style="width: 400px;">
			<source src="songs/痒.mp3" type="audio/mp3">
		</audio>
		
		
		
			<!-- 歌词框，这里的结构不能动-->
		<div id="lrcModel">
			<div id="lrcUlParent">
				<ul id="lrcList">