马黑黑 发表于 2024-8-16 08:04

神战

<style>
#papa {
        margin: 30px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/webp/ufvj.webp') no-repeat center/cover;
        box-shadow: 0 0 8px gray;
        overflow: hidden;
        z-index: 1;
        display: grid;
        place-items: center;
        position: relative;
}
#papa > video {
        position: absolute;
        width: 100%;
        height: calc(100% + 200px);
        object-fit: cover;
        opacity: .45;
        mix-blend-mode: screen;
        pointer-events: none;
}
</style>

<div id="papa" class="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2119431158" autoplay loop></audio>
        <video src="https://img.tukuppt.com/video_show/6181262/01/32/34/62da7f2c520c9.mp4" autoplay loop muted></video>
</div>

<script>
var geci = `《神战》\n制作人/企划：花君\n作词：辛夷\n曲作：宏宇\n编曲：徐铭轩/RK\n吉他/贝斯：RK\n混音：小吴太太\n演唱：鱼不归/七某人/宁采臣/艾森\n出品：满汉全席音乐团队\n谁淬长钩？细从头，来路几坐荒丘\n看那迦朽，龟血流，诸天神佛束手\n便揽轻衫，曼歌直上七重天，蹴踏梵丘\n且只手，翻又覆，风云聚首，水漫大洲\n占断狂游，何妨某，不许人间白头\n天女婆娑，莲华御座一时英雄如斗\n再对坐仙人危楼，万物焉腐朽\n满室琉璃如昼，蜜蜡载酒，美人着黄绸\n摘花折叶作个酒筹，忽一人辩我蜉蝣，迦楼罗引谁作某对手\n对手，回眸\n夜半聊坐弥卢殿\n翻手古海作天\n醍醐妙法暂寄一梦\n沧海一粟 笑天地无用\n夜半聊坐弥卢殿\n覆手妙法自现\n哪个敢再笑痴人梦\n万斛风云难藏一锋\n某当添为第一峰\n我淬长钩，细从头，来路几过废丘\n听流水朽，海风飕，诸天神佛束手\n便揽轻衫，曼歌直上七重天，蹴踏梵丘\n天与地，困兽斗，迭出妙手，倏忽春秋\n夜半高楼，何妨某，不识天高地厚\n人间筹谋，天地绸缪，不过万事皆休\n再从头细算一劫，谁夜又如昼\n诸天琉璃如昼，人间载酒，美人如丝绸\n点尽琳琅作酒筹，谁一人共我运筹，帷幄间犹有棋局未休，\n未休，守候\n夜半聊坐弥卢殿\n翻手古海作天\n醍醐妙法暂寄一梦\n沧海一粟 笑天地无用\n夜半聊坐弥卢殿\n覆手妙法自现\n哪个敢再笑痴人梦\n万斛风云难藏一锋\n某当添为第一峰\n夜半聊坐弥卢殿\n翻手古海作天\n再看四洲山阙重\n万斛风云难藏此一锋\n夜半聊坐弥卢殿\n覆手妙法自现\n再看四海浪花空\n神战不过谁人一梦之中\n劫灰后，又相逢\n2024-8-16`;

var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/pinpu_yslrc.js';
document.body.appendChild(sf);

sf.onload = () => {
        HCPlayer({
                papa: '#papa',
                geci: geci,
                skip: 0,
                average: 0,
                pinpu: {num: 60, width: 8, height: 150, color: 'transparent'},
                player_css: 'bottom: 20px; color: #eee; --prog: white; --track: silver; --cap: snow',
                lrc_css: 'top: 20px; --bg: linear-gradient(#fff, #fff, #ffffff08); color: silver;',
                fs_css: '--bg: transparent; --color: snow;'
        });
};
</script>

马黑黑 发表于 2024-8-16 08:04

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#papa {
        margin: 30px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/webp/ufvj.webp') no-repeat center/cover;
        box-shadow: 0 0 8px gray;
        overflow: hidden;
        z-index: 1;
        display: grid;
        place-items: center;
        position: relative;
}
#papa &gt; video {
        position: absolute;
        width: 100%;
        height: calc(100% + 200px);
        object-fit: cover;
        opacity: .45;
        mix-blend-mode: screen;
        pointer-events: none;
}
&lt;/style&gt;

&lt;div id="papa" class="papa"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=2119431158" autoplay loop&gt;&lt;/audio&gt;
        &lt;video src="https://img.tukuppt.com/video_show/6181262/01/32/34/62da7f2c520c9.mp4" autoplay loop muted&gt;&lt;/video&gt;
&lt;/div&gt;

