马黑黑 发表于 2024-8-28 07:45

孤夜舞

<style>
#mama {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/webp2/guyewu.webp') no-repeat center/cover;
        box-shadow: 0 0 8px gray;
        overflow: hidden;
        z-index: 1;
        position: relative;
}
#mama > video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        mix-blend-mode: color-burn;
        -webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
        pointer-events: none;
}
</style>

<div id="mama" class="mama">
        <audio src="https://music.163.com/song/media/outer/url?id=2611596369" autoplay loop></audio>
        <video src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c04de909d0.mp4" autoplay loop muted></video>
</div>

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

sf.onload = () => {
        HCPlayer({
                papa: '#mama',
                geci: geci,
                skip: 0,
                average: 0,
                pinpu: {num: 100, size: 1, gap: 1, color1: 'red', color2: 'plum'},
                player_css: `
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: 20px;
                        color: white;
                        --hh: 100px;
                        --discBg: url('https://638183.freep.cn/638183/web/svg/4yecc.svg') center/cover;
                `,
                lrc_css: 'left: 50%; transform: translateX(-50%); top: 20px; --bg: linear-gradient(lightblue, plum); color: #ccc;',
                fs_css: 'right: 20px; top: 20px; --bg: transparent; --color: snow;',
        });
};

var geci = `
        孤夜舞
        翻唱：一颗狼星_许篮心
        词 曲/原唱 : Tăng Duy Tân
        中文词 : 李孟言/OP欧欧欧
        我曾经听过
        听过一种夜来祭舞的传说
        传说当那月色和灵魂交错
        交错倒映出你我 前世允诺
        梦里千万次 与你擦身而过
        暮然回首 却不见 徒留寂寞
        时光来去皆匆匆 花开花落
        不知是谁苦苦 在寻觅爱的轮廓
        若思念在反反复复
        朝朝暮暮
        情归何处
        月夜下剩一人起舞
        寒霜潜入
        繁花皆卒
        孤夜舞
        music...
        相遇又别离
        大梦初醒 谁不肯归去
        终究来不及
        回忆散尽 怪岁月无情
        梦里千万次 与你擦身而过
        暮然回首 却不见 徒留寂寞
        时光来去皆匆匆 花开花落
        不知是谁苦苦 在寻觅爱的轮廓
        若思念在反反复复
        朝朝暮暮
        情归何处
        月夜下剩一人起舞
        寒霜潜入
        繁花皆卒
        孤夜舞
        End...
`;
</script>

马黑黑 发表于 2024-8-28 07:46

本帖最后由 马黑黑 于 2024-8-28 07:52 编辑 <br /><br /><h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#mama {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/webp2/guyewu.webp') no-repeat center/cover;
        box-shadow: 0 0 8px gray;
        overflow: hidden;
        z-index: 1;
        position: relative;
}
#mama &gt; video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        mix-blend-mode: color-burn;
        -webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
        pointer-events: none;
}
&lt;/style&gt;

&lt;div id="mama" class="mama"&gt;
        &lt;audio src="https://music.163.com/song/media/outer/url?id=2611596369" autoplay loop&gt;&lt;/audio&gt;
        &lt;video src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c04de909d0.mp4" autoplay loop muted&gt;&lt;/video&gt;
&lt;/div&gt;

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

sf.onload = () =&gt; {
        HCPlayer({
                papa: '#mama',
                geci: geci,
                skip: 0,
                average: 0,
                pinpu: {num: 100, size: 1, gap: 1, color1: 'red', color2: 'plum'},
                player_css: `
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: 20px;
                        color: white;
                        --hh: 100px;
                        --discBg: url('https://638183.freep.cn/638183/web/svg/4yecc.svg') center/cover;
                `,
                lrc_css: 'left: 50%; transform: translateX(-50%); top: 20px; --bg: linear-gradient(lightblue, plum); color: #ccc;',
                fs_css: 'right: 20px; top: 20px; --bg: transparent; --color: snow;',
        });
};

