|
|
楼主 |
发表于 2023-2-19 10:36
|
显示全部楼层
本帖最后由 马黑黑 于 2023-2-19 11:08 编辑
帖子代码
- <style>
- #papa {
- margin: -80px 0 0 calc(50% - 593px);
- width: 1024px;
- height: 640px;
- background: lightgreen url('https://638183.freep.cn/638183/t23/webp/orange.webp') no-repeat center/cover;
- box-shadow: 3px 3px 20px #000;
- position: relative;
- }
- #mplayer {
- position: absolute;
- width: 160px;
- height: 160px;
- right: 200px;
- top: 60%;
- border-radius: 50%;
- cursor: pointer;
- animation: rot 8s linear infinite;
- }
- #lrc {
- --state: paused;
- --motion: cover2;
- --tt: 2s;
- --bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .65));
- position: absolute;
- left: 50%;
- transform: translate(-50%);
- top: 5px;
- font: bold 2em sans-serif;
- color: snow;
- white-space: pre;
- -webkit-background-clip: text;
- filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
- }
- #lrc::before {
- position: absolute;
- content: attr(data-lrc);
- width: 20%;
- height: 100%;
- color: transparent;
- overflow: hidden;
- white-space: pre;
- background: var(--bg);
- filter: inherit;
- -webkit-background-clip: text;
- animation: var(--motion) var(--tt) linear forwards;
- animation-play-state: var(--state);
- }
- @keyframes cover1 { from { width: 0; } to { width: 100%; } }
- @keyframes cover2 { from { width: 0; } to { width: 100%; } }
- @keyframes rot { to { transform: rotate(1turn); } }
- </style>
- <div id="papa">
- <div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
- <img id="mplayer" src="https://638183.freep.cn/638183/t23/1/orange.png" alt="" />
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1950528144.mp3" loop autoplay></audio>
- </div>
- <script>
- (function() {
- /*原始lrc歌词*/
- let lrcStr = `
- [00:02:00]Tizzy T / 洪一诺 - 橘子
- [00:18.34]你从我身边经过 橘子味
- [00:19.92]我开始到处打听 你是谁
- [00:22.32]我感觉有点微醺 这第几杯
- [00:24.33]她们争先恐后 我安静地欣赏你的美
- [00:26.73]DJ放着舞曲 你小声跟唱
- [00:29.31]衣服漂亮是因为它穿在你身上
- [00:30.99]像在漆黑的夜晚走进一条深巷
- [00:33.23]我要的 你都有 没有让我失望
- [00:35.45]你没有看我怎么知道我在看你
- [00:37.43]现在拉近我们的距离就不到半米
- [00:39.56]该怎么解开你的emem 这是个难题
- [00:41.79]我喜欢你的温柔 也喜欢你的叛逆
- [00:44.00]你出现我的内心 开始电闪又雷鸣
- [00:46.35]我能够为你做到的 是偏袒且坚定
- [00:48.43]快来到我这里 让我填满你空虚
- [00:50.58]当我看着你的时候 想在对你说
- [00:52.71]I don\'t know what you\'ve heard about me
- [00:54.77]没有什么了不起
- [01:00.72]明明你早已经动了心
- [01:03.28]干嘛假装你不在意
- [01:09.65]So baby what you gonna do
- [01:10.42]What you gonna do
- [01:12.48]What you gonna do
- [01:13.35]What you gonna do
- [01:14.63]What you gonna do
- [01:15.40]What you gonna do
- [01:16.64]来吧 跳进这场派对
- [01:18.49]告诉我 u want some more
- [01:19.12]What you gonna do
- [01:21.24]What you gonna do
- [01:23.53]What you gonna do
- [01:25.64]当我往你那边看
- [01:26.67]你知道我在想什么
- [01:30.00]一杯特调我是你的加冰
- [01:31.96]一块饼干你是我的夹心
- [01:34.21]受到惊讶我来给你压惊
- [01:36.26]哪都别去请静候我的佳音
- [01:38.52]Pretty girl 请你在我的怀里躺好
- [01:40.90]你的前任坟头早就已经长草
- [01:42.84]现在时间地点气氛全都刚好
- [01:44.89]你想要的那杯冰茶来自长岛
- [01:47.04]You make me to the left
- [01:48.06]You make me to the right
- [01:49.11]给我一个答案请别再让我猜
- [01:51.28]我偶尔喜欢装酷没有在跟你拽
- [01:53.39]你看中那些名牌我都会替你买
- [01:55.66]为你我从east side跑到了west side
- [01:57.86]你怎么能狠心来把我推开
- [02:00.00]别在这种时候跟我聊未来
- [02:02.13]就算是个错误我也不悔改
- [02:07.18]靠近你 我听见你的呼吸
- [02:11.42]周围的人全都模糊不清
- [02:18.49]紧紧地拥抱
- [02:19.53]听我的心跳
- [02:20.43]你一直被需要
- [02:39.06]I don\'t know what you\'ve heard about me
- [02:41.60]没有什么了不起
- [02:47.70]明明你早已经动了心
- [02:50.35]干嘛假装你不在意
- [02:56.43]So baby what you gonna do
- [02:58.25]What you gonna do
- [02:59.41]What you gonna do
- [03:00.24]What you gonna do
- [03:01.58]What you gonna do
- [03:02.33]What you gonna do
- [03:03.60]来吧 跳进这场派对
- [03:05.26]告诉我 u want some more
- [03:05.97]What you gonna do
- [03:08.21]What you gonna do
- [03:10.31]What you gonna do
- [03:12.17]当我往你那边看
- [03:13.59]你知道我在想什么
- [03:14.73]What you gonna do
- [03:16.89]What you gonna do
- [03:19.05]What you gonna do
- [03:23.45]What you gonna do
- [03:25.66]What you gonna do
- [03:27.77]What you gonna do
- `;
- /*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
- let mKey = 0, mFlag = true, averAdd = 0.3;
- /*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
- let lrcTime = (ar) => {
- let tmpAr = [];
- for(j = 0; j <ar.length - 1; j ++) {
- if(j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));
- }
- let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
- tmpAr.push(aver);
- tmpAr.forEach((item,key) => {
- ar[key][2] = item > aver ? aver : item;
- });
- return ar;
- };
- /*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
- let getLrcAr = (text) => {
- let lrcAr = [];
- let calcRule = [60,1,0.001];
- for(x of text.split('\n')) {
- let ar = [];
- let re = /\d+[\.:]\d+([\.:]\d+)?/g;
- let geci = x.replace(re,'');
- if(geci) {
- geci = geci.replace(/[\[\]\'"\t,]s?/g,'');
- let time = x.match(re);
- if(time != null) {
- for(y of time) {
- let tmp = y.match(/\d+/g);
- let sec = 0;
- for(z in tmp) sec += tmp[z] * calcRule[z];
- ar[0] = [parseFloat(sec.toFixed(2)), geci];
- lrcAr.push(ar[0]);
- }
- }
- }
- }
- lrcAr.sort((a,b)=> a[0] - b[0]);
- return(lrcTime(lrcAr));
- };
- /*函数 ：模拟显示同步歌词*/
- let showLrc = (time) => {
- let name = mFlag ? 'cover1' : 'cover2';
- lrc.innerHTML = lrcAr[mKey][1];
- lrc.dataset.lrc = lrcAr[mKey][1];
- lrc.style.setProperty('--motion', name);
- lrc.style.setProperty('--tt', time + 's');
- lrc.style.setProperty('--state', 'running');
- mKey += 1;
- mFlag = !mFlag;
- };
- /*函数 ：处理当前歌词索引 mKey*/
- let calcKey = () => {
- for (j = 0; j < lrcAr.length; j++) {
- if (aud.currentTime <= lrcAr[j][0]) {
- mKey = j - 1;
- break;
- }
- }
- if (mKey < 0) mKey = 0;
- if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
- let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
- showLrc(time);
- };
- /*格式化时间信息*/
- let toMin = (val) => {
- if (!val) return '00:00';
- val = Math.floor(val);
- let min = parseInt(val / 60),
- sec = parseFloat(val % 60);
- if (min < 10) min = '0' + min;
- if (sec < 10) sec = '0' + sec;
- return min + ':' + sec;
- }
- /*函数 ：关键帧动画状态切换*/
- let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');
- /*监听播放进度*/
- aud.addEventListener('timeupdate', () => {
- for (j = 0; j < lrcAr.length; j++) {
- if (aud.currentTime >= lrcAr[j][0]) {
- cKey = j;
- if (mKey === j) showLrc(lrcAr[j][2]);
- else continue;
- }
- }
- });
- aud.addEventListener('pause', () => mState());/*监听暂停事件*/
- aud.addEventListener('play', () => mState());/*监听播放事件*/
- aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
- mplayer.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });
- let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
- })();
- </script>
|
评分
-
| 参与人数 3 | 威望 +130 |
金钱 +260 |
经验 +130 |
收起
理由
|
 雨中悄然
| + 30 |
+ 60 |
+ 30 |
赞一个! |
 小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|
30420 金钱
发表于 2023-2-19 10:35
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-19 12:46
