我是不是你最疼爱的人
本帖最后由 醉美水芙蓉 于 2023-12-20 20:58 编辑 <br /><br /><style type="text/css">#bj{position: relative;width: 1164px;height: 620px;MARGIN-LEFT:-300px;margin-top:0px;;overflow:hidden;background:url('https://pic.imgdb.cn/item/65818a91c458853aef6b3700.png')no-repeat center / cover;--opt: .2;}
#mplayer{width: 400px; height: 400px; position: absolute; right: 60%;top: 10%;
animation: spin 18s linear infinite; }
@keyframes spin {
0% { transform: rotate(360deg)scale(0.7);filter:hue-rotate(360deg)contrast(100%)brightness(200%); } 50% { transform: rotate(0deg)scale(0.7);filter:hue-rotate(0deg)contrast(100%)brightness(100%); opacity: 1;}100% { transform: rotate(-360deg)scale(0.7);filter:hue-rotate(0deg)contrast(100%)brightness(100%); opacity: 1;}
}
#tmsg {position: absolute;z-index:2 ;
font: normal 12px sans-serif;
color: #ffffff;
top:400px;
right:75%;}
#prog {position: absolute;z-index:2 ;
width: 100%;
height: 3%;
cursor: pointer;
top:97%;
margin:0px 0%;
border-radius: 0px;}
#canv {display: block; position: absolute;width:100%; height: 200px; bottom: 20px; left: 0px;z-index:1 ; animation: sp 1s linear infinite;}
@keyframes sp {
0% { filter:hue-rotate(360deg)contrast(150%)brightness(100%); }
}
</style>
<divid="bj">
<div id="mplayer">
<svg width="400" height="400">
<polygonpoints="400.00,200.00 2.04,171.54 391.90,256.35 18.07,116.92 368.25,308.13 48.85,69.03 330.97,351.15 91.87,31.75 283.08,381.93 143.65,8.10 228.46,397.96 200.00,0.00 171.54,397.96 256.35,8.10 116.92,381.93 308.13,31.75 69.03,351.15 351.15,69.03 31.75,308.13 381.93,116.92 8.10,256.35 397.96,171.54 0.00,200.00 397.96,228.46 8.10,143.65 381.93,283.08 31.75,91.87 351.15,330.97 69.03,48.85 308.13,368.25 116.92,18.07 256.35,391.90 171.54,2.04 200.00,400.00 228.46,2.04 143.65,391.90 283.08,18.07 91.87,368.25 330.97,48.85 48.85,330.97 368.25,91.87 18.07,283.08 391.90,143.65 2.04,228.46" fill-rule="nonzero | evenodd" fill="#ff0000" stroke="#00f000" stroke-width="1" />
</svg>
</div>
<divid="prog"></div>
<div id="tmsg">00:00 | 00:00</div>
<div data-lrc="" id="lrc"></div>
<canvas id='canv' width="1200" height="250"></canvas>
<audio autoplay="" id="aud" loop="" src="https://mp3.t57.cn:7087/kwlink_d.php?id=275223430.mp3" crossOrigin="anonymous"> </audio>
</div>
<style type="text/css">#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #880000);
position: absolute;z-index: 4;
left: 50%;
transform: translate(-50%);
top: 85%;
font:normal 3em 华文隶书;
color: #000078;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `我是不是你最疼爱的人-半吨兄弟
词：小虫
曲：小虫
编曲：左壬鹏
吉他：支爽
制作人：郭朝阳
和声设计：王博玄
和声：小曦
录音：周明
录音棚：半吨兄弟Music studio
混音/母带工程师：郭朝阳
混音/母带棚：半吨兄弟Music studio
宣发：张丹娴/廖文婷
统筹：唐欣宇
LRC编辑：醉美水芙蓉
从来就没冷过
因为有你在我身后
你总是轻声地说
黑夜有我
你总是默默承受
这样的我不敢怨尤
现在是为了什么
不再看我
我是不是你最疼爱的人
你为什么不说话
握住是你冰冷的手
动也不动让我好难过
我是不是你最疼爱的人
你为什么不说话
当我需要你的时候
你却沉默不说
从来就没冷过
因为你在我身后
你总是轻声地说
黑夜有我
你总是默默承受
这样的我不敢怨尤
现在是为了什么
不再看我
我是不是你最疼爱的人
你为什么不说话
握住是你冰冷的手
动也不动让我好难过
我是不是你最疼爱的人
你为什么不说话
当我需要你的时候
你却沉默不说
我是不是你最疼爱的人
你为什么不说话
握住是你冰冷的手
动也不动让我好难过
我是不是你最疼爱的人
你为什么不说话
当我需要你的时候
你却沉默不说
谢谢欣赏！`;
/*变量 ：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); /*获得歌词数组*/
})();
mplayer.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });
mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #006400, #006400, #ff0000 ' + aud.currentTime / aud.duration * 100 + '%, #2F4F4F 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
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;
};
</script>
<script>
(function () {
let Act = new AudioContext();
let audSrc = Act.createMediaElementSource(aud);
let analyser = Act.createAnalyser();
audSrc.connect(analyser);
analyser.connect(Act.destination);
let ctx = canv.getContext('2d');
let width = canv.width;
let height = canv.height;
let ppColor = ctx.createLinearGradient(350,200,350,0);
ppColor.addColorStop(0.6, '#ff0000');
ppColor.addColorStop(0.4, '#00ff00');
ppColor.addColorStop(0, '#00ff00');
let ppNum = 200;
let voiceHeight = new Uint8Array(analyser.frequencyBinCount);
(function draw() {
analyser.getByteFrequencyData(voiceHeight);
let step = Math.round(voiceHeight.length / ppNum);
ctx.clearRect(0, 0, width, height);
for (let j = 0; j < ppNum; j++) {
let audiheighteight = voiceHeight;
ctx.fillStyle = ppColor;
ctx.fillRect(width / 2 + (j * 8), height, 4, -audiheighteight);
ctx.fillRect(width / 2 - (j * 8), height, 4, -audiheighteight);
}
window.requestAnimationFrame(draw);
})();
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 歌曲不能播放！{:4_198:} 都做这个效果了啊，真漂亮。欣赏水芙蓉美女好帖{:4_187:} 现在听到了！好听！谢谢分享！{:4_187:} 欣赏欣赏 发现这个频谱下面有一段颜色被遮住的，还是特定的效果？ 欣赏佳作，感谢分享 红影 发表于 2023-12-20 21:03
都做这个效果了啊，真漂亮。欣赏水芙蓉美女好帖
谢谢红影美女光临！ 世外桃源 发表于 2023-12-20 22:27
发现这个频谱下面有一段颜色被遮住的，还是特定的效果？
老师这个是进度条！ 欣赏老师的佳作，点赞！
醉美水芙蓉 发表于 2023-12-21 07:06
老师这个是进度条！
这个应该不是进度条，进度条在最下面的，可以看见，你频谱上有一段遮挡的颜色 醉美水芙蓉 发表于 2023-12-21 07:05
谢谢红影美女光临！
这个还是男声版的歌曲呢，有意思{:4_204:} 老谟深虑 发表于 2023-12-21 10:51
欣赏老师的佳作，点赞！
谢谢老师支持！
页:
[1]