刀郎 - 珠儿 - 音乐沙龙 - 花潮论坛

马黑黑 发表于 2023-8-15 07:22

刀郎 - 珠儿

本帖最后由马黑黑于 2023-8-15 11:48 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 734px; background: url('https://638183.freep.cn/638183/t23/3/vuer.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
.clover { position: absolute; bottom: -200px; width: 100px; height: 100px; background: snow; opacity: .7; animation: up 20s var(--delay) infinite linear var(--state); }
@keyframes up { to { transform: rotate(var(--deg)) translateY(-1200px) rotate(2turn); } }
</style>

<div id="papa"></div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/08/02/5cc93d2f1c24f40b50d268cd21ec7891.mp3" autoplay="" loop=""></audio>

<script>
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/tape_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);

(function() {
let geci = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];

let mkClover = (ele,num) => {
   let r = ele.offsetWidth / 2, pathAr = [];
   for(let i = 0; i < 200; i ++) {
         let angle = i * 2 * Math.PI / 200;
         let x = r - r * Math.sin(num * angle) * Math.cos(angle);
         let y = r - r * Math.sin(num * angle) * Math.sin(angle);
         pathAr.push(x + 'px ' + y + 'px');
   }
   return 'polygon(' + pathAr.join(', ') + ')';
}

Array.from({length: 16}).forEach((item) => {
   let ww = 50 + Math.floor(Math.random() * 50);
   let ar = ;
   item = document.createElement('span');
   item.className = 'clover';
   item.style.cssText += `
         --deg: ${60 - Math.random() * 150}deg;
         --delay: ${Math.random() * 10 - 10}s;
         width: ${ww}px;
         height: ${ww}px;
         right: 200px;
   `;
   papa.appendChild(item);
   item.style.clipPath = mkClover(item, ar);
});

script.onload = () => {
   HCPlayer({
         papa: '#papa',
         lrcAr: geci,
         lrc_css: `
            top: 20px;
            color: #999;
            --bg: linear-gradient(rgba(250,250,250,.25),rgba(138,64,30,.65));
         `,
         player_css: `
            bottom: 30px;
            left: 65%;
            color: lightblue;
            z-index: 100;
            --track: darkgray;
            --prog: red;
         `,
         fs_css: `bottom: 30px; --bg: #333; --color: white;`,
         title: '刀郎 -珠儿',
   });
};
})();
</script>

马黑黑 发表于 2023-8-15 07:23

本帖最后由马黑黑于 2023-8-15 11:59 编辑

帖子代码
<style>
#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 734px; background: url('https://638183.freep.cn/638183/t23/3/vuer.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
.clover { position: absolute; bottom: -200px; width: 100px; height: 100px; background: snow; opacity: .7; animation: up 20s var(--delay) infinite linear var(--state); }
@keyframes up { to { transform: rotate(var(--deg)) translateY(-1200px) rotate(2turn); } }
</style>

<div id="papa"></div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/08/02/5cc93d2f1c24f40b50d268cd21ec7891.mp3" autoplay="" loop=""></audio>

<script>
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/tape_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);

(function() {
let geci = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];

let mkClover = (ele,num) => {
   let r = ele.offsetWidth / 2, pathAr = [];
   for(let i = 0; i < 200; i ++) {
         let angle = i * 2 * Math.PI / 200;
         let x = r - r * Math.sin(num * angle) * Math.cos(angle);
         let y = r - r * Math.sin(num * angle) * Math.sin(angle);
         pathAr.push(x + 'px ' + y + 'px');
   }
   return 'polygon(' + pathAr.join(', ') + ')';
}

Array.from({length: 16}).forEach((item) => {
   let ww = 50 + Math.floor(Math.random() * 50);
   let ar = ;
   item = document.createElement('span');
   item.className = 'clover';
   item.style.cssText += `
         --deg: ${60 - Math.random() * 150}deg;
         --delay: ${Math.random() * 10 - 10}s;
         width: ${ww}px;
         height: ${ww}px;
         right: 200px;
   `;
   papa.appendChild(item);
   item.style.clipPath = mkClover(item, ar);
});

script.onload = () => {
   HCPlayer({
         papa: '#papa',
         lrcAr: geci,
         lrc_css: `
            top: 20px;
            color: #999;
            --bg: linear-gradient(rgba(250,250,250,.25),rgba(138,64,30,.65));
         `,
         player_css: `
            bottom: 30px;
            left: 65%;
            color: lightblue;
            z-index: 100;
            --track: darkgray;
            --prog: red;
         `,
         fs_css: `bottom: 30px; --bg: #333; --color: white;`,
         title: '刀郎 -珠儿',
   });
};
})();
</script>

