学习老唱片播放器《雪花飘梅花红》

显示全部楼层 · 发表于 2023-8-24 22:21

提示: 作者被禁止或删除内容自动屏蔽

马黑黑 · 发表于 2023-8-24 22:44

醉美水芙蓉发表于 2023-8-24 22:21
@马黑黑请教老师！

注意看第 66 行：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>未命名</title>
</head>
<body>
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/6b845cb122d21044ae7765600701868d.mp4.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; display: grid; place-items: center; z-index: 1; --state: running; }
.leaf { position: absolute; font-size: 30px; top: -20%; color: AliceBlue; opacity: .64; animation: drop var(--duration) var(--delay) infinite linear var(--state); }
@keyframes drop { to { top: 105%; transform: rotate(1turn); } }
</style>
<div id="papa"></div>
<audio id="aud" src="https://i.mp3.wf/view.php/7b31f18dc176e74a835fe797dead8f90.mp3" autoplay loop></audio>
<script>
let leaves = ['❄','❄','❄','❄','❄','❄'];
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/plater_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: [ [1.05,"雪花飘梅花红-蔷薇团长",2.0],
[3.1,"作词Lyricist：耀隆",2.9],
[6,"作曲Composer：耀隆",3.1],
[9.07,"编曲Arranger：福洲",1.9],
[11.01,"和声Backing vocal：凌菲",2.0],
[13.02,"混音师Mixing Engineer：顾潇予",2.0],
[15.05,"制作人Producer：笑天| 唐欣宇",2.0],
[17.03,"统筹Coordinator：张丹娴",2.0],
[19.04,"出品人Creator：胡伟",2.0],
[21.01,"LRC编辑：醉美水芙蓉",1.0],
[22.02,"秋天晨雾朦朦胧胧",5.0],
[27.03,"你匆匆消失无影无踪",5.0],
[32.01,"雾有多浓我心就有多痛",4.1],
[36.09,"离别心酸内心很惶恐",5.0],
[41.09,"转眼已是冷冷寒冬",5.0],
[46.09,"我对你还是情有独钟",5.0],
[51.07,"孤独情种傲立在风雪中",5.0],
[56.05,"我痴情一片不怕伤痛",5.0],
[61.05,"雪花飘飘梅花红红",5.0],
[66.03,"风吹花瓣飘在雪花中",5.0],
[71.03,"我的心痛已无法形容",5.0],
[76.02,"何时再能涌进你怀中",5.0],
[81,"雪花飘飘梅花红红",4.1],
[85.09,"风吹雪花落进梅花丛",5.0],
[90.09,"我的爱情来去太从容",5.0],
[95.07,"意犹未尽消失在雾中",25.0],
[120.02,"转眼已是冷冷寒冬",5.0],
[125.02,"我对你还是情有独钟",5.0],
[130,"孤独情种傲立在风雪中",4.1],
[134.1,"我痴情一片不怕伤痛",5.0],
[139.08,"雪花飘飘梅花红红",5.0],
[144.06,"风吹花瓣飘在雪花中",5.0],
[149.06,"我的心痛已无法形容",5.0],
[154.05,"何时再能涌进你怀中",5.0],
[159.04,"雪花飘飘梅花红红",5.0],
[164.03,"风吹雪花落进梅花丛",5.0],
[169.02,"我的爱情来去太从容",5.0],
[174.01,"意犹未尽消失在雾中",8.0],
[182.03,"谢谢欣赏！",6]
],
player_css: `
right: -4px;
bottom: 10px;
color: white;
--color1: snow;
--color2: black;
`,
lrc_css: `
bottom: 15px;
--color: linear-gradient(rgba(216,204,184,.3),rgba(216,204,184,.7));
--bg: linear-gradient(rgba(97,77,48,.25), rgba(97,77,48,.6));
`,
});
}
Array.from({length: 30}).forEach((item, key) => {
item = document.createElement('span');
item.className = 'leaf';
item.innerHTML = leaves[key % leaves.length];
item.style.cssText += `
left: ${Math.random() * 100}%;
font-size: ${30 + Math.floor(Math.random() * 30)}px;
--duration: ${10 + Math.random() * 10}s;
--delay: ${10 - Math.random() * 25}s;
`;
papa.appendChild(item);
});
</script>
</body>
</html>

