人间最美 - 孙艺琪 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2024-9-21 17:27

人间最美 - 孙艺琪

本帖最后由亚伦影音工作室于 2024-9-21 18:56 编辑 <br /><br /><style>
#papa { margin: 150px 0 20px calc(50% - 721px); background:#800 url('https://')no-repeat center/cover;width: 1280px; height: 720px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;}

#play { position: absolute; bottom: 200px; transform: rotate(3deg);transform-origin: bottom center;left: 90px; animation: ske 0.5sinfinite linear ;z-index: 81;width: 200px; height: 200px;}
#play:hover { filter: invert(100%) drop-shadow(0 0 4px #333);}

@keyframes ske { 50%{ transform:rotate(-3deg); }}
#vid {z-index: 2;
position: absolute;
width: 80%;
height: 80%;
object-fit: cover;
-webkit-mask-image: radial-gradient(black 15% ,transparent 65%);
}
#vido {z-index: 1;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
#lrc{left: 5%;top: 85%;}#lrcc {right:5%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;font:normal 2.5em 华文隶书;color: #000080;white-space: pre;-webkit-background-clip: text;z-index: 20;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#ccc; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id="play">
<svg width="200" height="200" viewBox="-100 -100 200 200">
<defs>
<g id="face" fill="white" stroke="black">
<circle cx="0" cy="0" r="50"></circle>
</g>
<g id="eye">
<circle cx="0" cy="0" r="5" fill="black" stroke="none"></circle>
</g>
<g id="ear" stroke="black" fill="none">
<polyline points="-10 20,0 -20,10 20"></polyline>
</g>
<g id="nose" fill="black" stroke="none">
<ellipse cx="0" cy="0" rx="5" ry="8"></ellipse>
</g>
<g id="mouse" stroke="black" fill="none">
<polyline points="-30 -3,-27 3,27 3,30 -3"></polyline>
</g>
</defs>

<use x="-10" y="-65" href="#ear"></use>
<use x="10" y="-65" href="#ear"></use>
<use x="0" y="0" href="#face"></use>
<use x="-15" y="-15" href="#eye"></use>
<use x="15" y="-15" href="#eye"></use>
<use x="0" y="0" href="#ear" transform="translate(-36) scale(1.5,0.8) rotate(90)"></use>
<use x="0" y="0" href="#ear" transform="translate(36) scale(1.5,0.8) rotate(-90)"></use>
<use x="0" y="0" href="#nose"></use>
<use x="0" y="20" href="#mouse"></use>
</svg>
</div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<span id="fullscreen">全屏欣赏</span>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/c8/96/0c/5283baf49ddd12d4e17b1b8a14f9ec65/audio.mp3" autoplay loop></audio>
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/54bdb8660235f3d9415dbf6ec9fdb5bf_preview.mp4" autoplay loop muted></video>
<video id="vido" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/623891b3c160a9e4a01b67446105cbd8_preview.mp4" autoplay loop muted></video>
</div>
<script>
play.onclick = () => aud.paused ?( aud.play(),vid.play(),vido.play(),image.play()):(aud.pause(),vid.pause(),vido.pause(),image.stop());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
            fs = !fs;
   };
</script>
<span id="lrcStr" style="visibility: hidden;">人间最美 - 孙艺琪
孙艺琪 - 人间最美
蓝蓝的天上飘着
洁白的云朵
绵绵的山间流着
潺潺清澈的小河
最美的你身边路过
给我最美的眼波
爱情的花开出最美的颜色
你是人间最美的烟火
璀璨的绽放着
你是人间最美的情歌
悠悠动听的唱着
你是人间最美的星河
永远都不坠落
你是人间最美的景色
我愿一生为你停泊
蓝蓝的天上飘着
洁白的云朵
绵绵的山间流着
潺潺清澈的小河
最美的你身边路过
给我最美的眼波
爱情的花开出最美的颜色
你是人间最美的烟火
璀璨的绽放着
你是人间最美的情歌
悠悠动听的唱着
你是人间最美的星河
永远都不坠落
你是人间最美的景色
我愿一生为你停泊
你是人间最美的烟火
璀璨的绽放着
你是人间最美的情歌
悠悠动听的唱着
你是人间最美的星河
永远都不坠落
你是人间最美的景色
我愿一生为你停泊
你是人间最美的景色
我愿一生为你停泊
</span>
<script >
(function() {
/*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
   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) => {
   lrca=lrcAr;
   lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
   let Y=String(mKey/2).indexOf(".");
   if (Y == -1)
{
   0==mKey&&(lrc.innerHTML=lrca);
   lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
   lrcc.dataset.lrc = "";
   lrc.style.setProperty('--motion', 'cover1');
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
   }
else
{
   lrc.innerHTML = lrcb;
   lrcc.dataset.lrc = lrca;
   lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
   lrcc.style.setProperty('--tt', time + 's');
   lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
   }
   mKey += 1;
};
/*函数：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),play.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),play.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;
            }
   }
});
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;
   };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</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("Img");
</script>

红影发表于 2024-9-21 19:06

亚伦老师把这可爱的小猫咪做成播放器按钮了，漂亮{:4_199:}

红影发表于 2024-9-21 19:14

画面很美，欣赏亚伦老师好帖{:4_187:}

梦油发表于 2024-9-21 20:47

欣赏佳作，问候亚伦。

小辣椒 发表于 2024-9-21 21:17

亚伦速度的，今天又一个，估计亚伦最近都夜班吧{:4_173:}

小辣椒 发表于 2024-9-21 21:18

欣赏亚伦精彩的制作，画面漂亮，歌也是好听{:4_178:}

老谟深虑 发表于 2024-9-22 18:11

欣赏老师的佳作，点赞！

页: [1]

花潮论坛's Archiver

人间最美 - 孙艺琪