柔情深种TO：走过岁月
<style>
#papa { margin: 120px 0 0 calc(50% - 801px); width: 1440px; height: 801px; box-shadow: 3px 3px 20px #000; background: url('https://xlaj.cn/assets/file/zp/20240115210248.jpg') no-repeat center/cover; position: relative; display: grid; place-items: center; overflow: hidden; z-index: 1; }
#papa video{ position: absolute; width:75%; height: 75%; top:69px; left: 195px; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; opacity: .85;}
#tit {
position: absolute;
top: 10px;
background-image:url('https://xlaj.cn/assets/file/zp/20231230134933.gif '); background-size:cover;
width:350px; height:200px; left: 40px; font: bold 2.2em 微软雅黑; serif;
text-align:center; line-height:200px; color:transparent;
-webkit-background-clip:text;
solid; z-index: 10;
}
#tit2 {
position: absolute;
top: 60px;
background-image:url('https://xlaj.cn/assets/file/zp/20231230134933.gif'); background-size:cover;
width:350px; height:120px; left: 100px; font: bold 1.6emserif;
text-align:center; line-height:200px; color:transparent;
-webkit-background-clip:text;
border:0px #FF4A20 solid; z-index: 10;
}
</style>
<div id="papa">
<div id="tit">柔情深种</div>
<div id="tit2">TO：走过岁月</div>
<video id="vid" src="https://lk999.oss-cn-guangzhou.aliyuncs.com/rqsz.mp4" loop muted></video>
</div>
<script>
let sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);
sf.onload = () => {
let player = new ypP();
player.setAudSrc('https://xlaj.cn/assets/file/zp/20240115210416.mp3');
player.setBtnCss(`
width: 300px;
bottom: 30px;
--btnBg: url('https://638183.freep.cn/638183/web/svg/sunfl-2.svg') no-repeat center/cover;
--trackBg: transparent;
--progBg: rgba(0,100,0,.7);
--btnSize: 50px;
`);
player.setLrcCss('top: 80%;left: 42%;color: rgba(144,238,144,.9); --bg: rgba(0,100,0,.65); font-size: 2.0em;');
player.lrcAr = [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
};
</script>
@走过岁月
岁月几年来第一次用你的视频音乐加播放器效果做的频谱显示，以前都是动图做的，频谱只有几秒钟，许多音乐配不准，今天全程音乐和频谱相配，美极了，特别喜欢这种效果 @马黑黑
黑黑我忘记你那个源码教程了，反正感觉这个播放器和整个画面很相配我就一点没有修改直接用上了，谢谢黑黑的教程分享 帖子精美！喜欢这种歌曲，频谱，歌词完全同步的效果，欣赏点赞！{:4_187:} 亲爱的背景选得漂亮，闪动文字标题也配得漂亮。这个帖子真漂亮{:4_199:} 小辣椒 发表于 2024-1-15 21:36
@走过岁月
岁月几年来第一次用你的视频音乐加播放器效果做的频谱显示，以前都是动图做的，频谱只有几秒 ...
岁月的视频漂亮，亲爱的搭配也很漂亮，这个帖子太美了{:4_199:} 亦是金 发表于 2024-1-15 21:47
帖子精美！喜欢这种歌曲，频谱，歌词完全同步的效果，欣赏点赞！
谢谢前辈欣赏，这个效果我第一次做，现在音乐完全和原来的频谱相吻合了 醉美水芙蓉 发表于 2024-1-15 21:56
这个有点FLASH播放器的效果，真漂亮！谢谢小辣椒分享！
谢谢水芙蓉欣赏{:4_171:} 红影 发表于 2024-1-15 22:06
亲爱的背景选得漂亮，闪动文字标题也配得漂亮。这个帖子真漂亮
背景我开始用动图的，感觉画面太乱了，找了个底图做背景，感觉不够灵动就去加了标题字 红影 发表于 2024-1-15 22:08
岁月的视频漂亮，亲爱的搭配也很漂亮，这个帖子太美了
我主要对这个频谱效果非常满意，第一次全部音乐和频谱相吻合， https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif 小辣椒 发表于 2024-1-15 21:38
@马黑黑
黑黑我忘记你那个源码教程了，反正感觉这个播放器和整个画面很相配我就一点没有修改直接用上了 ...
这个配黑色、红色的都挺好 在音乐的陪伴下，走过岁月。 小辣椒 发表于 2024-1-15 22:32
背景我开始用动图的，感觉画面太乱了，找了个底图做背景，感觉不够灵动就去加了标题字
亲爱的仔细斟酌过的，所以现在的很完美{:4_205:} 小辣椒 发表于 2024-1-15 22:33
我主要对这个频谱效果非常满意，第一次全部音乐和频谱相吻合，
是啊，岁月的频谱毕竟是跟着原歌曲的，找到一个和频谱完全吻合的十分不易呢{:4_187:} 标题的字设计的很有新意。 梦油 发表于 2024-1-16 11:11
标题的字设计的很有新意。
谢谢梦油夸奖{:4_187:} 红影 发表于 2024-1-16 09:43
是啊，岁月的频谱毕竟是跟着原歌曲的，找到一个和频谱完全吻合的十分不易呢
不是啊，主要我以前是动图，频谱只有一点点，音乐我都是岁月的视频转出来的，一样的音乐，只是频谱和音乐不相符了，现在整个视频都在，音乐还是视频转出来的，完全相符了 红影 发表于 2024-1-16 09:42
亲爱的仔细斟酌过的，所以现在的很完美
我只是喜欢玩岁月的AE效果{:4_170:}