js+jquery实现歌词滚动播放

效果图
说明
代码
源码下载

学习资源推荐

效果图

说明

可快进，后退，播放完成自动重新播放

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>js实现歌词滚动播放</title><style>* {margin: 0;padding: 0;}.bg {width: 100%;height:360px;background-color:#333;margin:20px auto;color: #fff;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: #2ecc71;font-weight: bold;font-size: 20px;}</style>
</head><body><div class="bg"></div><center> <audio src="./audio.mp3" controls></audio></center><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script type="text/javascript">$(function() {function parseLyric(text) {//按行分割歌词let lyricArr = text.split('\n');//console.log(lyricArr)//0: "[ti:七里香]" "[ar:周杰伦]"...let result = []; //新建一个数组存放最后结果//遍历分割后的歌词数组，将格式化后的时间节点，歌词填充到result数组for (i = 0; i < lyricArr.length; i++) {let playTimeArr = lyricArr[i].match(/\[\d{2}:\d{2}((\.|\:)\d{2})\]/g); //正则匹配播放时间let lineLyric = "";if (lyricArr[i].split(playTimeArr).length > 0) {lineLyric = lyricArr[i].split(playTimeArr);}if (playTimeArr != null) {for (let j = 0; j < playTimeArr.length; j++) {let time = playTimeArr[j].substring(1, playTimeArr[j].indexOf("]")).split(":");//数组填充result.push({time: (parseInt(time[0]) * 60 + parseFloat(time[1])).toFixed(4),content: String(lineLyric).substr(1)});}}}return result;}let text = "[ti:七里香]\n[ar:周杰伦]\n[al:七里香]\n[by:]\n[offset:0]\n[00:00.00]七里香 - 周杰伦 (Jay Chou)\n[00:06.96]词：方文山\n[00:13.93]曲：周杰伦\n[00:20.90]编曲：钟兴民\n[00:27.87]窗外的麻雀在电线杆上多嘴\n[00:34.52]你说这一句很有夏天的感觉\n[00:41.23]手中的铅笔在纸上来来回回\n[00:47.58]我用几行字形容你是我的谁\n[00:53.33]\n[00:54.31]秋刀鱼的滋味猫跟你都想了解\n[01:01.65]初恋的香味就这样被我们寻回\n[01:07.74]那温暖的阳光像刚摘的鲜艳草莓\n[01:14.21]你说你舍不得吃掉这一种感觉\n[01:20.91]雨下整夜我的爱溢出就像雨水\n[01:27.67]院子落叶跟我的思念厚厚一叠\n[01:34.41]几句是非也无法将我的热情冷却\n[01:41.41]\n[01:41.95]你出现在我诗的每一页\n[01:48.11]雨下整夜我的爱溢出就像雨水\n[01:54.64]窗台蝴蝶像诗里纷飞的美丽章节\n[02:01.42]我接着写\n[02:03.91]把永远爱你写进诗的结尾\n[02:08.98]你是我唯一想要的了解\n[02:14.80]\n[02:42.26]雨下整夜我的爱溢出就像雨水\n[02:48.68]院子落叶跟我的思念厚厚一叠\n[02:55.43]几句是非也无法将我的热情冷却\n[03:03.03]你出现在我诗的每一页\n[03:08.79]\n[03:09.46]那饱满的稻穗幸福了这个季节\n[03:16.77]而你的脸颊像田里熟透的蕃茄\n[03:22.82]你突然对我说七里香的名字很美\n[03:29.27]我此刻却只想亲吻你倔强的嘴\n[03:35.97]雨下整夜我的爱溢出就像雨水\n[03:42.72]院子落叶跟我的思念厚厚一叠\n[03:49.43]几句是非也无法将我的热情冷却\n[03:56.90]你出现在我诗的每一页\n[04:02.76]\n[04:03.50]整夜我的爱溢出就像雨水\n[04:09.58]窗台蝴蝶像诗里纷飞的美丽章节\n[04:16.66]我接着写\n[04:18.42]\n[04:18.93]把永远爱你写进诗的结尾\n[04:24.01]你是我唯一想要的了解";let audio = document.querySelector('audio');let result = parseLyric(text); //执行lyc解析// 把生成的数据显示到界面上去let $ul = $("<ul></ul>");for (let i = 0; i < result.length; i++) {let $li = $("<li></li>").text(result[i].content);$ul.append($li);}$(".bg").append($ul);let lineNo = 0; // 当前行歌词let preLine = 6; // 当播放6行后开始滚动歌词let lineHeight = -30; // 每次滚动的距离// 滚动播放 歌词高亮  增加类名activefunction highLight() {let $li = $("li");$li.eq(lineNo).addClass("active").siblings().removeClass("active");if (lineNo > preLine) {$ul.stop(true, true).animate({ top: (lineNo - preLine) * lineHeight });}}highLight();// 播放的时候不断渲染audio.addEventListener("timeupdate", function() {if (lineNo == result.length) return;if ($("li").eq(0).hasClass("active")) {$("ul").css("top", "0");}lineNo =getLineNo(audio.currentTime);highLight();lineNo++;});// 当快进或者倒退的时候，找到最近的后面那个result[i].timefunction getLineNo(currentTime) {if (currentTime >= parseFloat(result[lineNo].time)) {// 快进for (let i = result.length - 1; i >= lineNo; i--) {if (currentTime >= parseFloat(result[i].time)) {return i;}}} else {// 后退for (let i = 0; i <= lineNo; i++) {if (currentTime <= parseFloat(result[i].time)) {return i - 1;}}}}//播放结束自动回到开头audio.addEventListener("ended", function() {lineNo = 0;highLight();audio.play();$("ul").css("top", "0");});});</script>
</body></html>

源码下载

链接提取码：y3j9

js+jquery实现歌词滚动播放相关推荐

jquery实现歌词滚动
jquery实现歌词滚动 1.css /* CSS Document */* {margin: 0;padding: 0;font-size: 12px; }body {background: no ...
用JavaScript实现歌词滚动播放
各种音乐播放器上都有一个自动滚动播放歌词的功能,那么这个功能用JavaScript怎么实现呢?请看下文. 一般音乐播放器使用的歌词格式都是lrc,为了方便处理,我们这里使用XML格式的歌词.介绍一个网 ...
html+js的lrc歌词同步播放器
<html> <head> <title>lrc歌词同步播放器</title> <style> body, td { font-family ...
js实现图片连续滚动播放
实现效果: 1.页面加载后,图片自动开始滚动播放 2.鼠标移入暂停,并放大显示,鼠标移出后继续滚动实现思路: 1.首先设置一个外框,固定宽度,超出范围的图片隐藏掉 2.复制一遍图片列表,追加一组在当 ...
html js音乐歌词滚动,如何用html+js实现音乐歌词同步播放器
html> 随便听听 var playlist=[]; var bglist=[ "http://img04.taobaocdn.com/imgextra/i4/1655943686/ ...
java实现歌词滚动,jQuery实现的简单歌词滚动功能示例
本文实例讲述了jQuery实现的简单歌词滚动功能.分享给大家供大家参考,具体如下: jquery实现歌词滚动 1.css /* CSS Document */ * { margin: 0; paddi ...
JS制作音乐播放器并高亮歌词滚动以及按钮暂停播放切歌
简介:高亮歌词这里需要说一个文件,也就是.lrc文件,这个功能制作是将文件中时间与音乐文件中播放的进度作比较,实现文件何时滚动换行以及高亮的,好了看代码(我的歌曲文件是周总的<等你下课>) ...
JS原生---歌词滚动效果案例
[开门见山] 实现目标: 需要让歌词列表随着播放的时间更新而滚动,即实时的跟随歌曲的进度而滚动效果: 需要事先准备的东西: 1.音频(mp3格式): 2.歌词(详细): 先展示html和css的实现 ...
用JS实现歌词与播放音乐同步
用JS实现歌词与播放音乐同步第一步:把歌词解析成JS对象参看我的上一篇文章:用JS解析LRC格式的歌词解析后的歌词写到页面的一个列表中,效果如下: 主要HTML代码: <!-- 播放器 - ...

js+jquery实现歌词滚动播放

js+jquery实现歌词滚动播放

效果图

说明

代码

源码下载

js+jquery实现歌词滚动播放相关推荐

最新文章

热门文章