青衣 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

起个网名好难 发表于 2024-11-9 10:28

青衣

本帖最后由起个网名好难于 2024-10-24 09:09 编辑 <br /><br /><style type="text/css">
#jqt {width:640px;padding:8px;margin:32px auto;overflow:hidden;border-radius:24px;
background-image:url(https://z3.ax1x.com/2021/06/28/RtQMMn.jpg);}
.lyricDisp{filter:drop-shadow(#ffffff 1px 0 0) drop-shadow(#ffffff 0 1px 0) drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);font-family:微软雅黑;transition:.3s all ease;font-size:1.5em;}.lyricDisp:nth-child(1){color:gray;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:darkred;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}.lyricDisp:nth-child(2){color:blue;text-align:center;font-size:1.2em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}#LRCShow{position:absolute;left:25%;bottom:-30px;width:80%;height:100px;margin:16px auto
position:relative;}#rdisk{position:absolute;left:16%;bottom:10px;font-size:3em;color:red;cursor:pointer;animation:circleSmall2 10s linear infinite;animation-play-state:paused;}@keyframes circleSmall2{0%{transform:rotateX(30deg) rotateY(-45deg) rotateZ(0deg);}100%{transform:rotateX(30deg) rotateY(-45deg) rotate(360deg);}}

</style>
<div style="width:800px;position:relative;height:auto !impotant;min-height:1000px;margin:auto;">
<div id="jqt"></div>
<div id="rdisk">❄</div>
<div id="LRCShow"></div>
</div>

<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=new Array();for(k=0;k<2;k++){this.gclines=document.createElement('div');this.gclines.className='lyricDisp';this.showLrcObj.appendChild(this.gclines)}this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(opts.lrcDoc);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){this.lrcVec=new Array();var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0;this.play()});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx>=that.lrcVec.length)return;if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}},}
</script>