复制代码

马黑黑 · 发表于 2023-8-24 22:46

你把歌词作为一个单位放入插件配置中，虽不主张但这是可以的，唯一要注意的是，你不能像声明变量一样用分号结尾：配置里的每一个单位，比如帖子元素、歌词、播放器和其他可能的配置，之间是有逗号分隔的。

显示全部楼层 · 发表于 2023-8-24 22:50

提示: 作者被禁止或删除内容自动屏蔽

马黑黑 · 发表于 2023-8-24 22:56

醉美水芙蓉发表于 2023-8-24 22:50
谢谢黑黑老师指导！

这个，你需要理解一下：插件的配置，我使用JS对象的方式弄。JS的对象，用键值对表示变量和变量值，例如：

xingming: ‘张三',

当有多个变量，则用小角逗号隔开：

xingming: '张三',
nianling: 19,
xingbie: '男',

它们写在大括号里：

let Person = {
xingming: '张三',
nianling: 19,
xingbie: '男',
};

我的插件配置，就是用这种方式弄的。

红影 · 发表于 2023-8-24 23:19

背景图很漂亮。雪花也很美。欣赏水芙蓉美女好帖

显示全部楼层 · 发表于 2023-8-25 06:04

提示: 作者被禁止或删除内容自动屏蔽

显示全部楼层 · 发表于 2023-8-25 06:07

提示: 作者被禁止或删除内容自动屏蔽

马黑黑 · 发表于 2023-8-25 07:03

醉美水芙蓉发表于 2023-8-25 06:07
原来是一个标点符号，导致我的播放器不能播放呢？

原理在5楼

显示全部楼层 · 发表于 2023-8-25 07:11

提示: 作者被禁止或删除内容自动屏蔽

红影 · 发表于 2023-8-25 10:10

醉美水芙蓉发表于 2023-8-25 06:04
谢谢红影美女鼓励！

水芙蓉的歌词好像都没做微调？看到有几句后面的数字很大，微调的话不可能这样的。

东篱闲人 · 发表于 2023-8-25 12:50

漂亮！

显示全部楼层 · 发表于 2023-8-25 17:45

提示: 作者被禁止或删除内容自动屏蔽

东篱闲人 · 发表于 2023-8-25 20:42

醉美水芙蓉发表于 2023-8-25 17:45
谢谢东篱老师支持！

必须支持！

醉美水芙蓉该用户已被删除	发表于 2023-8-24 22:21 \| 显示全部楼层 \|阅读模式提示: 作者被禁止或删除内容自动屏蔽
醉美水芙蓉该用户已被删除
	回复使用道具举报提升卡置顶卡沉默卡喧嚣卡变色卡千斤顶显身卡

醉美水芙蓉该用户已被删除	楼主\| 发表于 2023-8-24 22:50 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
醉美水芙蓉该用户已被删除
	回复支持反对使用道具举报显身卡

醉美水芙蓉该用户已被删除	楼主\| 发表于 2023-8-25 06:04 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
醉美水芙蓉该用户已被删除
	回复支持反对使用道具举报显身卡

醉美水芙蓉该用户已被删除	楼主\| 发表于 2023-8-25 06:07 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
醉美水芙蓉该用户已被删除
	回复支持反对使用道具举报显身卡

醉美水芙蓉该用户已被删除	楼主\| 发表于 2023-8-25 07:11 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
醉美水芙蓉该用户已被删除
	回复支持反对使用道具举报显身卡

醉美水芙蓉该用户已被删除	楼主\| 发表于 2023-8-25 17:45 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
醉美水芙蓉该用户已被删除
	回复支持反对使用道具举报显身卡

[灌水] 学习老唱片播放器《雪花飘梅花红》

浏览过的版块

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理

花潮美女

缤纷心情

草莓情怀

蝴蝶情怀

心曲飞扬

星星情怀

七彩绚丽

活泼开朗

女儿情怀

一往情深

心香一瓣

金剪刀

妙笔生花

天长地久

绚丽缤纷

中秋征文

周年庆

指尖上的流年

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节

男儿情怀

生财有道

宁静致远

逍遥自在

妙趣横生

花潮贵宾