简介:高亮歌词这里需要说一个文件，也就是.lrc文件，这个功能制作是将文件中时间与音乐文件中播放的进度作比较，实现文件何时滚动换行以及高亮的，好了看代码（我的歌曲文件是周总的《等你下课》）
css代码:
.container {
width: 340px;
height: 500px;
border: 2px solid black;
border-radius: 5px;
display: flex;
flex-direction: column;
}
.img {
width: 150px;
height: 150px;
border: 1px solid cyan;
border-radius: 10px;
margin: 20px auto;
}
.container .box {
flex: 1;
overflow: hidden;
}
ul {
overflow: hidden;
transition-duration: 600ms;
}
ul,
li {
list-style: none;
padding: 0;
margin: 0;
font-size: 16px;
font-weight: bold;
}
li.on {
background-image: -webkit-linear-gradient(right, red, blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p {
overflow: hidden;
text-overflow: ellipsis;
height: 16px;
line-height: 16px;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
text-align: center;
margin-top: 0;
margin-bottom: 16px;
}
audio {
margin-top: 10px;
}html代码：
<div class="container">
<div class="img"></div>
<div class="box">
<ul id="lrclist">
<!-- 保证歌词在正中间 -->
</ul>
</div>
</div>
<audio src="./material/60054704083.flac" id="audio" controls="controls" loop></audio>
<button onclick="play()">播放</button>
<button onclick="over()">暂停</button>
<button onclick="stop()">静音</button>
<button onclick="end()">播放完毕后</button>
<button onclick="update()">我要切歌</button>js代码：
// 歌词文件 =》等你下课
var lrcJSON = {
"[00:01.74]": "等你下课(with 杨瑞代) - 周杰伦",
"[00:08.09]": "词：周杰伦",
"[00:10.18]": "曲：周杰伦",
"[00:12.61]": "",
"[00:15.16]": "Jay：你住的 巷子里",
"[00:18.77]": "我租了一间公寓",
"[00:21.93]": "",
"[00:22.48]": "为了想与你不期而遇",
"[00: 27.25]": "",
"[00: 28.55]": "高中三年 我为什么",
"[00: 31.60]": "为什么不好好读书",
"[00: 34.55]": "",
"[00: 35.69]": "没考上跟你一样的大学",
"[00: 39.89]": "",
"[00: 40.64]": "我找了份工作",
"[00: 42.89]": "",
"[00: 43.73]": "离你宿舍很近",
"[00: 46.23]": "",
"[00: 46.98]": "当我开始学会做蛋饼",
"[00: 50.41]": "才发现你 不吃早餐",
"[00: 55.24]": "喔 你又擦肩而过",
"[00: 59.33]": "",
"[01: 00.01]": "你耳机听什么",
"[01: 02.52]": "",
"[01: 03.18]": "能不能告诉我",
"[01: 05.64]": "",
"[01: 06.74]": "合：躺在你学校的操场看星空",
"[01: 13.50]": "",
"[01: 14.32]": "教室里的灯还亮着你没走",
"[01: 19.76]": "",
"[01: 20.78]": "记得 我写给你的情书",
"[01: 26.32]": "",
"[01: 27.28]": "都什么年代了",
"[01: 29.68]": "",
"[01: 30.54]": "到现在我还在写着",
"[01: 34.17]": "总有一天总有一年会发现",
"[01: 39.54]": "",
"[01: 40.30]": "有人默默的陪在你的身边",
"[01: 46.10]": "",
"[01: 46.97]": "也许 我不该在你的世界",
"[01: 52.47]": "",
"[01: 53.33]": "当你收到情书",
"[01: 55.70]": "",
"[01: 56.78]": "也代表我已经走远",
"[02: 01.67]": "",
"[02: 24.25]": "Gary：学校旁 的广场",
"[02: 27.98]": "",
"[02: 28.54]": "我在这等钟声响",
"[02: 31.36]": "",
"[02: 32.39]": "等你下课一起走好吗",
"[02: 37.34]": "Jay：弹着琴 唱你爱的歌",
"[02: 41.52]": "暗恋一点都不痛苦",
"[02: 43.88]": "Gary：一点都不痛苦",
"[02: 45.43]": "Jay：痛苦的是你",
"[02: 46.83]": "合：根本没看我",
"[02: 49.75]": "Jay：我唱这么走心",
"[02: 52.23]": "Gary：这么走心",
"[02: 53.40]": "Jay：却走不进你心里",
"[02: 55.49]": "Gary：进你心里",
"[02: 56.96]": "Jay：在人来人往",
"[02: 58.50]": "合：找寻着你 守护着你",
"[03: 01.74]": "不求结局",
"[03: 04.63]": "合：喔",
"[03: 06.13]": "Gary：你又擦肩",
"[03: 07.57]": "合：而过",
"[03: 08.97]": "",
"[03: 09.62]": "Jay：我唱告白气球",
"[03: 11.86]": "",
"[03: 12.94]": "终于你回了头",
"[03: 15.69]": "",
"[03: 16.94]": "合：躺在你学校的操场看星空",
"[03: 23.27]": "",
"[03: 24.23]": "教室里的灯还亮着你没走",
"[03: 29.54]": "",
"[03: 30.58]": "记得 我写给你的情书",
"[03: 35.76]": "",
"[03: 37.04]": "都什么年代了",
"[03: 39.09]": "",
"[03: 40.19]": "到现在我还在写着",
"[03: 43.89]": "总有一天总有一年会发现",
"[03: 49.31]": "",
"[03: 50.07]": "有人默默的陪在你的身边",
"[03: 55.87]": "",
"[03: 56.68]": "也许 我不该在你的世界",
"[04: 02.12]": "",
"[04: 02.98]": "当你收到情书",
"[04: 05.29]": "",
"[04: 06.59]": "也代表我已经走远"
}
var lrcTime = [];//歌词对应的时间数组
var ul = document.getElementById('lrclist');//获取ul
var i = 0;
for (const key in lrcJSON) {
if (lrcJSON.hasOwnProperty(key)) {
var value = lrcJSON[key];
lrcTime[i++] = parseFloat((parseFloat(key.substr(1, 3)) * 60 + parseFloat(key.substring(4, 10))).toFixed(2));//00:00.000转化为00.000格式
ul.innerHTML += "<li><p>" + lrcJSON[key] + "</p></li>";//ul里填充歌词
}
}
lrcTime[lrcTime.length] = lrcTime[lrcTime.length - 1] + 3;//如不另加一个结束时间，到最后歌词滚动不到最后句
var $li = ul.getElementsByTagName('li');//获取所有li
var currentLine = 0;//当前播放到哪一句了
var currentTime; //当前播放的时间
var ppxx;//保存ul的translateY值
window.onload = function () {
var bgm = document.getElementById('audio');
// 监听音频播放结束后的操作
bgm.addEventListener('ended', function (e) {
// 开始切歌
update();
})
// 监听音频时间改变事件
bgm.addEventListener('timeupdate', function (e) {
currentTime = bgm.currentTime;
for (j = currentLine, len = lrcTime.length; j < len; j++) {
if (currentTime < lrcTime[j + 1] && currentTime > lrcTime[j]) {
currentLine = j;
ppxx = currentLine * -32; // 每行歌词的高度
ul.style.transform = "translateY(" + ppxx + "px)";
if (currentLine > 1) {
$li[currentLine - 1].setAttribute("class", "");
$li[currentLine].setAttribute("class", "on");
}
break;
}
}
})
// audio进度更改后事件
audio.onseeked = function () {
currentTime = bgm.currentTime;
$li[currentLine - 1].setAttribute("class", "");
for (k = 0, len = lrcTime.length; k < len; k++) {
if (currentTime < lrcTime[k + 1] && currentTime < lrcTime[k]) {
currentLine = k;
break;
}
}
};
}
// 开始播放
function play() {
bgm.play();
}
// 暂停
function over() {
bgm.pause();
}
// 如果音频是暂停，返回true
function stop() {
if (bgm.muted) {
bgm.muted = false;
console.log("接触静音状态");
} else {
bgm.muted = true;
console.log("打开静音状态");
}
}
// 歌曲路径数组
let material = ['./material/60054704083.flac'];
// 我要切歌
function update() {
var url = bgm.src;
if (material.indexOf(url) < material.length - 1) {
bgm.src = material[(material.indexOf(url) + 1)];
} else {
bgm.src = material[0];
}
// 重新播放
play();
}思路引用:
https://blog.youkuaiyun.com/yzy_csdn/article/details/84536646
https://blog.youkuaiyun.com/lijiasiang/article/details/79209683
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
