听心 (合唱Live版) - 魏佳艺 - 音画作品 - 微风音乐 - Powered by Discuz! Archiver

首页 › 音画作品 › 听心 (合唱Live版) - 魏佳艺

liumang 发表于 2023-12-28 13:11

听心 (合唱Live版) - 魏佳艺

<style type="text/css">
#papa { margin: 120px -155px; width: 1164px; height: 620px;background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/076562a250ab8a9afa2edadc5cdca91d.jp)no-repeat center/cover;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;}
#dh{ width: 100%; height: 100%; position: absolute;
z-index: 1;background:url(https://i.mp3.wf/view.php/132087c246d6adafb69bbf22f0fcf16c.jpg)no-repeat center/cover;
top:0px; left:0px;
animation: rod 2s linear infinite;}
@keyframes rod{0% {opacity: 1;}
50% {opacity: 0;filter:hue-rotate(360deg)}100% {opacity: 1;}
}
#prog {
   position: absolute;z-index: 1666;
   bottom: 30px;
   left: calc(24% - 150px);
   width: 75%;
   height: 2px;
   background: linear-gradient(to right,#00ff00, #00ff00var(--prg), white 0);
   color: #cccccc;
   --prg: 0%; --state: paused;
}
#prog::before, #prog::after { position: absolute; }
#prog::before { content: attr(data-cu); left:-50px; top: -10px; }
#prog::after { right: -50px; content: attr(data-du); ; top: -10px; }

#mplayer {z-index: 80;
position: absolute;
      right: 94%;
bottom: 12px;
width: 35px;
height: 35px;
border: 0px solid #cccccc;
border-radius: 0%;
opacity: 1;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #cccccc;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 12px;
border-width: 10px 12px;
border-color: transparent transparent transparent #cccccc;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 20px;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; bottom: 20px; right: 4%;color:#cccccc;font:normal 1.2em 楷体; opacity: 1; cursor: pointer; z-index: 166}
#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: -80px;
   font:normal 3em 华文新魏;
   font-weight:400;
   color: #000080;
   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: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}
#dt{position: absolute;top:0%; left:0%;width: 1164px; height:620px ;z-index:1; mix-blend-mode:lighten; }
</style>

<div id="papa">
<svg width="100%" height="100%">
<filter id="spot">
<feDiffuseLighting in="SourceGraphic" surfaceScale="3" diffuseConstant="5" lighting-color="#fff120" id="feDiff">
<feSpotLight x="0" y="0" z="10" pointsAtX="120" pointsAtY="150" pointsAtZ="0" limitingConeAngle="20">
</feSpotLight>
</feDiffuseLighting>
</filter>
<rect x="0" y="0" width="100%" height="100%" filter="url(#spot)"></rect>
</svg>
<div id="dh" style="animation-play-state: running;"></div>
<span id="fullscreen" title="全屏欣赏/退出全屏">全屏</span>
<div id="mplayer" ></div>

<div data-cu="01:38" data-du="03:23" id="prog" title="调节进度" style="--state: running; --prg: 48.40552205703211%;">
<div data-lrc="听心 (经典版) - 魏佳艺" id="lrc" title="歌词显示" style="--state: running; --motion: cover2; --tt: 3.3s;">听心 (经典版) - 魏佳艺</div>
</div>
<div id="dt"><img height="100%" id="Img" src="https://i.mp3.wf/view.php/4f8a79d2b1a22a648e82b8c7ef99743a.jpg " width="100%"></div>
<audio autoplay="" id="aud" loop="" src="https://aod.cos.tx.xmcdn.com/storages/5a0e-audiofreehighqps/99/12/GMCoOR4JYQAeACAAAAKSuus2.m4a"> </audio>
</div>
<script>
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 = () => 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);
});

prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出',papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
            fs = !fs;
   };

</script>
<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `听心 (经典版) - 魏佳艺
词：郭高见
曲：陈伟
编曲：李德奎
混音：潘君明
和声：夏初安
制作人：郜锦标
企划/统筹：吴聪聪
宣传推广：郜锦标/吴聪聪
艺人统筹：刘丹
OP：北京嘎嘎飙壹文化传媒有限公司
(此版本为正式授权翻唱作品)
闭上眼我想看见你
屏住了所有的呼吸
我怕你走错了轨迹
做了心跳的标记
在梦里总有个秘密
总是让我挥之不去
忍不住探索了心底
为何你摸索了离去
就算我说我爱你
就算我说我想你
你也不能听到我的心
依然停留在这孤寂里
我想再靠近你一点
我想再走近一点
让你能够听到我的心
什么时候也能把我想起
闭上眼我想看见你
屏住了所有的呼吸
我怕你走错了轨迹
做了心跳的标记
在梦里总有个秘密
总是让我挥之不去
忍不住探索了心底
为何你摸索了离去
就算我说我爱你
就算我说我想你
你也不能听到我的心
依然停留在这孤寂里
我想再靠近一点
我想再走近一点
让你能够听到我的心
什么时候也能把我想起
就算我说我爱你
就算我说我想你
你也不能听到我的心
依然停留在这孤寂里
我想再靠近一点
我想再走近一点
让你能够听到我的心
什么时候也能把我想起
让你能够听到我的心
什么时候也能把我想起
`;

/*变量：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); /*获得歌词数组*/
})();
</script>

liumang 发表于 2023-12-28 13:13

同一首{:5_123:}

liumang 发表于 2023-12-28 13:32

{:5_150:}{:5_150:}{:5_150:}

小辣椒 发表于 2024-1-1 15:02

哈哈，liumang现在好像懒了许多，都难得做一个了{:5_150:}

小辣椒 发表于 2024-1-1 15:03

这首歌不错，好听{:5_150:}

小辣椒 发表于 2024-1-1 15:07

这个图图好像很少就二张，小辣椒过几天也是去套用一个

liumang 发表于 2024-1-2 21:42

小辣椒发表于 2024-1-1 15:07
这个图图好像很少就二张，小辣椒过几天也是去套用一个

和我一样懒;P

页: [1]

查看完整版本: 听心 (合唱Live版) - 魏佳艺