曲终凉

马黑黑 发表于 2024-8-21 07:55

马黑黑 发表于 2024-8-21 07:56

<h2>帖子代码：</h2>
<div class="hE"><pre>
<style>
#mama {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background: url('https://file.uhsea.com/2408/446538dcf9d096053cf0c35a5cb2a806I8.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: screen;
-webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
pointer-events: none;
}
.boat {
position: absolute;
left: -86px;
top: 45%;
cursor: pointer;
animation: move 40s linear infinite var(--state);
}
@keyframes move { to { left: 100%; } }
</style>

<div id="mama" class="mama">
<audio src="https://music.163.com/song/media/outer/url?id=1909360246" autoplay loop></audio>
<video src="https://file.uhsea.com/2408/1f19c2537940debf6133c067d1d3e9e9EX.mp4" autoplay loop muted></video>
<img class="boat" src="https://file.uhsea.com/2408/36ec87f36b16dc655aa19fa1a0febccdH8.webp" width="86" height="86" alt="" />
</div>

<script>
var geci = `曲终凉\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-20`;

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

sf.onload = () => {
HCPlayer({
papa: '#mama',
geci: geci,
skip: 0,
average: 0,
player_css: 'bottom: 10px; left: 50%; transform: translate(-50%); --ww: 400px; --track: #ccc; --prog: #ffcc00;',
lrc_css: 'left: 50%; transform: translateX(-50%); top: 20px; --bg: linear-gradient( #fff, #a4863d, #eee); color: #ccc;',
fs_css: 'left: 20px; top: 20px; --bg: transparent; --color: #333;',
});
};
</script>
</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-21 07:57

本帖测试原生lrc歌词同步之示波图播放器（进度可控）

更多插件配置请参阅：原生lrc歌词同步之示波图播放器 (52qingyin.cn)

彩云归 发表于 2024-8-21 08:24

精彩！谢谢分享！

红影发表于 2024-8-21 08:59

又是一个看着熟悉的新封装，欣赏黑黑好帖{:4_199:}

红影发表于 2024-8-21 09:00

美丽的秋色。这条小船设计得漂亮，视频效果也起到了锦上添花的效果。
欣赏黑黑漂亮的制作{:4_199:}

梦江南 发表于 2024-8-21 11:17

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

冬天的雨 发表于 2024-8-21 12:09

马老师好，长久不见了{:4_187:}

冬天的雨 发表于 2024-8-21 12:10

这个播放器曾似相识，重新分享啊

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

冬天的雨发表于 2024-8-21 12:10
这个播放器曾似相识，重新分享啊

播放器没变化，歌词可以使用原生的lrc歌词，不同特别制作为花潮格式，缺点是歌词同步的准确性不太理想

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

红影发表于 2024-8-21 09:00
美丽的秋色。这条小船设计得漂亮，视频效果也起到了锦上添花的效果。
欣赏黑黑漂亮的制作

感谢领导支持

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

彩云归发表于 2024-8-21 08:24
精彩！谢谢分享！

下午好{:4_190:}

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

梦江南发表于 2024-8-21 11:17
谢谢老师辛苦，学习了。

{:4_190:}

冬天的雨 发表于 2024-8-21 12:47

马黑黑发表于 2024-8-21 12:38
播放器没变化，歌词可以使用原生的lrc歌词，不同特别制作为花潮格式，缺点是歌词同步的准确性不太理想

马老师重新把歌词换了原生的lrc歌词，懒人有福了，不用自己做了{:4_170:}

红影发表于 2024-8-21 20:55

马黑黑发表于 2024-8-21 12:38
感谢领导支持

黑黑从哪学来的称呼，这里大家都是玩的，哪来的什么领导{:4_173:}

马黑黑 发表于 2024-8-21 21:40

红影发表于 2024-8-21 20:55
黑黑从哪学来的称呼，这里大家都是玩的，哪来的什么领导

没有领到不行

红影发表于 2024-8-21 22:33

马黑黑发表于 2024-8-21 21:40
没有领到不行

这个马上就能验证呢，九月初需要出差，到时就知道了，这里肯定照样玩{:4_173:}

马黑黑 发表于 2024-8-21 23:04

红影发表于 2024-8-21 22:33
这个马上就能验证呢，九月初需要出差，到时就知道了，这里肯定照样玩

人不多的

红影发表于 2024-8-22 10:22

马黑黑发表于 2024-8-21 23:04
人不多的

清净自在没什么不好。

小辣椒 发表于 2024-8-22 19:56

黑黑现在把播放器的歌词同步全部改用原生态歌词了

页: [1]

花潮论坛's Archiver

曲终凉