论坛 › 音乐沙龙 › 《生而为人》（学习黑黑《神战》管状进度条频谱效果）

红影 发表于 2024-8-17 21:57

《生而为人》（学习黑黑《神战》管状进度条频谱效果）

<style>
#papa {
        margin: 80px 0 30px calc(50% - 621px);
        width: 1080px;
        height: 607px;
        background: url('https://pic.imgdb.cn/item/66c09b5bd9c307b7e95315b7.jpg') 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;
        opacity: .25;
        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=1335350269" autoplay loop></audio>
        <video src="https://img.tukuppt.com/video_show/15653652/01/40/17/632c25ab1244e_10s_big.mp4" autoplay loop muted></video>
</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看着镜子里狼狈的自己\n我用了一半的青春\n来思考做人的道理\n对不起年少的自己\n行千万里再别忘了初心\n`;

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

sf.onload = () => {
        HCPlayer({
                papa: '#papa',
                geci: geci,
                skip: 0,
                average: 0,
                pinpu: {num: 50, width: 3, height: 150, color: 'linear-gradient(#c89f4c 1px, transparent 10px, transparent 30%, #c89f4c 50% 0)'},
                player_css: 'bottom: 20px; color: #e5a41f; --prog: white; --track: silver; --cap: #f8deab',
                lrc_css: 'top: 30px; --bg: linear-gradient(#4e3709, #d8a131, #876622); color: #e7ce9d; font: bold 2.8em sans-serif;',
                fs_css: 'left: 10px; bottom: 10px; --bg: transparent; --color: Gray;'
        });
};
</script>

红影 发表于 2024-8-17 22:00

《生而为人》是由尚士达作词、作曲，区密编曲，尚士达演唱的歌曲，发行于2018年12月24日。
生而为人，但从来没有人告诉你，你应该成为一个怎样的人。
歌曲中表达着人生的无奈，事事不能如你所愿，感慨想要忘记一切，对不起年少的自己。

偶尔听到的一首歌，觉得还不错。就用来做个帖子学习代码了。感谢@马黑黑 的代码{:4_187:}

红影 发表于 2024-8-17 22:05

还发现了另一个版本的这首歌，不过我先听的是上面这首{:4_173:}

你无法改变，生而为人的一切
你自由吗
就算你日行万里也躲不过地球是个圆
你快乐吗
就算你本本分分你爱的人也不在身边
你绝望吗
清醒的人怀疑自己最后疯疯又颠颠
你可以改变，所以你视而不见

马黑黑 发表于 2024-8-17 22:59

这个已经是专业水准了

起个网名好难 发表于 2024-8-18 05:14

https://5b0988e595225.cdn.sohucs.com/images/20190627/2fcecd89550b4c1cb36ee7bff90ab110.gif

红影 发表于 2024-8-18 08:27

马黑黑 发表于 2024-8-17 22:59
这个已经是专业水准了

到黑黑站里去看过，频谱也可以做线性渐变，赶紧跟着学习了一个{:4_173:}

红影 发表于 2024-8-18 08:32

起个网名好难 发表于 2024-8-18 05:14


谢谢难难。偶尔听到这首，也觉得满好听的{:4_187:}

梦油 发表于 2024-8-18 09:40

这放射的光柱仿佛使整个画面都动起来了。

马黑黑 发表于 2024-8-18 09:41

红影 发表于 2024-8-18 08:27
到黑黑站里去看过，频谱也可以做线性渐变，赶紧跟着学习了一个

播放器的宽度取决于频谱条数和频谱条宽度

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

梦油 发表于 2024-8-18 09:40
这放射的光柱仿佛使整个画面都动起来了。

这歌曲感觉很多失落，给他带点阳光，让心情明亮点{:4_173:}

红影 发表于 2024-8-18 10:30

马黑黑 发表于 2024-8-18 09:41
播放器的宽度取决于频谱条数和频谱条宽度

是的，感觉到了。频谱条宽度比较大并且条数多，播放器就整体变宽。
这个设计很匠心，只要调就好，不需要自己去计算了{:4_187:}

马黑黑 发表于 2024-8-18 10:33

红影 发表于 2024-8-18 10:30
是的，感觉到了。频谱条宽度比较大并且条数多，播放器就整体变宽。
这个设计很匠心，只要调就好，不需要 ...

掌控好就行，频谱是用标签做的，条数太多是对性能会有影响

红影 发表于 2024-8-18 10:56

马黑黑 发表于 2024-8-18 10:33
掌控好就行，频谱是用标签做的，条数太多是对性能会有影响

我也没去管它宽窄，就是看着差不多比较好看，就取了数值{:4_173:}

小辣椒 发表于 2024-8-18 13:24

欣赏亲爱的精彩的制作{:4_187:}

小辣椒 发表于 2024-8-18 13:26

这个频谱漂亮，整体画面有点旧建筑风格，或者说是怀旧风格，赞！

梦油 发表于 2024-8-18 16:45

红影 发表于 2024-8-18 10:28
这歌曲感觉很多失落，给他带点阳光，让心情明亮点

你想得真周到

红影 发表于 2024-8-18 20:46

小辣椒 发表于 2024-8-18 13:24
欣赏亲爱的精彩的制作

谢谢亲爱的鼓励{:4_187:}

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

小辣椒 发表于 2024-8-18 13:26
这个频谱漂亮，整体画面有点旧建筑风格，或者说是怀旧风格，赞！

我通常是找到什么就用什么{:4_173:}

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

梦油 发表于 2024-8-18 16:45
你想得真周到

也称不上呢，就是为了色彩协调选了几个效果{:4_173:}

梦油 发表于 2024-8-19 16:28

红影 发表于 2024-8-18 20:47
也称不上呢，就是为了色彩协调选了几个效果

你是一位有心人。

查看完整版本: 《生而为人》（学习黑黑《神战》管状进度条频谱效果）