我等的人会是谁 （测试黑黑原始歌词同步）
<style>#papa {
margin: 120px 0 0 calc(50% - 800px);
width: 1397px;
height: 751px;
background: lightgreen url('https://7e.g74.net/uploads/xx/20230219/GIF.gif') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
}
#mplayer {
position: absolute;
width: 160px;
height: 160px;
right: 200px;
top: 60%;
border-radius: 50%;
cursor: pointer;
animation: rot 8s linear infinite;
}
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .65));
position: absolute;
left: 70%;
transform: translate(-50%);
top: 95px;
font: bold 2.6em sans-serif;
color: snow;
white-space: pre;
-webkit-background-clip: text;
filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
filter: inherit;
-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%; } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<img id="mplayer" src="https://7e.g74.net/uploads/xx/20230219/1.jpg" alt="" />
<audio id="aud" src="https://7e.g74.net/uploads/xx/20230219/wddrhss.mp3" loop autoplay></audio>
</div>
<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `
我等的人会是谁
测试黑黑原始歌词同步
TO：黑黑
我的故事也许比较特别
走过的路也许比较迂回
黑暗之中全凭着直觉
keep my faith watch my steps
一步步靠直觉
也许有天生命中会出现
那一个谁走进我的心里面
他不必是个mr perfect
只要他善良体贴
be my friend and be my soul mate
我等的人会是谁何时才出现
make me whole make me brave
我等的人会是谁不急在眼前
i can wait i will pray
Lrc编辑：小辣椒
也许有天生命中会出现
那一个谁走进我的心里面
他不必是个mr perfect
只要他善良体贴
be my friend and be my soul mate
我等的人会是谁何时才出现
make me whole make me brave
我等的人会是谁希望他了解
不管迷惘或坚决都是我的某一面
我并不追求完美
只要能用心体会每一天都是
better day
我等的人会是谁何时才出现
make me whole make me brave
我等的人会是谁何时才出现
陪着我一天一点让生命能变得更美
谢谢欣赏！
`;
/*变量 ：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());/*监听查询事件*/
mplayer.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script> @马黑黑 黑黑，发现我以前的歌词同步没有你的精确，你是逐字逐句出来的，我是一行字出来的，所以以后做歌词还是要自己编辑为好的 黑黑很强大~~~完美{:4_178:} 我们看缺少完美的。 刚好昨天做了图，没有想好做什么播放器，今天现成的速度就快了 庶民 发表于 2023-2-19 14:18
我们看缺少完美的。
哪里有问题？少了点什么我去修改
上次做的是H5播放器 一句歌曲一起出来的，所以没有黑黑的逐字逐句精确
https://www.huachaowang.com/forum.php?mod=viewthread&tid=35664
感谢老师的精彩等待，欣赏问好！{:4_187:} 真快啊，亲爱的这么快就做出来了，厉害{:4_187:} 仔细听了一遍，同步得很好啊。 亲爱的帖子里的动图用得特别好，这里又用了很多动态元素。画面漂亮，制作精美。欣赏亲爱的好帖{:4_187:} 这个不错，小辣椒很棒 小辣椒这个动图美女头像漂亮@小辣椒 小辣椒这个我暂时不做了{:4_170:} 小辣椒 发表于 2023-2-19 14:15
@马黑黑
感觉咋样 马老师收礼开心{:4_187:} 小辣椒 发表于 2023-2-19 14:17
黑黑，发现我以前的歌词同步没有你的精确，你是逐字逐句出来的，我是一行字出来的，所以以后做歌词还是要自 ...
精准与否，主要看lrc歌词的制作效果。我的同步机制，也不是逐字出来，首先，它有“底字”，这是按lrc时间标签一次性出来的，然后，我用伪元素再将“底字”覆盖，这是模拟逐字同步的效果。 小辣椒 发表于 2023-2-19 14:18
黑黑很强大~~~完美
完美说不上，只是呢，让一切更美好{:4_170:}