html页面制作滚动歌词

效果（视频转的gif，效果差，凑活看看吧）：

在我们制作页面音乐的时候，我们一般利用audio标签，看起来效果挺不错的，可是这样的界面不够美观不是吗？那么我想，如果添加歌词滚动效果，那么界面是不是很棒？当然，我们制作的页面不涉及服务器，不然就不够纯粹了，利用简单的JS和jquery就可以完成了！！分享一下。首先我们创建一个html文件，名字随便取，比如：index.html,这个简单，不用多说。不着急开始写代码，我们在创建一个css文件，不妨就命名为musicplay.css，js的话我们直接写道html文件里面方便阅读和调整，就不创建新的js文件了，但是你要准备jQuery文件，如果没有也没关系，待会说解决方法。准备工作结束了，我们开始写了，首先在标签里面写好编码格式，顺便也把我们之前创建的css样式和jQuery引入，代码如下：
代码如下：<head><meta charset="UTF-8"><title>爱在西元前-周杰伦</title><link type="text/css" rel="stylesheet" href="css/musicplay.css" /><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script src="js/jquery-1.9.1.min.js"></script></head>head内容写好后，我们开始写body里面的了，首先我们用

放置播放器，就是标签，代码如下：
<center> <audio autoplay="autoplay src="爱在西元前.mp3" controls></audio></center>
去即可 -->接着写一个盒子，代码如下：盒子的css代码如下（功能见备注）：
* {margin: 0;padding: 0;}.bg {/* 歌词调整区 */width: 100%;/* 歌词显示盒子宽 */height: 100px;/* 歌词显示盒子高度，需要多显示几行歌词相应调大即可 *//* background-color:#333; */ /* 歌词背景颜色 */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%; /* 调整播放器宽度 *//* 其他要修改播放器在这里修改 */}
接下来就是js脚本事了，我们的设计思路是（分下面几个函数完成）：
函数1：parseLyric()分割歌词，这一步主要是为了分行显示歌词
函数2：highLight()当前放到的歌词高亮显示，为了表示当前唱到那一句了
函数3：audio.addEventListener（）实时渲染，因为是滚动的，所以要不停的渲染
函数4：getLineNo()获取此时的行数，如果我们快进或快退的时候，歌词也要跟着我们的调整而改变
函数5：audio.addEventListener(）播放完回到开始，这个可以不做，没有太意义，这是为了完善功能解释好这几个函数之后，我直接贴代码。

<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;
}
// 这里请按照格式放入相应歌词--开始
// 格式可能看着很复杂,其实是根据lrc歌词文件换句前加入\n 换行符,然后删除多余空行.即可!
let text = "[ti:爱在西元前][ar:周杰伦][al:范特西]\n[00:00.00]爱在西元前\n[00:04.00]作词：方文山 作曲：周杰伦 \n[00:12.00]演唱：周杰伦\n[00:16.00]\n[00:32.20]古巴比伦王颁布了汉摩拉比法典\n[00:35.69]刻在黑色的玄武岩 距今已经三千七百多年\n[00:40.05]你在橱窗前 凝视碑文的字眼\n[00:43.59]我却在旁静静欣赏你那张我深爱的脸\n[00:47.70]\n[00:47.76]祭司 神殿 征战 弓箭 是谁的从前\n[00:51.47]喜欢在人潮中你只属于我的那画面\n[00:55.14]经过苏美女神身边 我以女神之名许愿\n[00:59.47]思念像底格里斯河般的漫延\n[01:03.28]当古文明只剩下难解的语言\n[01:09.70]传说就成了永垂不朽的诗篇\n[01:18.18]我给你的爱写在西元前\n[01:21.15]深埋在美索不达米亚平原\n[01:25.98]几十个世纪后出土发现\n[01:28.50]泥板上的字迹依然清晰可见\n[01:33.35]我给你的爱写在西元前\n[01:36.10]深埋在美索不达米亚平原\n[01:41.34]用楔形文字刻下了永远\n[01:43.65]那已风化千年的誓言 一切又重演\n[01:50.17]\n[01:51.70]祭司 神殿 征战 弓箭 是谁的从前\n[01:55.72]喜欢在人潮中你只属于我的那画面\n[01:59.57]经过苏美女神身边 我以女神之名许愿\n[02:03.95]思念像底格里斯河般的漫延\n[02:07.48]当古文明只剩下难解的语言\n[02:14.06]传说就成了永垂不朽的诗篇\n[02:22.66]我给你的爱写在西元前\n[02:25.34]深埋在美索不达米亚平原\n[02:30.36]几十个世纪后出土发现\n[02:32.86]泥板上的字迹依然清晰可见\n[02:37.69]我给你的爱写在西元前\n[02:40.49]深埋在美索不达米亚平原\n[02:45.30]用楔形文字刻下了永远\n[02:48.01]那已风化千年的誓言 一切又重演\n[02:52.90]我感到很疲倦 离家乡还是很远\n[02:59.41]害怕再也不能回到你身边\n[03:06.76]\n[03:07.95]我给你的爱写在西元前\n[03:10.73]深埋在美索不达米亚平原\n[03:15.82]几十个世纪后出土发现\n[03:18.22]泥板上的字迹依然清晰可见\n[03:23.30]我给你的爱写在西元前\n[03:25.89]深埋在美索不达米亚平原\n[03:30.76]用楔形文字刻下了永远\n[03:33.59]那已风化千年的誓言 一切又重演";
// 这里请按照格式放入相应歌词--结束
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 =1; // 当播放6行后开始滚动歌词
let lineHeight = -30; // 每次滚动的距离        // 滚动播放 歌词高亮  增加类名active
function 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].time
function 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>