马黑黑 发表于 2023-8-15 07:26

type_lrc.js 配置和其他插件没有太多区别，记得它有一个 title 参数，磁带上标题，不设置的话标题为：

HCPlayer

更多资讯，请参阅花潮音频播放器插件汇总：http://mhh.52qingyin.cn/api/player/

马黑黑 发表于 2023-8-15 07:31

有些插件可能没有设置UI的层级，如果被其他元素影响，可给相关UI设置一个 z-index 值，例如，播放控制器：

         player_css: `
            bottom: 30px;
            left: 65%;
            color: lightblue;
            z-index: 100;
            --track: darkgray;
            --prog: red;
         `,

红影发表于 2023-8-15 10:03

以打开就是大把的花儿散开。
黑黑把卡式磁带优化了呢，而且做成了打包上传的模式，所有的动作一气呵成{:4_199:}

红影发表于 2023-8-15 10:04

这磁带还加了进度条加了播放时间，越弄越完美了{:4_199:}

红影发表于 2023-8-15 10:07

这个太细腻了，还让那胶带从第一个转动圆圈里慢慢过渡到第二个里面去。这些考虑真的太细致了{:4_199:}

马黑黑 发表于 2023-8-15 12:00

红影发表于 2023-8-15 10:03
以打开就是大把的花儿散开。
黑黑把卡式磁带优化了呢，而且做成了打包上传的模式，所有的动作一气呵成{:4_ ...

二楼代码的第 46 行，才是真正地优化播放器出现的速度。刷新或硬刷新看看效果。

马黑黑 发表于 2023-8-15 12:01

红影发表于 2023-8-15 10:04
这磁带还加了进度条加了播放时间，越弄越完美了

基本也定型了吧，虽然粗糙一点。使用时配色就靠 --track和 --prog 这两个CSS变量了，文本颜色直接使用 color 属性。

马黑黑 发表于 2023-8-15 12:02

红影发表于 2023-8-15 10:07
这个太细腻了，还让那胶带从第一个转动圆圈里慢慢过渡到第二个里面去。这些考虑真的太细致了

本来考虑的还要多，也尝试了一些设想，代码太过臃肿，放弃。

马黑黑 发表于 2023-8-15 13:00

本帖最后由马黑黑于 2023-8-15 13:02 编辑

【转】

作者：旅途
链接：https://www.zhihu.com/question/613738889/answer/3162358845
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

《珠儿》词曲惊艳优美，境界超凡入圣，不希望大家曲解刀郎，所以阐释下。

歌的背景是刀郎的哥哥十几岁时因和刀郎吵架外出后车祸去世，刀郎非常内疚和怀念哥哥，借聊斋珠儿事在这首歌里终于得到解脱：

“少爷的人生在地下的城市，对于窒息没有一丝的畏惧，他在母亲的腹中就会啼哭，这啼哭占据通往神殿的路”

（前白：哥哥在异域，他本来就不死）

“每一个醉倒在路边的冬夜，他都会梦见那早夭的姐姐，姐姐总是虹影如灯栩栩如生，我是你失落的人间唯一的凭证”

（正文首节：哥哥你总是活在我的梦里，我不仅自己活在这世上，也在内心替你活在这世上）

“我要去问问她来时路边的那个算命的先生，用还存世的挽歌为她再课一卦上路的时辰，我要去告诉昨日和她异界同梦的爱人，告诉他吻过的山川与河海已经醒来”

（正文二节：我明白了原来哥哥本就是不死的，他活在异域）

“不要在先祖的序列里寻找自己，不要用生命为时光去乞讨身体，时间一直在结界延伸去留无门，尘雾寒窑的海市冰封所有的眼神”

（正文三节：我是因明白了“我是谁”所以明白了哥哥是谁，所以明白了哥哥本就不死）

“我要去看看废弃的故国家园倒塌的神殿，谁在法坛里藏牌弄千谁在幻化人寰，我要去看看他们往日出征遗弃的老狗，有多少祭奠的三牲多少的祷言我要问问他穿越了多少次劫难何时能回来，问问他山水相逢的命运谁在替她安排，我看见翻阅时光有人撕毁了序言，无法接受这失控的日子所以谎话连篇”

（正文四、五节：我要去看看我们的过去还看看未来何时会相逢，我明白了自己过去为何不能接受命运的谎话连篇）

“我那双火焰闪烁咄咄逼人的眼睛，因为狱卒与囚徒共用而精疲力尽，我要拥抱你东岳大帝我的神啊泰山，你给我高傲永恒闪耀的光环他的眼睛将是我孩子的眼睛，他的双手将是我孩子的双手，我们都曾经是一群活得真实的人，请你用灿烂的笑容理解我的人生在宗祠里供奉的古老的血统，不会因宫殿的辉煌而交融，所有怀着柔情蜜意消逝的灵魂，相会在黑夜分娩月光的子夜时分”

（尾节：我过去因为迷失而悲苦而心力耗尽，感谢东岳大帝让我明白我本永恒。大家本就永恒，请用灿烂的笑容理解各自的人生，不能超脱如此者相会在子夜时分）

红影发表于 2023-8-15 13:55

马黑黑发表于 2023-8-15 12:00
二楼代码的第 46 行，才是真正地优化播放器出现的速度。刷新或硬刷新看看效果。

嗯嗯，之前的都是window.onload，现在改成script.onload果然快了好多{:4_199:}

马黑黑 发表于 2023-8-15 13:57

红影发表于 2023-8-15 13:55
嗯嗯，之前的都是window.onload，现在改成script.onload果然快了好多

希望有效果

红影发表于 2023-8-15 14:03

马黑黑发表于 2023-8-15 12:01
基本也定型了吧，虽然粗糙一点。使用时配色就靠 --track和 --prog 这两个CSS变量了，文本颜色直接使用...

漂亮，有这两个已经够调整了。

红影发表于 2023-8-15 14:04

马黑黑发表于 2023-8-15 12:02
本来考虑的还要多，也尝试了一些设想，代码太过臃肿，放弃。

现在已经很好了{:4_187:}

红影发表于 2023-8-15 14:10

马黑黑发表于 2023-8-15 13:00
【转】

作者：旅途

进来就被代码效果吸引，觉得这个歌有点故事，没想到是这么悲惨的故事。聊斋里的珠儿故事也没记住，以为是女孩子的名，去搜了一下是男生的名字，并有一段奇特的故事。

小辣椒 发表于 2023-8-15 17:25

看见老式磁带特别怀念的感觉。。。。

小辣椒 发表于 2023-8-15 17:27

马黑黑发表于 2023-8-15 07:31
有些插件可能没有设置UI的层级，如果被其他元素影响，可给相关UI设置一个 z-index 值，例如，播放控制器：
...

这些也是不能漏看，我经常一眼飘过，其实细节决定成败

马黑黑 发表于 2023-8-15 17:47

小辣椒发表于 2023-8-15 17:27
这些也是不能漏看，我经常一眼飘过，其实细节决定成败

如果了解HTML的原理，这些，是可以自己想得到的

马黑黑 发表于 2023-8-15 17:47

小辣椒发表于 2023-8-15 17:25
看见老式磁带特别怀念的感觉。。。。

{:4_190:}

页: [1] 2 3 4 5 6

花潮论坛's Archiver

刀郎 - 珠儿