精致小播按钮[有音乐歌词]
本帖最后由 亚伦影音工作室 于 2024-12-22 03:41 编辑 <br /><br /><style>#cndpt{margin: -50px 20px ;
position: relative;width: 30px; height: 30px;
background:#ccc;border: 1px solid #000;box-shadow:0 0px 0px 6px #ccc;
border-radius: 50%;
opacity: 1; }
#cndpt:before {position: absolute;
content: '';
border-style: solid;
left: 9px;top:6px;
border-color: #000;
width: 2px;
height: 18px;
border-width: 0 5px 0 5px;
}
#enopg{margin: 0px 0px ; width: 30px; height: 30px;
border-radius: 50%;
position:relative;
background:#ccc;
display:none;
}
#enopg:before{border-style: solid;
border-color: #000;
position: absolute;
content: '';
left: 10px;top:5px;
width: 2px;
border-width: 10px 14px;
border-color: transparent transparent transparent #000;
}
#lrc{left: 10%;top: 0%;}#lrcc {right:-50%;top: 4%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#ff0000;border:0px solid black;position: relative;font:normal 2.8em 华文隶书;color: #000;white-space: pre;-webkit-background-clip: text;z-index: 10;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<div id="cndpt" onclick="pic()" >
<div id="enopg" ></div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/2c/87/32/ba6553bd63371ae2278151692c413526/audio.mp3" autoplay loop></audio>
<script >
function pic(){
varimgElement= document.getElementById('enopg');
if (imgElement.style.display === 'none' || imgElement.style.display === '') {
imgElement.style.display = 'block';aud.pause();
} else {
imgElement .style.display = 'none';aud.play();
}
}
</script >
<span id="lrcStr" style="visibility: hidden;">
手心里的温柔 - 刀郎
词：刀郎
曲：刀郎
你在我身边相对无言
默默的许愿对爱的依恋
牧场的炊烟装点着草原
爱相拥着牧归的少年
你在我身边把我的手牵
牵着我手心不变的誓言
高高的雪山祝福我们
爱在这一刻永恒永远
爱到什么时候要爱到天长地久
两个相爱的人 一直到迟暮时候
我牵着你的手 我牵着你到白头
牵到地老天荒 看手心里的温柔
你在我身边把我的手牵
牵着我手心不变的誓言
高高的雪山祝福我们
爱在这一刻永恒永远
爱到什么时候要爱到天长地久
两个相爱的人 一直到迟暮时候
我牵着你的手 我牵着你到白头
牵到地老天荒 看手心里的温柔
爱到什么时候要爱到天长地久
两个相爱的人 一直到迟暮时候
我牵着你的手 我牵着你到白头
牵到地老天荒 看手心里的温柔
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
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) => {
lrca=lrcAr;
lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
let Y=String(mKey/2).indexOf(".");
if (Y == -1)
{
0==mKey&&(lrc.innerHTML=lrca);
lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
lrcc.dataset.lrc = "";
lrc.style.setProperty('--motion', 'cover1');
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
}
else
{
lrc.innerHTML = lrcb;
lrcc.dataset.lrc = lrca;
lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
lrcc.style.setProperty('--tt', time + 's');
lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
}
mKey += 1;
};
/*函数 ：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mdiv.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mdiv.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;
}
}
});
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;
};
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script> 巧妙的构思 还是分行歌词。歌词字体选用也漂亮{:4_187:} 这小播陪着这样的同步歌词，非常漂亮{:4_199:} 加了分这个小波逃上面去了
页:
[1]