<script type="text/javascript">
(function() {
let pics = [
"https://s4.ax1x.com/2021/12/14/oxFdeg.jpg",
"https://s4.ax1x.com/2021/12/14/oxFUOS.jpg",
"https://s4.ax1x.com/2021/12/14/oxFNy8.jpg",
"https://s4.ax1x.com/2021/12/14/oxFtQf.jpg",
"https://s4.ax1x.com/2021/12/14/oxFYSP.jpg",
"https://s4.ax1x.com/2021/12/14/oxFGWt.jpg",
"https://s4.ax1x.com/2021/12/14/oxF8JI.jpg",
"https://s4.ax1x.com/2021/12/14/oxF3FA.jpg",
"https://s4.ax1x.com/2021/12/14/oxFlod.jpg",
"https://s4.ax1x.com/2021/12/14/oxFQdH.jpg",
"https://s4.ax1x.com/2021/12/14/oxFMee.jpg",
"https://s4.ax1x.com/2021/12/14/oxFuLD.jpg",
"https://s4.ax1x.com/2021/12/14/oxFnsO.jpg",
"https://s4.ax1x.com/2021/12/14/oxFmQK.jpg",
"https://s4.ax1x.com/2021/12/14/oxFZz6.jpg",
"https://s4.ax1x.com/2021/12/14/oxFVRx.jpg",
"https://s4.ax1x.com/2021/12/14/oxFEJ1.jpg",
"https://s4.ax1x.com/2021/12/14/oxFAiR.jpg",
"https://s4.ax1x.com/2021/12/14/oxFFo9.jpg",
"https://s4.ax1x.com/2021/12/14/oxFidJ.jpg",
"https://s4.ax1x.com/2021/12/14/oxF9LF.jpg",
"https://s4.ax1x.com/2021/12/14/oxFpsU.jpg",
"https://s4.ax1x.com/2021/12/14/oxFSMT.jpg",
"https://s4.ax1x.com/2021/12/14/oxixzV.jpg"
];
let lrctxt = `
青衣 - 草帽酱
（此版本为正式授权翻唱作品）
我为你唱一曲
如游丝的气息
谁在抚琴配相思成疾
我为你梦入戏
再续前世迷局
戏中人一滴泪
便纷乱相思雨
风和沙纠缠到天涯
最后亦落下
你和我分手在街口
湮灭了繁华
恍如隔世的烟雨楼台呀
青衣顾盼流离寒鸦
光和影在歌榭亭台
蜿蜒游离扭曲
两个人一场戏
剩涟漪无影息
那真心付了几许多可惜
听戏人叹流年忆往昔
我为你唱一曲
如游丝的气息
谁在抚琴配相思成疾
我为你梦入戏
再续前世迷局
戏中人一滴泪
便纷乱相思雨
我为你唱一曲
忘忧的战局
谁倾城美丽别过了虞姬
我为你把酒续
续今生别离
你泪沾梨花
梨花却惹乱离人戏
光和影在歌榭亭台
蜿蜒游离扭曲
两个人一场戏
剩涟漪无影息
那真心付了几许多可惜
听戏人叹流年忆往昔
我为你唱一曲
如游丝的气息
谁在抚琴配相思成疾
我为你梦入戏
再续前世迷局
戏中人一滴泪
便纷乱相思雨
我为你唱一曲
忘忧的战局
谁倾城美丽别过了虞姬
我为你把酒续
续今生别离
你泪沾梨花
梨花却惹乱离人戏
`;
var opts = {
lrcDoc:lrctxt,
audioURL:"http://cccimg.com/view.php/0a6bc0a5bb7b3ecedc657f627cf27194.mp3",
lrcShowID:"LRCShow",
audioCtrl:'rdisk'
};
new lrcPlayer2(opts);
let jqt = document.querySelector('#jqt');
let svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewbox="0 0 640 1080">`;

let viewWidth = 640;
let viewHeight = 1080;
jqt.onclick = () => {
let mp = document.querySelector('#mp');
if(mp.paused) mp.play();
}
let makeImageObj = (url, width,height,idx) => {
let ratioX = viewWidth / width;
let ratioY = viewHeight / height;
let scaleRatio = ratioX < ratioY ? ratioX : ratioY;
let imgObjStr ="";
imgObjStr += `<image id="p${idx}" xlink:href="${url}" width="${width * scaleRatio}" `;
imgObjStr += `height="${height * scaleRatio}" x="0" y="${(viewHeight - height * scaleRatio) / 2}" `;
imgObjStr += `opacity="0" preserveAspectRatio="none">\n`;

imgObjStr += `<animate id="fpic${idx}" attributename="opacity" from="0" to="1" dur="2s" `;
let bt = idx == 0?`0;e${pics.length-1}.end-2`:`e${idx-1}.end-2`;
imgObjStr += `begin="${bt}" fill="freeze" ></animate>\n`;

imgObjStr += `<animate id="e${idx}" attributename="opacity" from="1" to="0" dur="2s" `;
imgObjStr += `begin="fpic${idx}.begin+10" fill="freeze" ></animate>\n</image>\n`;

return imgObjStr;
}
let imgSize = new Array(), errCount=0;
let getPictureSize = (url, idx) => {
let img = new Image();
img.src = url;
img.onerror = () => {
console.log(url+" 图片加载失败，请检查url是否正确");
errCount++;
return false;
};

img.onload = () => {
//console.log('load ' + img.width+" "+img.height);
img.onload=null;//避免重复加载

let imgObjStr = makeImageObj(url, img.width, img.height, idx);
imgSize.push(imgObjStr);
}
}

for(idx = 0; idx < pics.length; idx++) {
getPictureSize(pics,idx);
}
let dataReady = () => {
if(imgSize.length != pics.length) setTimeout(dataReady,100);
else {
for(n=0;n<imgSize.length;n++) {
svgContent += imgSize;
}
jqt.innerHTML = svgContent + "</svg>\n";
}
}
dataReady();

})();
//https://blog.csdn.net/joyopirate/article/details/126589331
</script>

梦江南 发表于 2024-11-9 11:31

坐沙发欣赏老师的音画佳作！{:4_199:}

梦江南 发表于 2024-11-9 11:33

老师的这代码不拘于图片尺寸了。好！{:4_187:}

起个网名好难 发表于 2024-11-9 11:57

梦江南发表于 2024-11-9 11:31
坐沙发欣赏老师的音画佳作！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

起个网名好难 发表于 2024-11-9 11:57

梦江南发表于 2024-11-9 11:33
老师的这代码不拘于图片尺寸了。好！

大小一致的图片不好找啊

冬天的雨 发表于 2024-11-9 12:49

惊艳了，老师太有才了，果然是高手的{:4_199:}

起个网名好难 发表于 2024-11-9 14:47

冬天的雨发表于 2024-11-9 12:49
惊艳了，老师太有才了，果然是高手的

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

醉美水芙蓉 发表于 2024-11-9 18:06

起个网名好难 发表于 2024-11-9 18:07

醉美水芙蓉发表于 2024-11-9 18:06
欣赏老师美贴！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

亚伦影音工作室 发表于 2024-11-9 19:16

切换自然流畅，歌曲好听！

起个网名好难 发表于 2024-11-9 19:22

亚伦影音工作室发表于 2024-11-9 19:16
切换自然流畅，歌曲好听！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

小辣椒 发表于 2024-11-9 22:07

欣赏难难的精彩特效，最喜欢这个可以歌词同步的{:4_205:}

小辣椒 发表于 2024-11-9 22:07

过段时间来学习做一个，谢谢难难的精彩代码

起个网名好难 发表于 2024-11-10 06:14

小辣椒发表于 2024-11-9 22:07
欣赏难难的精彩特效，最喜欢这个可以歌词同步的

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

起个网名好难 发表于 2024-11-10 06:18

小辣椒发表于 2024-11-9 22:07
过段时间来学习做一个，谢谢难难的精彩代码

翻出的一个旧帖子，做不出新的来{:5_102:}

页: [1]

花潮论坛's Archiver

青衣