&lt;script&gt;
var geci = `《神战》\n制作人/企划：花君\n作词：辛夷\n曲作：宏宇\n编曲：徐铭轩/RK\n吉他/贝斯：RK\n混音：小吴太太\n演唱：鱼不归/七某人/宁采臣/艾森\n出品：满汉全席音乐团队\n谁淬长钩？细从头，来路几坐荒丘\n看那迦朽，龟血流，诸天神佛束手\n便揽轻衫，曼歌直上七重天，蹴踏梵丘\n且只手，翻又覆，风云聚首，水漫大洲\n占断狂游，何妨某，不许人间白头\n天女婆娑，莲华御座一时英雄如斗\n再对坐仙人危楼，万物焉腐朽\n满室琉璃如昼，蜜蜡载酒，美人着黄绸\n摘花折叶作个酒筹，忽一人辩我蜉蝣，迦楼罗引谁作某对手\n对手，回眸\n夜半聊坐弥卢殿\n翻手古海作天\n醍醐妙法暂寄一梦\n沧海一粟 笑天地无用\n夜半聊坐弥卢殿\n覆手妙法自现\n哪个敢再笑痴人梦\n万斛风云难藏一锋\n某当添为第一峰\n我淬长钩，细从头，来路几过废丘\n听流水朽，海风飕，诸天神佛束手\n便揽轻衫，曼歌直上七重天，蹴踏梵丘\n天与地，困兽斗，迭出妙手，倏忽春秋\n夜半高楼，何妨某，不识天高地厚\n人间筹谋，天地绸缪，不过万事皆休\n再从头细算一劫，谁夜又如昼\n诸天琉璃如昼，人间载酒，美人如丝绸\n点尽琳琅作酒筹，谁一人共我运筹，帷幄间犹有棋局未休，\n未休，守候\n夜半聊坐弥卢殿\n翻手古海作天\n醍醐妙法暂寄一梦\n沧海一粟 笑天地无用\n夜半聊坐弥卢殿\n覆手妙法自现\n哪个敢再笑痴人梦\n万斛风云难藏一锋\n某当添为第一峰\n夜半聊坐弥卢殿\n翻手古海作天\n再看四洲山阙重\n万斛风云难藏此一锋\n夜半聊坐弥卢殿\n覆手妙法自现\n再看四海浪花空\n神战不过谁人一梦之中\n劫灰后，又相逢\n2024-8-16`;

var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/pinpu_yslrc.js';
document.body.appendChild(sf);

sf.onload = () =&gt; {
        HCPlayer({
                papa: '#papa',
                geci: geci,
                skip: 0,
                average: 0,
                pinpu: {num: 60, width: 8, height: 150, color: 'transparent'},
                player_css: 'bottom: 20px; color: #eee; --prog: white; --track: silver; --cap: snow',
                lrc_css: 'top: 20px; --bg: linear-gradient(#fff, #fff, #ffffff08); color: silver;',
                fs_css: '--bg: transparent; --color: snow;'
        });
};
&lt;/script&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-8-16 08:08

本帖测试原生lrc歌词同步的普通频谱插件，把频谱 color 配置参数设置为 transparent 只留频谱帽，就是帖子中播放器的最终效果。该 color 参数支持颜色、渐变、图片背景，参数值是字符串，要有小角引号。

更多插件配置说明请移步：原生lrc歌词同步之普通频谱播放器 (52qingyin.cn)

起个网名好难 发表于 2024-8-16 08:28

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

频谱是模拟的吧

小文 发表于 2024-8-16 09:22

真心喜欢！问好先生

梦江南 发表于 2024-8-16 14:15

老师辛苦了，真棒！{:4_187:}

彩云归 发表于 2024-8-16 17:15

欣赏佳作，谢谢！

马黑黑 发表于 2024-8-16 19:49

彩云归 发表于 2024-8-16 17:15
欣赏佳作，谢谢！

感谢支持，晚上好

马黑黑 发表于 2024-8-16 19:52

起个网名好难 发表于 2024-8-16 08:28
频谱是模拟的吧

是的

马黑黑 发表于 2024-8-16 19:52

梦江南 发表于 2024-8-16 14:15
老师辛苦了，真棒！

感谢

马黑黑 发表于 2024-8-16 19:52

小文 发表于 2024-8-16 09:22
真心喜欢！问好先生

谢谢，晚上好

醉美水芙蓉 发表于 2024-8-16 20:46

小辣椒 发表于 2024-8-16 22:16

现在才看见这个新帖，黑黑这个频谱播放器漂亮的{:4_199:}

小辣椒 发表于 2024-8-16 22:20

封装好的套用会很快，今天迟了一点，争取明天完成作业

小辣椒 发表于 2024-8-16 22:21

黑黑辛苦，这个播放器效果很喜欢{:4_199:}

小辣椒 发表于 2024-8-16 22:23

今天上来没有先找黑黑的帖，看见太迟了，回帖太多，暂时不回了，去做帖，套用玩一个

红影 发表于 2024-8-16 23:37

这个好看，欣赏黑黑好帖{:4_199:}

马黑黑 发表于 2024-8-17 07:33

红影 发表于 2024-8-16 23:37
这个好看，欣赏黑黑好帖

感谢管管鼓励

马黑黑 发表于 2024-8-17 07:33

小辣椒 发表于 2024-8-16 22:23
今天上来没有先找黑黑的帖，看见太迟了，回帖太多，暂时不回了，去做帖，套用玩一个

不要太劳累

红影 发表于 2024-8-17 10:18

马黑黑 发表于 2024-8-17 07:33
感谢管管鼓励

哎呀，咋这样叫啊，这里都是玩的人，哪分什么管不管的{:4_173:}
页: [1] 2
查看完整版本: 神战