变色HTML5音画：一生的风 (《龙城》影视剧主题曲) - 那英
本帖最后由 亚伦影音工作室 于 2023-4-26 16:09 编辑 <br /><br /><style>#papa {
margin: 20px-300px;
display: grid;
place-items: center;
width: 1164px;
height: 620px;
background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/fb1da048d1b5ebdbcdac2db6a9e69ad8.jpg') no-repeat center/cover;
box-shadow: 0 0px 4px 0px hsla(0,0%,0%,.65);
user-select: none;
position: relative;
z-index: 1;
overflow:hidden;
}
#ptpt{width: 100%; display: grid;
place-items: center;
height: 100%;
background:url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/fb1da048d1b5ebdbcdac2db6a9e69ad8.jpg') no-repeat center/cover; user-select: none;
position:absolute;
z-index: 20;
animation: flash 10s infinite linear;
}
@keyframes flash { from {filter:hue-rotate(0deg) brightness(80%);} to {filter:hue-rotate(360deg)brightness(140%); } }
#mplayer {position: absolute;grid-template-columns: auto auto auto;gap: 8px;display: grid;place-items: center;color: var(--color);font: normal 12px sans-serif;z-index: 999;--ww: 500px;--color: #FFF000;--btn_size: 30px;--track: #FFF000;--prog: #FF0000;}
#btnplay {--state: paused;margin-right: -5px;font: bold var(--btn_size) / var(--btn_size) serif;cursor: pointer;animation: rot 4s infinite linear;animation-play-state: var(--state);}
@keyframes rot { to { transform: rotate(1turn); } }
#prog {--xx: 0px;width: var(--ww);height: 2px;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);}
@keyframes cover1{ from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
#lrc { --motion: cover2; --tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(240, 50%, 50%, .25), hsla(240, 30%, 50%, .75)); position: absolute;left: 40%; top:87%;filter: drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);font:normal 3em 华文行楷; color:#FF0000; z-index: 100; transform: translate(-30%, 10px);;-webkit-background-clip: text;white-space: pre;}
#lrc::before { position: absolute; content: attr(data-lrc); color: transparent; width: 20%; height: 100%;white-space: pre; background: linear-gradient(0deg, #1E9600 0%,#FFF200 50%,#FF0000 100%); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
</style>
<div id="papa"><div id="ptpt"></div><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div></div>
<audio id="aud" src="https://www.qqmc.com/mp3/music270271202.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%);',btn_txt: '❉',playerCode: ``,};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;btnplay.innerHTML = data.btn_txt;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;tmsg.innerText = `${toMin(aud.currentTime)} | ${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);
let averAdd = 0, offset = 0;
let geci = `一生的风 (《龙城》影视剧主题曲) - 那英
词：陈曦
曲：陈曦
编曲：闫天午
OP：亚伦影音工作室
SP：亚伦传媒
发行：亚伦影音工作室
字幕：亚伦
风还是昨晚的风
等你的秋意渐浓
吹拂着温柔在心中
时光匆匆又匆匆
春色撩人中目送
等换季时拥入怀中 怀中
若不是来时太汹涌
去时又觉得太冷清
我只想安静的等着
等一切烦恼无影踪
若不是想象太空洞
拥抱又不能够从容
无助的痛无法形容
爱上了一阵风
重拾昨晚的风
从破碎满地中
悲伤也远胜过遗忘
重温昨夜的梦
从落日余晖中
失去和拥有都随风 随风
若不是爱时太汹涌
去时又觉得太冷清
多少人有缘走一程
擦肩过就算一程
若不是想象太空洞
拥抱又不能够从容
多少爱撑起这永恒
共吹过一生的风
若不是爱时太汹涌
去时又觉得太冷清
多少人有缘走一程
擦肩过就算一程
若不是想象太空洞
拥抱又不能够从容
多少爱撑起这永恒
共吹过一生的风`;
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(90,80%,50%,.35),hsla(100,70%,45%,.6)); top:80%; ',
player_css: '--ww: 900px;bottom: 10px;',
btn_txt: '❉',
});
FS({
pa: papa,
set: 'backgroun: #333; color: snow; border: 2px solid snow; bottom: 90%; left: 20px;',
});
ptpt.style.animationPlayState =aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => ptpt.style.animationPlayState = 'running');
aud.addEventListener('pause', () => ptpt.style.animationPlayState = 'paused');
aud.onerror = () => {
if(aud.error.code === 4) aud.src='https://www.qqmc.com/mp3/music270271202.mp3';
}
})();
</script>
欣赏老师的精美音画，点赞！
制作精彩！谢谢学习了！{:4_178:} 欣赏！{:4_187:} 亚伦这个变色背景的歌词同步还可以全屏欣赏{:4_199:} 相比较许多美女图图的转换小辣椒还是喜欢这个背景效果，简洁美{:4_189:} 欣赏亚伦的漂亮制作{:4_178:} 漂亮的播放器，精彩分享！{:4_185:} 小辣椒 发表于 2023-4-26 20:06
相比较许多美女图图的转换小辣椒还是喜欢这个背景效果，简洁美
是啊，还是简单的好，特效多了也不好！ 亚伦影音工作室 发表于 2023-4-26 20:28
是啊，还是简单的好，特效多了也不好！
是的，越来越喜欢你的制作了 小辣椒 发表于 2023-4-26 20:33
是的，越来越喜欢你的制作了
小辣椒的动图很不错，如果不带文字我可尝试控制动图！ 亚伦影音工作室 发表于 2023-4-26 20:44
小辣椒的动图很不错，如果不带文字我可尝试控制动图！
带文字就不行了？ 本帖最后由 亚伦影音工作室 于 2023-4-26 20:55 编辑
小辣椒 发表于 2023-4-26 20:48
带文字就不行了？
可以的，只是想用别的歌，歌名不符啊！当然我可以删掉文字又嫌麻烦！ {:4_199:}好漂亮的帖 亚伦影音工作室 发表于 2023-4-26 20:53
可以的，只是想用别的歌，歌名不符啊！当然我可以删掉文字又嫌麻烦！
那就和我同一首歌{:4_170:} 小辣椒 发表于 2023-4-26 21:07
那就和我同一首歌
怕老师笑话！ 亚伦影音工作室 发表于 2023-4-26 21:08
怕老师笑话！
别叫老师，小辣椒~~~ 这个变色背景漂亮，欣赏亚伦老师好帖{:4_187:} 欣赏！ 小文 发表于 2023-4-27 16:51
欣赏！
谢谢支持！
页:
[1]