不要错过我最美的年华(DJ伟然版)【播放器模块】

亚伦影音工作室 发表于 2024-5-14 10:29

本帖最后由亚伦影音工作室于 2024-6-2 14:23 编辑 <br /><br /><style>
#papa{margin: 150px -300px;
width: 1164px;
height: 620px;background:#222 url(https://pic.imgdb.cn/item/663f05bb0ea9cb14039b2934.jpg)no-repeat center/cover;
position: relative;overflow: hidden;
z-index: 12345;}

#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 50%; top: 460px;transform: translate(-50%);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: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }

#bfqbj {margin: 520px 10px;
width: 600px;
height: 86px;background: url(https://pic.imgdb.cn/item/663248920ea9cb140397e28c.png)no-repeat center/420px 120px;
position: absolute;overflow: hidden;
z-index: 1;}
#dt{position: absolute;top:20px; left:240px;width: 70px;height: 70px;z-index:3;}
#dt img{width: 100%;}
#yinpin{position: absolute;top:10px; left:100px;width: 150px;height: 50px;z-index:3; mix-blend-mode: lighten;}
#yinpin img{width: 100%;height: 50px;}

#mplayer {z-index: 80;
position: absolute;
top:0px; left:0px;
bottom: 0px;
width: 30px;
height: 30px;

opacity: 1;
transition: .4s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #00ff00;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 422px;bottom: -20px;
border-width: 7px 7px;
border-color: transparent transparent transparent #00ff00;
opacity: var(--disp1);
}
#mplayer::after {
width: 3px;
height: 11px;bottom: -18.5px;
            left: 437.8px; border-color: #00ff00;
border-width: 0 2px 0 2px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
   color: #ffffff;font-size: 12px;
   bottom: 35px;
   left:305px;}
#prog {position: absolute;z-index: 80;
   width: 160px;
   height: 1px;
   cursor: pointer;
      bottom: 28px;
left:305px;
border-radius: 2px;}
#bt{ --w: 60%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:300px;top:65px;font-size: 12px; z-index: 2; word-break: keep-all; white-space: nowrap; animation: bt 16s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>
<div id="papa">

<div id="bfqbj">
<div id="yinpin"><img id="tu1" src="https://pic.imgdb.cn/item/66483855d9c307b7e951b66a.gif" ></div>
<div id="dt"><img id="tu" src="https://pic.imgdb.cn/item/66324e000ea9cb1403a64408.webp" ></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<div id="bt">不要错过我最美的年华(DJ伟然版)</div>
</div>
<div data-lrc="亚伦影音工作室" id="lrc" title="歌词显示">亚伦影音工作室</div>
</div>
<audio id="aud" src="https://file.uhsea.com/2405/27d6b3eded73806f9b99422f1768926fG4.mp3" loop autoplay></audio>

<script >
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? (aud.play(),image.play(),image1.play() ): (aud.pause(),image.stop(),image1.stop()));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
prog.onclick = (e) => {
            aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
   }
aud.addEventListener('timeupdate', () => {
            aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';});
            tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

   });
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;
   };
bt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => bt.style.animationPlayState = 'running');
aud.addEventListener('pause', () => bt.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 = ''; image1.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("tu");
var image1= document.getElementById("tu1");
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `亚伦影音工作室
欢迎你的到来
不要错过我最美的年华(DJ伟然版)
作词:张灵茹
作曲:崔伟立
演唱:崔伟立
春风轻抚过
十里的桃花
时光缤纷摇曳间
素眉浅浅画
盼着你前来
薄衫牵骏马
回眸刹那入了前生卦
诗也准备下
酒也准备下
为你轻轻点好那
眉间的朱砂
悠悠的时光
翩然的轻擦
怕芳菲尽你人在天涯
不要错过我
最美的年华
不要让我岁岁年年
空空的等啊
情根已深种
怕相思发芽
一头青丝都变成白发
不要错过我
最美的年华
不要让我日日夜夜
痴痴的盼啊
爱字的头上
怕空劳牵挂
再见已是生死两无话
歌词编辑：亚伦

诗也准备下
酒也准备下
为你轻轻点好那
眉间的朱砂
悠悠的时光
翩然的轻擦
怕芳菲尽你人在天涯
不要错过我
最美的年华
不要让我岁岁年年
空空的等啊
情根已深种
怕相思发芽
一头青丝都变成白发
不要错过我
最美的年华
不要让我日日夜夜
痴痴的盼啊
爱字的头上
怕空劳牵挂
再见已是生死两无话
不要错过我
最美的年华
不要让我岁岁年年
空空的等啊
情根已深种
怕相思发芽
一头青丝都变成白发
不要错过我
最美的年华
不要让我日日夜夜
痴痴的盼啊
爱字的头上
怕空劳牵挂
再见已是生死两无话
再见已是生死两无话

谢谢欣赏！
`;
/*变量：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>

愤怒的葡萄 发表于 2024-5-14 11:23

非常不错的音画作品，歌曲还行。

梦油发表于 2024-5-14 16:09

欣赏佳作，问候亚伦。

山里人 发表于 2024-5-14 16:19

非常不错

老谟深虑 发表于 2024-5-14 16:28

欣赏老师的精美音画，点赞！

红影发表于 2024-5-14 19:08

这个播放器漂亮，细节处理得很精致。播放和暂停键的切换还有颜色变化的提示呢{:4_187:}

红影发表于 2024-5-14 19:09

欣赏亚伦老师好帖{:4_199:}

页: [1]

花潮论坛's Archiver

不要错过我最美的年华(DJ伟然版)【播放器模块】