谁把爱情谱成一首曲
本帖最后由 醉美水芙蓉 于 2023-2-20 21:10 编辑 <br /><br /><style>#papa {
margin: -120px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: gray url('https://pic.imgdb.cn/item/611513345132923bf8204e56.jpg') no-repeat center/cover;
box-shadow: 8px 4px 20px hsla(0,0%,0%,.65);
user-select: none;
position: relative;
z-index: 1;
}
</style>
<div id="papa"></div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=261877376&.mp3" loop autoplay></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',playerCode: `<style>#mplayer {position: absolute;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 4px;display: grid;place-items: center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--ww: 260px;--color: hsl(60, 90%, 40%);--btn_size: 35px;--track: hsla(90, 100%, 95%, .65);--prog: linear-gradient(90deg, hsla(90, 30%, 50%, .55), hsla(60, 100%, 50%, .65), hsla(90, 30%, 50%, .75));}#btnplay {--state: paused;position: absolute;top: -40px;width: 50px;height: 50px;border-radius: 50%;box-shadow: 10px 8px 0 0 var(--color);cursor: pointer;opacity: .9;animation: rot 1s linear infinite alternate;animation-play-state: var(--state);}#btnplay::before,#btnplay::after {position: absolute;content: '';}#btnplay::before {left: 15px;top: 12px;width: 90%;height: 90%;}#btnplay::after {left: 15px;top: 15px;width: 40%;height: 40%;border-radius: 50%;background: var(--color);}#prog {--xx: 0px;grid-area: prog;width: var(--ww);height: 10px;border-radius: 8px;background: var(--track);position: relative;cursor: pointer;}#prog::before {position: absolute;content: '';width: var(--xx);height: 100%;border-radius: 8px;background: var(--prog);}#cur {grid-area: cur;color: var(--color);}#dur {grid-area: dur;color: var(--color);}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6), hsla(0, 100%, 50%, .75));position: absolute;font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);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(30deg); } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><span id="cur">00:00</span><span id="dur">00:00</span><span id="btnplay"></span><span id="prog"></span></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0,mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);prog.style.setProperty('--xx', prg + 'px');for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.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;}};mkPlayer.HCPlayer = playCode;})(this);
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
/* 变量 averAdd : 歌词用时平均值补偿; offset : lrc时间偏差值 */
let averAdd = 0, offset = 1.5;
let geci = `
谁把爱情谱成一首曲
作曲：默念
编曲：阿Ben
演唱：雨露
LRC编辑：醉美水芙蓉
是谁把爱情谱成一首曲
动听的旋律勾起我回忆
一幕一幕如拍摄的花絮
一点一滴回放在脑海里
回想起当初你说的话语
一字一句还那么的清晰
你说人海中有缘才相遇
走到了一起多么不容易
不管以后有多少风和雨
都会陪着我一直走下去
你也会包容我的小脾气
决不会让我受一点委屈
说过的誓言你当成游戏
这段感情被轻易的放弃
我在回忆中无声的哭泣
流下了多少不舍的泪滴
回想起当初你说的话语
一字一句还那么的清晰
你说人海中有缘才相遇
走到了一起多么不容易
不管以后有多少风和雨
都会陪我到白首不分离
你也会包容我的小脾气
决不会让我受一点委屈
你说的誓言已不再珍惜
这段感情被彻底的放弃
我在回忆中无声的哭泣
流下了多少不舍的泪滴
是谁把爱情谱成一首曲
写尽了人生悲欢和别离
动听的旋律仍然再演绎
你许的承诺却无法继续
动听的旋律仍然再演绎
你许的承诺却无法继续
谢谢欣赏！ `;
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;};
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));}
HCPlayer({
lrcAr: getLrcAr(geci),
lrc_css: '--bg: linear-gradient(hsla(200,80%,50%,.35),hsla(200,70%,45%,.6)); left: 30px; bottom: 20px;',
player_css: '--color: yellow; bottom: 100px; left: 20px;',
});
FS({
pa: papa,
set: 'backgroun: transparent; color: snow; border: 2px dotted snow; left: 20px; top: 20px;',
});
})();
</script>
这个原始歌词同步，对水芙蓉来说是小菜一碟，以前也是经常做的吧 第一句歌词在源码里面没有顶格，出来就有了距离 小辣椒 发表于 2023-2-20 21:08
第一句歌词在源码里面没有顶格，出来就有了距离
谢谢小辣椒点评还在学习中！ 水芙蓉的选图好美，同步歌词也挺好的{:4_187:} 千羽 发表于 2023-2-20 21:13
水芙蓉的选图好美，同步歌词也挺好的
千羽你的图图做得那么漂亮！你也可以做同步歌词的！ 醉美水芙蓉 发表于 2023-2-20 21:15
千羽你的图图做得那么漂亮！你也可以做同步歌词的！
问好水芙蓉，不好意思，俺不会{:4_173:} 美图配轻轻柔柔的小声音，真好听！ 水芙蓉好棒，这么快就做出来了，这个制作好美{:4_187:} 樵歌 发表于 2023-2-20 21:26
美图配轻轻柔柔的小声音，真好听！
谢谢樵歌支持！ 红影 发表于 2023-2-20 21:39
水芙蓉好棒，这么快就做出来了，这个制作好美
谢谢红影美女支持！
醉美水芙蓉 发表于 2023-2-20 21:55
谢谢红影美女支持！
水芙蓉聪明，这个做得真漂亮{:4_187:} 起个网名好难 发表于 2023-2-20 22:14
谢谢老师支持！ 真美，点赞 庶民 发表于 2023-2-21 05:15
真美，点赞
老师早上好！ 漂亮的帖，欣赏问好！{:4_204:} 欣赏老师佳作！ 海笑 发表于 2023-2-21 09:34
欣赏老师佳作！
谢谢老师支持！ 梦缘 发表于 2023-2-21 08:19
漂亮的帖，欣赏问好！
谢谢老师支持！
页:
[1]