源代码地址：百度网盘直接下载
提取码：h7g9

html页面制作滚动歌词相关推荐

php中文歌词,html如何制作滚动歌词
html制作滚动歌词的方法:首先在标签里面写好编码格式,引入css样式和jQuery:然后放置播放器,代码为[]. 本教程操作环境:windows7系统.html5版,DELL G3电脑. html制 ...
前端页面制作滚动字幕
滚动字幕语法: <marqueebehavior="scroll/alternate"direction="up/down/left)/right"sc ...
滚动歌词制作之 ncm格式转mp3
导读 BesLyric 可以将 ncm格式转MP3 了! 前几天有网友到我的博客下评论说现在会员才能下载下来的音乐发现后缀是 ncm, 没法使用 Beslyric 来制作歌词,昨天升级了一下软件,将 ...
axure9怎么让页面上下滑动_Axure RP 9如何制作滚动页面？
Axure RP 9是一款非常方便好用的交互原型设计软件,Axure RP 9拥有全面的UI.新的设计和文档特征,算是向前迈出了一大步,拥有全新的硬件加速渲染引擎,在原来的基础上已经彻底破坏并重建了W ...
企业网络推广专员浅析有利于企业网络推广的页面制作技巧有哪些？
在当下的企业网络推广阶段中,越来越多的企业网站制作技术越来越娴熟,导致在同行企业网站竞争环境越来越激烈,每天想要排名优化在搜索引擎首页的关键词也很多,但是只有十个企业是赢家.这时就需要站长在完成企业网 ...
html 字幕飘动效果,html 滚动字幕制作滚动字幕效果参数
制作滚动字幕效果:marquee标签如下:<MARQUEE direction=up height=146 οnmοuseοut=start() οnmοuseοver=stop() scro ...
10个H5页面制作工具
目前市面上各种H5页面制作工具,其中既有滥竽充数的,也有真材实料的.但是怎么区分呢?其实最简单的办法就是看案例,也就是用这些H5页面制作工具能做出哪些类型的H5. 笔者在创作H5的路上走过很多坑,基本 ...
10个H5页面制作工具，功能全面评测
目前市面上各种H5页面制作工具,其中既有滥竽充数的,也有真材实料的.但是怎么区分呢?其实最简单的办法就是看案例,也就是用这些H5页面制作工具能做出哪些类型的H5. 笔者在创作H5的路上走过很多坑,基本 ...
Android应用开发--MP3音乐播放器滚动歌词实现
Android应用开发--MP3音乐播放器滚动歌词实现 2013年6月2日简.美音乐播放器开发记录 -----前话有网友给我博客评论说,让我借鉴好的Android代码,代码贴出来的时候最好整体先 ...

html页面制作滚动歌词

html页面制作滚动歌词相关推荐

最新文章

热门文章