江南烟雨色 TO：马黑黑
本帖最后由 朵拉 于 2023-3-26 22:03 编辑 <br /><br /><style>#papa {
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: gray url('https://pic.imgdb.cn/item/64202f33a682492fcce2d089.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://music.163.com/song/media/outer/url?id=2021075449.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 = 0.1;
let geci = `
作词 : 廖凌鹏/杨树人
作曲 : 万垒
编曲 : 王灏/卡其漠罗洋
制作人 : 廖凌鹏
雨变得很安静让风轻轻吹着
炊烟袅袅腾挪古刹染上青色
我走过小桥流水却忽见来客
你达达的马蹄记得及时报错
古城将晚有你的光会照亮我
像诗里往事如此浮生终若何
如果害怕犯错什么都不去做
怎么让心动能开花结果
我看过 江南烟雨色
暮霞逐云波
却都不及你一个眼神独特
爱溢出山峦湖泊
我都收录着
你就是迢迢星河
最亮那一颗
从百无聊赖逃脱
阳光找到我
你是我心之所向牵挂的集合
去将世俗的寂寞
全部都打破
你会栖息在我每一个角落
古城将晚有你的光会照亮我
像诗里往事如此浮生终若何
如果害怕犯错什么都不去做
怎么让心动能开花结果
我看过 江南烟雨色
暮霞逐云波
却都不及你一个眼神独特
爱溢出山峦湖泊
我都收录着
你就是迢迢星河
最亮那一颗
从百无聊赖逃脱
阳光找到我
你是我心之所向牵挂的集合
去将世俗的寂寞
全部都打破
你会栖息在我每一个角落
我看过 江南烟雨色
暮霞逐云波
却都不及你一个眼神独特
爱溢出山峦湖泊
我都收录着
你就是迢迢星河
最亮那一颗
从百无聊赖逃脱
阳光找到我
你是我心之所向牵挂的集合
去将世俗的寂寞
全部都打破
你会栖息在我每一个角落
你会栖息在我每一个角落
混音 : 何镭
录音 : 黄林洋
配唱监制 : 廖凌鹏
和声 : 顺儿
吉他 : 李国宏
统筹 : 廖凌鹏/冯昌榆
监制 : 许雯静/刘嘉雄
推广 : CAI
项目统筹 : 宋旭辉/李若嫣
总监制 : 陈国威
制作公司 : 匠心音乐
`;
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: snow; bottom: 100px; left: 20px;',
});
FS({
pa: papa,
set: 'backgroun: transparent; color: snow; border: 2px dotted snow; left: 20px; top: 20px;',
});
})();
</script> @马黑黑
马师 晚上好，美女配好曲赠予您{:4_204:} @马黑黑
马师，请教：歌词不同步怎么调整？{:4_190:} 朵拉 发表于 2023-3-26 20:09
@马黑黑
马师 晚上好，美女配好曲赠予您
非常感谢 照单全收？{:4_170:} 马黑黑 发表于 2023-3-26 20:36
照单全收？
马师，怎么调整歌词同步，学生愚钝了{:4_201:} 朵拉 发表于 2023-3-26 20:46
马师，怎么调整歌词同步，学生愚钝了
这是个技术化，你要回lrc歌词制作软件的用法，不是一言两语能说清楚，要自己去领会。 欣赏朵拉美贴{:4_187:} 美女陶醉在美景中，问好朵拉{:4_187:} 黑黑老师收美女礼开心{:4_187:} 马黑黑 发表于 2023-3-26 20:47
这是个技术化，你要回lrc歌词制作软件的用法，不是一言两语能说清楚，要自己去领会。
马师，有一丢丢领会~~ 雨中悄然 发表于 2023-3-26 20:55
欣赏朵拉美贴
谢谢悄然的欣赏{:4_204:} 千羽 发表于 2023-3-26 21:09
美女陶醉在美景中，问好朵拉
谢谢千羽的欣赏{:4_204:} 朵拉 发表于 2023-3-26 22:06
马师，有一丢丢领会~~
能上手的 好漂亮的制作，欣赏朵宝好帖{:4_187:} 好美的感觉。 朵拉这个帖做的不错，画面也是好美的{:4_199:} 黑黑收礼开心{:4_187:}
页:
[1]