做个简单的播放器
本帖最后由 亚伦影音工作室 于 2023-12-28 21:50 编辑 <br /><br /><style>#mydiv {
margin: 120px -300px;
width: 1164px;
height: 620px;
background: #333 url('https://pic.imgdb.cn/item/658d7b30c458853aefc07335.jpg')no-repeat center/cover;
overflow: hidden;
cursor: pointer;
position: relative;
--state: running;
}
li-zi {
position: absolute;z-index: 1;
background: linear-gradient(to bottom, transparent, snow);
animation: drop var(--dur) var(--delay) infinite linear var(--state);
}
@keyframes drop { to { top: 100%; } }
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
position: absolute;z-index: 6;
left: 48%;
transform: translate(-52%);
top: 86%;
font:normal 3em 华文新魏;
color: #000080;
-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{0% { width: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}
</style>
<div id="mydiv"><div data-lrc="爱的路上烟雨蒙蒙 - 赵洋" id="lrc">爱的路上烟雨蒙蒙 - 赵洋</div></div>
<audio id="aud" src="https://www.qqmc.com/mp3/music327680381.mp3" autoplay loop></audio>
<script>
let canMove = true;
//Lizi 类
class Lizi {
constructor(pa) {
this.pa = pa;
this.size = {x: 20, y: 20};
this.pos = {x: 8, y: 8};
this.ele = document.createElement('li-zi');
};
//创建粒子
creating() {
this.ele.style.cssText = `
width: ${this.size.x}px;
height: ${this.size.y}px;
left: ${this.pos.x}px;
top: ${this.pos.y}px;
`;
this.pa.appendChild(this.ele);
};
}
//实例化类
Array.from({length: 200}).forEach((element) => {
element = new Lizi(mydiv);
element.size = {
x: 1 + Math.round(Math.random()),
y: 6 + Math.random() * 60
};
element.pos = {
x: Math.floor(Math.random() * mydiv.offsetWidth),
y: 0
};
element.creating();
element.ele.style.setProperty('--dur', 0.8 + Math.random() * 0.8 + 's');
element.ele.style.setProperty('--delay', Math.random() * -0.8+ 's');
});
mydiv.onclick = () => { aud.paused ? aud.play() : aud.pause();
canMove = !canMove;
mydiv.style.setProperty('--state', canMove ? 'running' : 'paused');
console.log(canMove);
}
</script>
<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')) : (lrc.style.setProperty('--state','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_199:} 这个应该是很早以前黑黑的代码吧，用在这个背景里特别清晰。欣赏亚伦老师好帖{:4_199:} 欣赏漂亮制作{:4_204:}
页:
[1]