谁知道我的苦-（不打包htm直接发测试）
本帖最后由 山里人 于 2023-9-1 21:48 编辑 <br /><br /> <style>#papa { margin: 0 0 0 calc(50% - 593px); width: 1164px; height: 650px; background: url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/tp/h.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#img_border{width:100%;height:100%;position: absolute;animation: rotating 10s linear infinite;z-index: -1;background: url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/tp/ynn.jpg') no-repeat center/cover;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);}
@keyframes rotating{
0% {opacity: 1;transform: scale(1);}
50% {opacity: 1;transform: scale(1);filter:hue-rotate(60deg)contrast(120%)brightness(120%);}
51% {opacity: 1;transform: scale(1);}
100% {opacity: 0;transform:scale(4)rotateY(0deg);}}
#vid { position: absolute; width: 110%; height: 120%; object-fit: cover; pointer-events: none; z-index: -1; opacity: 1; }
</style>
<div id="papa">
<video id="vid" src="https://img3.tukuppt.com/video_show/2421007/00/01/99/5b4ec6e9b2913.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<div id="img_border"></div>
</div>
<audio id="aud" crossorigin="anonymous" src="https://shanlr.s3-us-east-1.ossfiles.com/yu/s.mp3" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://ln2018.oss-cn-hangzhou.aliyuncs.com/2023/ss/ssxypp_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [
];
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: 'filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);font-family:华文隶书; --bg: #000080;top: 10px; color: #ff0000;',
fs_css: ' background: BlueViolet; color: GhostWhite; top: 69%; right: 16.5%; ',
player_css: `
bottom: 6.2%;
right: 5.9%;
--discBg:url('https://pic.imgdb.cn/item/6430f41f0d2dde577706d0ec.png') no-repeat center/cover;
--discSize: 40px;
--hh: 120px;
`,
player_css: `
bottom: 20px;
--ww: 1160px;
--color1: green;
--color2: lightblue;
--track: #ccc;
`,
pinpu: { size: 5, gap: 1},
fs_css: 'background: Gray; color: GhostWhite;',
pinpu_num: 120,
});
};
})();
img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `谁知道我的苦 (DJ默涵女版) - 猫儿
词：陈一龙
曲：陈一龙
编曲：DJ默涵
混音：DJ默涵
宣发：美杨杨
监制：DJ默涵
制作人：马化钦
出品发行：得金文化
「谁知道我的苦 (DJ默涵女版) - 猫儿」
我为了明天的幸福
起早贪黑的忙碌
面对所有的风和雨
永远都不曾认输
我有太多的委屈
从来也不说出口
总是偷偷的泪流
不知该向谁倾诉
谁知道我的累
谁知道我的苦
谁又可以分担我
心里的忧和愁
点燃了一支烟
倒满了一杯酒
抬起头来挺起胸
和往事挥挥手
我为了明天的幸福
起早贪黑的忙碌
面对所有的风和雨
永远都不曾认输
我有太多的委屈
从来也不说出口
总是偷偷的泪流
不知该向谁倾诉
谁知道我的累
谁知道我的苦
谁又可以分担我
心里的忧和愁
点燃了一支烟
倒满了一杯酒
抬起头来挺起胸
和往事挥挥手
谁知道我的累
谁知道我的苦
谁又可以分担我
心里的忧和愁
点燃了一支烟
倒满了一杯酒
抬起头来挺起胸
和往事挥挥手
`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};
/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for(x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};
/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};
/*格式化时间信息*/
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>
问好山里人，制作漂亮，频谱颜色调的不错 这个有跨越音乐就可以实现响应式频谱直接代码发帖的 谢谢分享精彩制作{:4_187:} 制作漂亮，欣赏山里人好帖{:4_187:} 不打包的说法没怎么懂，进到帖子里看到也有上传的js啊，我理解的打包就是这个啊{:4_173:} 只是歌词另外弄的，便于使用原始歌词。 小辣椒 发表于 2023-9-1 21:54
问好山里人，制作漂亮，频谱颜色调的不错
乱整的老师 小辣椒 发表于 2023-9-1 21:55
这个有跨越音乐就可以实现响应式频谱直接代码发帖的
代理地址不行吧 山里人 发表于 2023-9-1 22:43
乱整的老师
谦虚了，一起开心玩{:4_187:} 山里人 发表于 2023-9-1 22:49
代理地址不行吧
响应式频谱一定要跨越的可以直接代码发，不是跨越的要外加发帖代码发帖
页:
[1]