var geci = `
        孤夜舞
        翻唱：一颗狼星_许篮心
        词 曲/原唱 : Tăng Duy Tân
        中文词 : 李孟言/OP欧欧欧
        我曾经听过
        听过一种夜来祭舞的传说
        传说当那月色和灵魂交错
        交错倒映出你我 前世允诺
        梦里千万次 与你擦身而过
        暮然回首 却不见 徒留寂寞
        时光来去皆匆匆 花开花落
        不知是谁苦苦 在寻觅爱的轮廓
        若思念在反反复复
        朝朝暮暮
        情归何处
        月夜下剩一人起舞
        寒霜潜入
        繁花皆卒
        孤夜舞
        music...
        相遇又别离
        大梦初醒 谁不肯归去
        终究来不及
        回忆散尽 怪岁月无情
        梦里千万次 与你擦身而过
        暮然回首 却不见 徒留寂寞
        时光来去皆匆匆 花开花落
        不知是谁苦苦 在寻觅爱的轮廓
        若思念在反反复复
        朝朝暮暮
        情归何处
        月夜下剩一人起舞
        寒霜潜入
        繁花皆卒
        孤夜舞
        End...
`;
&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-28 07:47

示波状频谱插件测试。插件说明文档：原生lrc歌词同步之示波状频谱播放器 (52qingyin.cn)

彩云归 发表于 2024-8-28 10:12

精彩，谢谢分享！

红影 发表于 2024-8-28 10:38

有趣，暂停后中间的叶瓣还在转呢，只是转速慢了点。{:4_173:}

红影 发表于 2024-8-28 10:46

这个播放器漂亮，有按钮，还有进度时间，示波状上下频谱分列两侧，排布非常合理。
黑黑又一个同步播放器的封装呢，很赞{:4_187:}

红影 发表于 2024-8-28 10:47

歌词的配色十分奇妙，和奇特的背景相得益彰{:4_199:}

马黑黑 发表于 2024-8-28 13:00

彩云归 发表于 2024-8-28 10:12
精彩，谢谢分享！

{:4_191:}

马黑黑 发表于 2024-8-28 13:00

红影 发表于 2024-8-28 10:38
有趣，暂停后中间的叶瓣还在转呢，只是转速慢了点。

所用图片是一个动图

梦江南 发表于 2024-8-28 14:27

老师辛苦了！又是一个新作品！{:4_187:}

马黑黑 发表于 2024-8-28 14:28

梦江南 发表于 2024-8-28 14:27
老师辛苦了！又是一个新作品！

{:4_190:}

小辣椒 发表于 2024-8-28 20:52

漂亮~~~这个画面很美，小女孩的舞姿也是优美，特别黑黑的视频效果加的太完美了{:4_199:}

小辣椒 发表于 2024-8-28 20:54

这个小频谱播放器也是漂亮，以前的频谱好像还宽度长一点，现在的漂亮

马黑黑 发表于 2024-8-28 21:12

小辣椒 发表于 2024-8-28 20:54
这个小频谱播放器也是漂亮，以前的频谱好像还宽度长一点，现在的漂亮

这都是可以配置的

醉美水芙蓉 发表于 2024-8-28 21:18

小辣椒 发表于 2024-8-28 21:21

马黑黑 发表于 2024-8-28 21:12
这都是可以配置的

做的时候看看和图的相配可以自己调整尺寸的

马黑黑 发表于 2024-8-28 22:49

小辣椒 发表于 2024-8-28 21:21
做的时候看看和图的相配可以自己调整尺寸的

插件提供各种参数，可以使用缺省的，也可以自己配置参数值

马黑黑 发表于 2024-8-28 22:50

醉美水芙蓉 发表于 2024-8-28 21:18
欣赏老师漂亮的频谱播放器！

{:4_190:}

小辣椒 发表于 2024-8-28 22:53

马黑黑 发表于 2024-8-28 22:49
插件提供各种参数，可以使用缺省的，也可以自己配置参数值

懒人会直接套用，当然我也是懒人{:4_170:}

不过我一般会自己按图效果改一下自己喜欢的样式

红影 发表于 2024-8-29 00:05

马黑黑 发表于 2024-8-28 13:00
所用图片是一个动图

嗯嗯，知道的，只是加上转动后更快点了。不知道如果转反向了，会是什么样{:4_173:}
页: [1] 2
查看完整版本: 孤夜舞