《十八姑娘一朵花》林淑容
本帖最后由 焱鑫磊 于 2023-11-20 10:22 编辑 <br /><br /><style type="text/css">#bj{position: relative;width: 1164px;height: 620px;MARGIN-LEFT:-280px;margin-top:100px;;overflow:hidden;background:url('https://img.fy6b.com/2023/04/06/d19faabe2ebe1.gif')no-repeat center / cover;--opt: .2;}
#mplayer{width: 300px; height: 300px; position: absolute; left: 60%;top: 10%;
animation: spin 18s linear infinite; }
@keyframes spin {
0% { transform: rotate(360deg)scale(1);filter:hue-rotate(360deg)contrast(100%)brightness(200%); } 50% { transform: rotate(0deg)scale(1);filter:hue-rotate(0deg)contrast(100%)brightness(100%); opacity: 1;}100% { transform: rotate(-360deg)scale(1);filter:hue-rotate(0deg)contrast(100%)brightness(100%); opacity: 0.5;}
}
#tmsg {position: absolute;
font: normal 18px sans-serif;
color: #ffffff;
top:350px;
left:68%;}
#prog {position: absolute;
width: 100%;
height: 0.3%;
cursor: pointer;
top:99%;
margin:0px 0%;
border-radius: 2px;}
</style>
<divid="bj">
<div id="mplayer">
<svg id="ssvg" width="300" height="300" >
<circle id="yuan" cx="150" cy="150" r="5" fill="#000000" />
</svg>
</div>
<divid="prog"></div>
<div id="tmsg">00:00 | 00:00</div>
<div data-lrc="焱鑫磊博客" id="lrc">焱鑫磊博客</div>
<audio src="https://storage.live.com/items/1965B2B1656C2AF6!17959?=寻梦花园.mp3" loop autoplay id="aud"></audio>
</div>
<script>
let sepan = () => {
/* 彩虹颜色数组 */
let colors = ['red','orange','yellow','green','cyan','blue','purple'];
/* 获取svg宽高 */
let ww = ssvg.getAttribute('width'),
hh = ssvg.getAttribute('height');
/* 处理svg宽高意外 */
if(ww < 50) ww = 50;
if(hh < 50) hh = 50;
ssvg.setAttribute('width', ww);
ssvg.setAttribute('height', hh);
/* 圆心坐标和圆半径取svg宽高最短边值 */
let c = r =ww > hh ? hh / 2 : ww / 2;
let a = 360 / 7; /* 角度 : 圆周七等分 */
yuan.setAttribute('cx',c); /* 小圆点圆心X坐标 */
yuan.setAttribute('cy',c); /* 小圆点圆心Y坐标 */
/* 用 for 循环依次绘制七个三角形 */
for(j = 0; j < 7; j++) {
let color = colors; /* 取颜色 */
let a1 = a * j; /* 三角形等腰边1与圆周交点的角度 */
let a2 = a1 + a; /* 三角形等腰边2与圆周交点的角度 */
/* 下面使用余弦正弦函数分别获取交点1和交点2的XY坐标值 */
let x1 = c + r * Math.cos(Math.PI / 180 * a1),
x2 = c + r * Math.cos(Math.PI / 180 * a2),
y1 = c + r * Math.sin(Math.PI / 180 * a1),
y2 = c + r * Math.sin(Math.PI / 180 * a2);
/* 创建svg path元素 */
let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
/* 设置 path d 路径属性值 */
path.setAttribute('d', `M ${c} ${c} L${x1} ${y1} A ${c} ${c} 0 0 0 ${x2} ${y2} L${c} ${c}`);
/* 设置 path 填充颜色 */
path.setAttribute('fill', color);
/* 将 path 添加到 id="yuan" 的circle的前面（放后面圆点会被覆盖） */
ssvg.insertBefore(path, yuan);
}
};
sepan();/* 运行绘制彩虹伞函数 */
</script>
<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 = `
《十八姑娘一朵花》林淑容
词：庄奴 曲：乃萍
十八的姑娘一朵花
一朵花
眉毛弯弯眼睛大
眼睛大
红红的嘴唇雪白牙
雪白牙
粉色的笑脸
粉色笑脸赛晚霞
啊 姑娘十八一朵花
一朵花
十八的姑娘一朵花
一朵花
每个男人都想她
都想她
没钱的小伙儿她不爱
她不爱
有钱的老头儿
有钱老头儿她不嫁
啊 姑娘十八一朵花
一朵花
十八的姑娘一朵花
一朵花
美丽青春好年华
好年华
姑娘长大不可留
不可留
留来留去
留来留去成冤家
啊 姑娘十八一朵花
一朵花
`;
/*变量 ：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, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 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>
漂亮的制作，欣赏焱鑫磊好帖{:4_187:} 这个应该是跟着亚伦老师那个帖子做的吧，亚伦老师很快，黑黑的小伞效果刚出来，他就做好了{:4_173:} 欣赏漂亮的制作{:4_199:} 楼主有才的 歌儿好听 感谢分享 红影 发表于 2023-11-20 15:24
漂亮的制作，欣赏焱鑫磊好帖
{:4_187:} 红影 发表于 2023-11-20 15:25
这个应该是跟着亚伦老师那个帖子做的吧，亚伦老师很快，黑黑的小伞效果刚出来，他就做好了
跟着老师后面跑。追不上呢！别见笑。{:4_181:} 世外桃源 发表于 2023-11-20 15:39
欣赏漂亮的制作
{:4_187:} 世外桃源 发表于 2023-11-20 15:39
楼主有才的
学习中！见笑了！{:4_187:} 世外桃源 发表于 2023-11-20 15:40
歌儿好听 感谢分享
{:4_176:} 漂亮的伞花，好看{:6_244:} 焱鑫磊 发表于 2023-11-20 16:34
问好焱鑫磊，晚上好{:4_187:} 焱鑫磊 发表于 2023-11-20 16:36
跟着老师后面跑。追不上呢！别见笑。
这个制作还是挺漂亮的，给焱鑫磊点赞{:4_204:} 彩色的伞是播放器按钮 漂亮姑娘眼睛会眨 发现焱鑫磊很高产，今天看见二个帖了，制作辛苦{:4_178:} 感谢分享{:4_187:} 幸运草 发表于 2023-11-20 18:44
漂亮的伞花，好看
{:4_187:} 冬天的雨 发表于 2023-11-20 20:19
彩色的伞是播放器按钮
{:4_181:}{:4_187:}