你的爱让人窒息,播放器版,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC - Powered by Discuz! Archiver

论坛首页 › 播放器版 › 你的爱让人窒息

zlpi@163.com 发表于 2025-2-4 15:14:28

你的爱让人窒息

<style>
#papa {margin: 50px -150px;width: 1164px;height: 640px;background: url('xf.gif') no-repeat 80% 35%/400px 300px,url('f.png') no-repeat 80% 35%/320px 260px, url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/spp/bj.jpg') no-repeat center/cover; z-index: 1;display: grid; overflow: hidden;position: relative;}
#aud {position:absolute;margin-top:0px; margin-left:0px;z-index: 60;
display: block;
width:102%;clip-path: inset(20% 1% 20% 1%);filter:invert(100%);margin: 580px -14px;
}
#canvas { left: 0%; transform:translateY(55%);}
#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: 520px;
   font:normal 2.2em 黑体;
   font-weight:400;
   color: #eeeeee;
   white-space: pre;
   -webkit-background-clip: text;
   filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 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%;}}

#canvas{position: absolute;width: 55%;z-index: 4;top:220px; left:250px; }
#vid {
position: absolute;
width: 1164px;
height: 110%;
top:-80px;
   left: -00;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
border-radius:0px 0px 0px;
z-index: 1;
opacity: 0.98;

</style>
<div id="papa">
<audio id="aud"src="https://aod.cos.tx.xmcdn.com/storages/cf07-audiofreehighqps/97/13/GKwRIMALZQzhADh3RANY4ZaL.m4a" autoplay loopcontrols crossOrigin="anonymous"></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/16/03/5e9861e003acd.mp4" autoplay="" loop="" muted=""></video>
<div data-lrc="你的爱让人窒息" id="lrc" title="歌词显示">你的爱让人窒息</div>
<canvas id="canvas" "></canvas>
</div>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `你的爱让人窒息
词曲：晓朋
编曲：晓朋
原唱：晓依
混音：Y 爱华
出品：晓朋文化
一次不经意的相遇
让你走进我的心里
风也温柔云也美丽
爱的暖流悄然升起
感谢一路有你作陪
陪我走过风风雨雨
有过开心有过哭泣
在我内心刻下印记
真心呵护从未怀疑
爱得深刻却让人窒息
无法给你满分答题
所有遗憾深藏在心底
倾心付出感天动地
刻骨铭心却不言不语
满怀疲惫默默离去
所有深情化作泪滴
感谢一路有你作陪
陪我走过风风雨雨
有过开心有过哭泣
在我内心刻下印记
真心呵护从未怀疑
爱得深刻却让人窒息
无法给你满分答题
所有遗憾深藏在心底
倾心付出感天动地
刻骨铭心却不言不语
满怀疲惫默默离去
所有深情化作泪滴
真心呵护从未怀疑
爱得深刻却让人窒息
无法给你满分答题
所有遗憾深藏在心底
倾心付出感天动地
刻骨铭心却不言不语
满怀疲惫默默离去
所有深情化作泪滴
所有深情化作泪滴`;

/*变量：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>
<script>
window.onload = function () {
   var oAudio = document.getElementById('aud');

   // 创建音频上下文对象
   var oCtx = new AudioContext();
   // console.log(oCtx);
   // 创建媒体源,除了audio本身可以获取，也可以通过oCtx对象提供的api进行媒体源操作
   var audioSrc = oCtx.createMediaElementSource(oAudio);
   // 创建分析机
   var analyser = oCtx.createAnalyser();
   // 媒体源与分析机连接
   audioSrc.connect(analyser);
   // 输出的目标：将分析机分析出来的处理结果与目标点（耳机/扬声器）连接
   analyser.connect(oCtx.destination);

   // 利用cancas渐变进行音频绘制
   var ctx = canvas.getContext('2d');
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
   var oW = canvas.width;
   var oH = canvas.height;
   var color1 = ctx.createLinearGradient(oW / 2, oH / 2 - 30, oW / 2, oH / 2 - 100);
   var color2 = ctx.createLinearGradient(oW / 2, oH / 2 + 30, oW / 2, oH / 2 + 100);
   color1.addColorStop(0, '#ffffff');
   color1.addColorStop(.5, '#fff000');
   color1.addColorStop(1, '#00ff00');
   color2.addColorStop(0, '#ffffff');
   color2.addColorStop(.5, '#fff000');
   color2.addColorStop(1, '#00ff00');
   // 音频图的条数
   var count = 200;
   // 缓冲区:进行数据的缓冲处理，转换成二进制数据
   var voiceHeight = new Uint8Array(analyser.frequencyBinCount);
   // console.log(voiceHeight);

   function draw() {
   // 将当前的频率数据复制到传入的无符号字节数组中，做到实时连接
   analyser.getByteFrequencyData(voiceHeight);
   // console.log(voiceHeight);
   // 自定义获取数组里边数据的频步
   var step = Math.round(voiceHeight.length / count);
   ctx.clearRect(0, 0, oW, oH);
   for (var i = 0; i < count; i++) {
      var audioHeight = voiceHeight;
      ctx.fillStyle = color1;// 绘制向上的线条
      ctx.fillRect(oW / 2 + (i * 5), oH / 2, 2, -audioHeight);
      ctx.fillRect(oW / 2 - (i * 5), oH / 2, 2, -audioHeight);
      ctx.fillStyle = color2;// 绘制向下的线条
      ctx.fillRect(oW / 2 + (i * 5), oH / 2, 2, audioHeight);
      ctx.fillRect(oW / 2 - (i * 5), oH / 2, 2, audioHeight);
   }
   window.requestAnimationFrame(draw);
   }
   draw();

}
</script>

klxf 发表于 2025-2-5 12:51:04

谢谢zlpi@163.com友友精彩分享:lol

醉美水芙蓉 发表于 2025-2-5 20:44:03

欣赏山里人老师精彩播放器！

1643091610 发表于 2025-2-12 10:51:56

路过还不错

页: [1]

查看完整版本: 你的爱让人窒息