开往终点的列车《Live版》 - 音画作品 - 微风音乐 - Powered by Discuz! Archiver

首页 › 音画作品 › 开往终点的列车《Live版》

liumang 发表于 2023-12-8 13:35

开往终点的列车《Live版》

<style type="text/css">
#bj{position: relative;width: 1164px;height: 620px;top:150px;MARGIN-LEFT:-160px;margin-top:0px;;overflow:hidden;background:url('https://pic.imgdb.cn/item/65720d7bc458853aef492487.gif')no-repeat center / cover;--opt: .2;}
#mplayer{width: 300px; height: 300px; position: absolute; left: 40%;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:360px;
   left:48%;}
#prog {position: absolute;
   width: 100%;
   height: 3%;
   cursor: pointer;
      top:97%;

   margin:0px 0%;
border-radius: 0px;}
</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://mp3.wf/3m/lieche.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, #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>
<br><br><br><br>

liumang 发表于 2023-12-8 13:36

用了亚伦老师的代码，感觉这个简洁大气漂亮

liumang 发表于 2023-12-8 13:38

特别喜欢音乐的进度条，好看，谢谢亚伦音乐

liumang 发表于 2023-12-8 13:38

{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2023-12-8 13:45

{:5_127:}

三月的阳光 发表于 2023-12-8 18:55

https://www.mp3.wf/static/image/smiley/xiaobaitu/15.gifhttps://www.mp3.wf/static/image/smiley/xiaobaitu/15.gif

页: [1]

查看完整版本: 开往终点的列车《Live版》