马黑黑 发表于 2024-8-15 11:51

归零

本帖最后由 马黑黑 于 2024-8-15 11:52 编辑 <br /><br /><style>
#papa {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/webp/gvlk.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;
        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=2114419825" autoplay loop></audio>
        <video src="https://img.tukuppt.com/video_show/13928806/00/41/74/60138b832ed1d.mp4" autoplay loop muted></video>
</div>

<script>
var geci = `林忆莲 - 归零\n词/曲/编曲 : 常石磊\n制作 : 常石磊/恭硕良\n和声编写 : 常石磊\n和声 : 林忆莲\n吉他 : 胡洋\n吉他录音 : 李卓\n电吉他 : Derrick Sepnio/胡洋\n低音吉他 : 恭硕良\n鼓 : 恭硕良\n这世界从来没有如果\n在后悔之前让懵懂承受\n这世界从来都在改变\n在明亮之前跟黑暗蔓延\n还有什么能再回来\n还有什么人在未来\n既然未知是唯一的期待\n索性将平淡劈成乾柴\nReset Reset Reset\n点燃眼前的徘徊\n如果重生能真实的存在\n此刻将一切归零再来\n Reset Reset Reset\n梦想就等于未来\n未来未来\n这世界从来没有如果\n在后悔之前让懵懂承受\n这世界从来都在改变\n在明亮之前跟黑暗蔓延\n还有什么能再回来\n还有什么人在未来\n既然未知是唯一的期待\n索性将平淡劈成乾柴\n Reset Reset Reset\n点燃眼前的徘徊\n如果重生能真实的存在\n此刻将一切归零再来\n Reset Reset Reset\n梦想就等于未来\n未来未来\n未来未来\n`;

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

sf.onload = () => {
        HCPlayer({
                papa: '#papa',
                geci: geci,
                skip: 0.5,
                average: 0,
                lrc_css: 'top: 20px; --bg: linear-gradient(#ffffffaa, #491981e9); color: silver;',
                player_css: 'width: 460px; bottom: 20px; color: white; --prog: white; --track: gray; --bg: url("https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png") no-repeat center/cover',
                fs_css: '--bg: transparent; --color: snow;'
        });
};
</script>

马黑黑 发表于 2024-8-15 11:52

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#papa {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/webp/gvlk.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;
        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=2114419825" autoplay loop&gt;&lt;/audio&gt;
        &lt;video src="https://img.tukuppt.com/video_show/13928806/00/41/74/60138b832ed1d.mp4" autoplay loop muted&gt;&lt;/video&gt;
&lt;/div&gt;

&lt;script&gt;
var geci = `林忆莲 - 归零\n词/曲/编曲 : 常石磊\n制作 : 常石磊/恭硕良\n和声编写 : 常石磊\n和声 : 林忆莲\n吉他 : 胡洋\n吉他录音 : 李卓\n电吉他 : Derrick Sepnio/胡洋\n低音吉他 : 恭硕良\n鼓 : 恭硕良\n这世界从来没有如果\n在后悔之前让懵懂承受\n这世界从来都在改变\n在明亮之前跟黑暗蔓延\n还有什么能再回来\n还有什么人在未来\n既然未知是唯一的期待\n索性将平淡劈成乾柴\nReset Reset Reset\n点燃眼前的徘徊\n如果重生能真实的存在\n此刻将一切归零再来\n Reset Reset Reset\n梦想就等于未来\n未来未来\n这世界从来没有如果\n在后悔之前让懵懂承受\n这世界从来都在改变\n在明亮之前跟黑暗蔓延\n还有什么能再回来\n还有什么人在未来\n既然未知是唯一的期待\n索性将平淡劈成乾柴\n Reset Reset Reset\n点燃眼前的徘徊\n如果重生能真实的存在\n此刻将一切归零再来\n Reset Reset Reset\n梦想就等于未来\n未来未来\n未来未来\n`;

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

sf.onload = () =&gt; {
        HCPlayer({
                papa: '#papa',
                geci: geci,
                skip: 0.5,
                average: 0,
                lrc_css: 'top: 20px; --bg: linear-gradient(#ffffffaa, #491981e9); color: silver;',
                player_css: 'width: 460px; bottom: 20px; color: white; --prog: white; --track: gray; --bg: url("https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png") no-repeat center/cover',
                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-15 11:53

本帖主要测试原生lrc歌词同步之细线进度条播放器插件。
说明文档：原生lrc歌词同步之细线进度条播放器 (52qingyin.cn)

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

谢谢老师辛苦，学习了！{:4_187:}

老谟深虑 发表于 2024-8-15 16:36

          谢谢老师，欣赏学习了！

起个网名好难 发表于 2024-8-15 17:35

https://img2.baidu.com/it/u=2516181841,320037787&fm=253&fmt=auto&app=138&f=GIF

竹溪 发表于 2024-8-15 19:05

好看的夜景和游动的光线{:4_204:}

红影 发表于 2024-8-15 20:47

原生歌词和细线进度条的封装，有一个新封装的帖子。
黑黑真快，每天都有新封装，一下子这么多原生歌词的封装代码了{:4_187:}

红影 发表于 2024-8-15 20:49

制作漂亮，歌词也很让人回味，这世界中的一切真的能重生么？
欣赏黑黑好帖{:4_199:}

小辣椒 发表于 2024-8-15 21:36

有进度条的播放器小辣椒特别喜欢{:4_205:}

绿叶清舟 发表于 2024-9-4 19:30

这次仔细看了{:4_189:}

马黑黑 发表于 2024-9-4 20:40

绿叶清舟 发表于 2024-9-4 19:30
这次仔细看了

应该的

绿叶清舟 发表于 2024-9-4 20:47

马黑黑 发表于 2024-9-4 20:40
应该的

这个上面的代码和下面的解释好象不是完全相同的吧

马黑黑 发表于 2024-9-4 21:12

绿叶清舟 发表于 2024-9-4 20:47
这个上面的代码和下面的解释好象不是完全相同的吧

原理是一样的

绿叶清舟 发表于 2024-9-4 21:20

马黑黑 发表于 2024-9-4 21:12
原理是一样的

嗯，知道了怎么去加减了
页: [1]
查看完整版本: 归零