偏爱
本帖最后由 马黑黑 于 2024-8-26 19:20 编辑 <br /><br /><style>#mama {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background: url('https://638183.freep.cn/638183/t24/webp2/pmai.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;
}
</style>
<div id="mama" class="mama">
<audio src="https://music.163.com/song/media/outer/url?id=5238992" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/15653652/01/30/02/62aeebc173a62.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/jxypp_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#mama',
geci: geci,
ypData: ypData,
skip: -0.3,
average: -0.5,
pinpu: { size: 4, gap: 2, max: 150 },
player_css: 'right: 20px; bottom: 10px; --ww: 400px; --color1: darkgreen; --color2: lightgreen;',
lrc_css: 'left: 50%; top: 20px; --bg: linear-gradient(lime, green); color: lightgreen;',
fs_css: 'left: 20px; bottom: 20px; --bg: green; --color: white;',
});
};
var ypData = ;
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对你偏爱\n痛也很愉快`;
</script>
本帖最后由 马黑黑 于 2024-8-26 19:19 编辑 <br /><br /><h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#mama {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background: url('https://638183.freep.cn/638183/t24/webp2/pmai.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;
}
</style>
<div id="mama" class="mama">
<audio src="https://music.163.com/song/media/outer/url?id=5238992" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/15653652/01/30/02/62aeebc173a62.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/jxypp_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#mama',
geci: geci,
ypData: ypData,
skip: -0.3,
average: -0.5,
pinpu: { size: 4, gap: 2, max: 150 },
player_css: 'right: 20px; bottom: 10px; --ww: 400px; --color1: darkgreen; --color2: lightgreen;',
lrc_css: 'left: 50%; top: 20px; --bg: linear-gradient(lime, green); color: lightgreen;',
fs_css: 'left: 20px; bottom: 20px; --bg: green; --color: white;',
});
};
var ypData = ;
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对你偏爱\n痛也很愉快`;
</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>
插件说明：原生lrc歌词同步之假相应频谱播放器 (52qingyin.cn) 喜欢的歌，循环~~{:4_204:} 效果漂亮，学习下{:4_190:} 这个带本地音频波形数据，已经接近真响应了呢{:4_199:} 这个波形数据取得很好，感觉就是响应式的{:4_173:} 黑黑又带来一个新的封装呢。去看了原本的插件汇总，应该后面的是老唱机的封装了。
真好，原生歌词也有这么多封装，这样才完美{:4_199:} 歌曲好听，制作漂亮。视频用遮罩比原来的上拉要好，这样全屏的时候不会移位。
漂亮的制作{:4_199:} 黑黑很仔细，做这个效果之前再次测试了波形数据的效果{:4_187:} 醉美水芙蓉 发表于 2024-8-26 11:34
欣赏老师带来的精彩！
{:4_190:} 朵拉 发表于 2024-8-26 09:21
喜欢的歌，循环~~
{:4_190:} 红影 发表于 2024-8-26 10:57
这个波形数据取得很好，感觉就是响应式的
差距实在太大 红影 发表于 2024-8-26 11:01
黑黑很仔细，做这个效果之前再次测试了波形数据的效果
这个一直模拟不出逼真的来，所以做了一些实验，不过效果也还不好 这个音频不知道可以不可以偷懒，直接用黑黑的{:4_173:}
频谱肯定会出来的就是和音乐会不协调吧，晚上试了再说 小辣椒 发表于 2024-8-26 12:53
这个音频不知道可以不可以偷懒，直接用黑黑的
频谱肯定会出来的就是和音乐会不协调吧，晚上试 ...
若如此，你就不用设置ypData参数，也不用声明 var ypData = '....' ，代码少不少。 马黑黑 发表于 2024-8-26 12:35
差距实在太大
感觉很不错呢，我下回找个慢点的歌试试{:4_204:} 马黑黑 发表于 2024-8-26 12:37
这个一直模拟不出逼真的来，所以做了一些实验，不过效果也还不好
毕竟不是真的响应，也会适合某种节奏的，就不适合其他节奏呢。 红影 发表于 2024-8-26 21:59
毕竟不是真的响应，也会适合某种节奏的，就不适合其他节奏呢。
一句话：假的真不了