庄周一生梦一蝶-黄静美【小辣椒动图可控】
本帖最后由 亚伦影音工作室 于 2024-12-14 13:40 编辑 <br /><br /><style type="text/css">#papa {
width: 1200px;
height: 670px;
background: #000000 url('https://pic.imgdb.cn/item/64e0d36a661c6c8e541a39a5.jpg') no-repeat center/cover;
margin: 30px -300px ;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; display: grid;
place-items: center;
overflow: hidden;
position: relative;
z-index: 1;
}
#prog { position: absolute; bottom: 85%; width: 280px; height: 12px; background: linear-gradient(to right, snow var(--prg), gray 0) repeat-x 0 50% / 100% 1px;left:70%; color: snow; display: grid; place-items: center; --prg: 0%; --state: paused; z-index: 999;cursor: pointer;}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; font: normal 1.5em/0em serif;color:#ffffff; cursor: pointer; background: snow; left: var(--prg); }
#btnplay { position: absolute;bottom: 35px; font: normal 3em/0em serif;color:#ffffff; cursor: pointer; animation: rot 6s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }
#tu{position: absolute;top:0%; left:0%;z-index: 2;
width: 100%;
height: 100%;animation: round 60s linear infinite; }
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1.5)translate(10%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0)scale(1.5)translate(-10%,0%);
opacity:1}
40% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,10%);
opacity:1}
60% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,-10%);
opacity:1}
80% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}
}
#dt{position: absolute;top:0%; left:0%;
width: 100%;
height: 100%;z-index: 3; }
#mplayer {top:90%; left:45%;z-index: 6;
position: absolute;
width: 60px;
height: 60px;
overflow:hidden;
animation: spin 10s infinite linear;
}
@keyframes spin {0% { transform: rotate(360deg); }
}
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
position: absolute;z-index: 6;
left: 52%;
transform: translate(-50%);
top: 75%;
font:normal 3em 华文新魏;
font-weight:800;
color: #0000;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1{ 0% { width: 100%;transform:rotate(0deg)scale(0)}100% { width: 100%;transform:rotate(0deg)scale(1);filter:hue-rotate(360deg)}}
@keyframes cover2 { 0% { width: 100%;transform:rotate(0deg)scale(0)}100% { width: 100%;transform:rotate(0deg)scale(1);filter:hue-rotate(360deg)}}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:18%; left:76%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文隶书; opacity: 1; cursor: pointer; z-index: 1111}
#mpu {--ww: 100%;--hh: 180px;--pinpu: linear-gradient(to top,darkgreen,snow);position: absolute;bottom: 0px;left:0px;width: var(--ww);height: var(--hh);display: flex;justify-content: center;align-items: flex-end;cursor: pointer;z-index: 4; animation:rotat 6s linear infinite;}
@keyframes rotat{0%{filter:hue-rotate(360deg)}100%{filter:hue-rotate(0deg)}}
.mLine {position: relative;margin: 0 3px 2px 0;width: 6px;height: 18px;background: linear-gradient(0deg, #11F60A 79%,rgba(48, 235, 10, 0.01) 80%);transition: .35s;opacity: 1;}
.mLine::before { position: absolute; content: ''; width: 100%; height:2px; background: orange; top: -6px; }
</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id='dt'><img id="testImg" src="https://xlaj.cn/bfq/20230820/GIF.gif" width="100%" height="100%"></div>
<div id='tu'><img src="https://pic.imgdb.cn/item/64e0d36a661c6c8e541a39a5.jpg" alt=""width="100%" height="100%"></div>
<div id="mpu" ></div>
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
<span id="btnplay" title="播放/暂停"><div id="btn" >❊</div></span>
<span id="slider">✈</span>
</div>
<div id="screen">
<img id="particles" src="https://pic.imgdb.cn/item/643c06530d2dde5777131c12.png" style="visibility:hidden;"></div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/07/32/e8/80dd54041cde4d05aa3d3a62eaee00c1/audio.mp3" autoplay loop></audio>
<script>
let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; }
let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `作词：冯海毓
作曲：曲多美、小米
演唱：黄静美
编曲/混音：DJ Eva
庄周一生梦一蝶-黄静美
人声编辑：迟色
统筹：小法
宣发：星云计划
宣发策划：小梦、陶文、陈玉荣
制作人：亚伦
监制：熊磊王腾飞
发行人：亚伦
发行：亚伦影音
思念无声却让泪哽咽
世间情字最难写
庄周一生梦一蝶
我用一世渡一劫
真心最后换来殇离别
梦中人如水中月
求而不得空悲切
你是我此生解不开的结
走遍花花世界不停歇
曾为你不顾一切
思念无声却让泪哽咽
世间情字最难写
庄周一生梦一蝶
我用一世渡一劫
真心最后换来殇离别
梦中人如水中月
求而不得空悲切
你是我此生解不开的结
走遍花花世界不停歇
曾为你不顾一切
思念无声却让泪哽咽
世间情字最难写
庄周一生梦一蝶
我用一世渡一劫
真心最后换来殇离别
梦中人如水中月
求而不得空悲切
你是我此生解不开的结
你是解不开的结
庄周一生梦一蝶
我用一世渡一劫
真心最后换来殇离别
梦中人如水中月
求而不得空悲切
你是我此生解不开的结`;
/*变量 ：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());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.style.animationPlayState = 'paused');
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
</script>
<script>
(function() {
(function(mkPlayer) {let defaults = {ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10)};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);mpu.style.cssText += data.player_css;aud.loop = false;let total = Math.ceil(mpu.offsetWidth / 6), ppnum = 0;let mKey = 0, mFlag = true;for(j=0; j<total; j++) {let el = document.createElement('span');el.className = 'mLine';mpu.appendChild(el);}let lines = document.querySelectorAll('.mLine');let max = Math.max.apply(null,data.ypData);let divide = max/mpu.offsetHeight, coe = 20/total/2, plus;let update = () => lines.forEach((item,key) => {plus = (key < total/2 ? key : total - key) * coe * 10;item.style.setProperty('height', Math.random() * (data.ypData - 30) / divide + plus + 'px');});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('ended', () => { mKey = 0; aud.play(); });aud.addEventListener('timeupdate', () => {ppnum ++;if(ppnum >= data.ypData.length) ppnum = 0;update();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;mKey += 1;mFlag = !mFlag;};};mkPlayer.HCPlayer = playCode;})(this);
let ypData = ;
HCPlayer({ypData: ypData,
player_css: '--ww: 100%; --pinpu: linear-gradient(to top,blue,lightblue); align-items: flex-end;',
});
})();
mpu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mpu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mpu.style.animationPlayState = 'paused');
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image= document.getElementById("testImg"),
button = document.getElementById("btn");
if (image&& button) {
button.onclick = function() {
if (this.value == '') {
image.play();
this.value = '.';
} else {
image.stop();
this.value = '';
}
};
}
</script> 小辣椒的动图一直都特别的美，亚伦老师用得好{:4_199:} 这个频谱很漂亮，但貌似不是响应频谱呢{:4_204:} 亚伦的制作非常漂亮，这个动图一键停止，小辣椒也是测试了很多次了，电脑效果很完美，但我手机现在点击停止，动图在动，点击开始，音乐歌词出来，动图停止了
后来我再测试发现直接代码可以一键停止了，但我玩微信，博客，那要上传html,结果又出现这个问题，一键停止还是实现不了。好郁闷的。
谢谢亚伦继续帮忙测试，怎么样加了html.还是可以实现一键停止音乐和动图。
2023-8-21 19:01
ò
红影 发表于 2023-8-21 19:01
这个频谱很漂亮，但貌似不是响应频谱呢
写了一大篇字没有了{:4_198:}
这个他加了播放器，就不会是响应式频谱了 小辣椒 发表于 2023-8-21 19:29
亚伦的制作非常漂亮，这个动图一键停止，小辣椒也是测试了很多次了，电脑效果很完美，但我手机现在点击停止 ...
这些代码都是东拼西凑的。当然JS可以打包，html也可以打包，全部代码都可以打包成html，总之方法很多，但我不用，因为怕失效。 小辣椒 发表于 2023-8-21 19:29
亚伦的制作非常漂亮，这个动图一键停止，小辣椒也是测试了很多次了，电脑效果很完美，但我手机现在点击停止 ...
多数是各论坛的编辑器不一样，效果不同，我测试多次都是这样的！ 亚伦影音工作室 发表于 2023-8-21 19:55
这些代码都是东拼西凑的。当然JS可以打包，html也可以打包，全部代码都可以打包成html，总之方法很多，但 ...
HTML以后的代码我发现不能一键停止了，和现在这个一样，点击停止，动图在动，音乐和歌词停止 亚伦影音工作室 发表于 2023-8-21 19:59
多数是各论坛的编辑器不一样，效果不同，我测试多次都是这样的！
我也是测试了，纯代码可以做到一键同时停止，加了html不行了 小辣椒 发表于 2023-8-21 19:32
写了一大篇字没有了
这个他加了播放器，就不会是响应式频谱了
亲爱的手机回的吧，太可惜了，看不到了{:4_173:}
页:
[1]