北京网站建设百度排名,怎样注册小程序商城,普通人怎么样做网站,一般网站维护需要做什么03_歌词滚动效果 文章目录 03_歌词滚动效果效果一、数据准备①#xff1a;歌词②#xff1a;音频等 二、代码实现①#xff1a;首页②#xff1a;样式③#xff1a;js逻辑④#xff1a;测试 效果 一、数据准备
①#xff1a;歌词
var lrc [00:00.95]夜微凉 - 徐珊
[0…03_歌词滚动效果 文章目录 03_歌词滚动效果效果一、数据准备①歌词②音频等 二、代码实现①首页②样式③js逻辑④测试 效果 一、数据准备
①歌词
var lrc [00:00.95]夜微凉 - 徐珊
[00:01.9]词周敏君/徐珊
[00:02.85]曲秦天
[00:03.8]编曲秦天
[00:04.75]制作人秦天
[00:05.7]配唱制作人孙依哲/李少成
[00:06.65]制作统筹宋双喜
[00:07.6]财务及行政协力周美军/赵杨
[00:08.55]监制吕军/张斌/柴奇/古国远
[00:09.5]出品人侯俊/张健
[00:10.45]出品监制秦朗
[00:11.4]艺人经纪徐真真
[00:12.35]封面设计LDG
[00:13.35]夜微凉
[00:15.72]灯微暗
[00:18.12]远处的你
[00:19.62]却如此温暖
[00:22.92]如果再没有什么
[00:25.29]结果是我相信你
[00:27.99]会使
[00:29.22]我更加心安
[00:34.59]拥抱世界美丽
[00:37.02]此刻我想拥抱你
[00:39.42]如果再没有什么
[00:41.46]结果是我相信你
[00:44.22]会使我心
[00:45.54]更安静
[00:47.22]遇到烦心
[00:48.99]放于时间里慢慢说给你听
[00:57.42]会让你走出凹凸地 平线
[01:00.99]因为这自信
[01:02.85]让我更加情愿
[01:06.99]道路总是走走停停
[01:10.86]只是你还心有不安
[01:15.45]遇到烦心
[01:17.01]因为我不想让你看到
[01:20.22]看到我忧伤的表情
[01:24.99]放于时间里
[01:27.39]慢慢的说给你听
[01:30.09]稀释忧愁
[01:31.89]面对不安
[01:36.990005]拥抱世界美丽
[01:39.42]此刻我想拥抱你
[01:41.85]如果再没有什么
[01:43.86]结果是我相信你
[01:46.619995]会使我心
[01:47.94]更安静
[01:49.65]遇到烦心
[01:51.39]放于时间里慢慢说给你
[01:57.509995]夜微凉
[01:58.92]灯微暗
[02:01.29]远处的你
[02:02.79]却如此温暖
[02:06.06]如果再没有什么
[02:08.46]结果是我相信你
[02:11.22]会使
[02:12.42]我更加心安
[02:15.45]遇到烦心
[02:17.01]因为我不想让你看到
[02:20.22]看到我忧伤的表情
[02:24.95999]放于时间里
[02:27.39]慢慢的说给你听
[02:30.06]稀释忧愁
[02:31.89]面对不安
[02:34.59]拥抱世界美丽
[02:36.99]此刻我想拥抱你
[02:39.45]如果再没有什么
[02:41.45999]结果是我相信你
[02:44.22]会使我心
[02:45.54001]更安静
[02:47.22]遇到烦心
[02:48.99]放于时间里慢慢说给你听②音频等
资源在文章的顶部绑定
二、代码实现 ①首页
!DOCTYPE html
html langen
headmeta charsetUTF-8title歌词滚动效果/titlelink relshortcut icon href./assets/favicon.ico typeimage/x-iconlink relstylesheet href./css/index.css
/head
body
audio controls src./assets/夜微凉.mp3/audio
div classcontainerul classlrc-list/ul
/div
script src./js/data.js/script
script src./js/index.js/script/body
/html②样式
* {padding: 0;margin: 0;
}
body{background-color: black;color: #666;text-align: center;
}
audio{width: 450px;height: 50px;margin: 30px 0;
}
.container{height: 420px;overflow: hidden;
}
.container ul{transition: 0.5s;list-style: none;
}
.container li{height: 30px;line-height: 30px;transition: 0.2s;
}
.container .lrc-list .active{color: #fff;transform: scale(1.3);
}
③js逻辑
/*** 解析歌词字符串 得到每个歌词的对象* {time: 开始时间, words: 歌词内容}*/
var lrcArray [];function parseLrc() {let lines lrc.split(\n);lines.forEach(item {let parts item.split(]);var timeStr parts[0].substr(1);let time parseTime(timeStr);var obj {time: time,words: parts[1]}lrcArray.push(obj);})return lrcArray;
}/*** 获取需要的dom*/
var dom {audio: document.querySelector(audio),ul: document.querySelector(.container ul),container: document.querySelector(.container),
}/*** 将字符串转成时间数字 01:02.85 1*60 2.85秒* param timeStr 时间字符串*/
function parseTime(timeStr) {let split timeStr.split(:);return split[0] * 60 split[1]
}/*** 计算出在当前播放器播放到几秒的情况下* lrcArray 数组中 应该高亮显示的歌词下标* -1 没有任何一句歌词需要显示*/
function findIndex() {// 播放器当前时间let time dom.audio.currentTime;for (let i 0; i lrcArray.length; i) {if (lrcArray[i].time time) {return i - 1}}// 如果大于最后一句歌词时间 显示最后一句歌词return lrcArray.length - 1
}console.log(parseLrc());/*** 创建歌词元素 li*/
function createLrcElements(){lrcArray.forEach(item {var li document.createElement(li);li.textContent item.wordsdom.ul.appendChild(li)})
}
createLrcElements()// 容器的高度
let containerHeight dom.container.clientHeight;
// 每一个li的高度
let liHeight dom.ul.children[0].clientHeight;
// 最大便宜量
let max dom.ul.clientHeight - containerHeight;/*** 设置ul的偏移量*/
function setOffset() {let index findIndex();let h1 liHeight * index liHeight / 2 - containerHeight / 2if (h1 0){h1 0}if (h1 max){h1 max}// 去掉之前的 active 样式let li dom.ul.querySelector(.active);if (li){li.classList.remove(active)}dom.ul.style.transform translateY(-${h1}px)li dom.ul.children[index];if (li){li.classList.add(active)}
}
dom.audio.addEventListener(timeupdate, () setOffset())④测试
