你一直在我一直爱,单图音画,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC

zlpi@163.com 发表于昨天 09:35

你一直在我一直爱

本帖最后由 zlpi@163.com 于 2025-1-17 09:35 编辑 <br /><br /><style>
#papa {margin: 10px -180px;width: 1200px;height: 640px;background: url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/tp/xx.jpg') no-repeat 90% 30%/30px 40px,url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/tp/xf.gif') no-repeat 80% 35%/320px 450px, url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/tp/bj.jpg') no-repeat center/cover; z-index: 1;display: grid; overflow: hidden;position: relative;}
#aud {position:absolute;bottom: -10px; margin-left:0px;z-index: 60;
display: block;
width:102%;clip-path: inset(20% 1% 20% 1%);filter:invert(100%);margin: 0px -14px;
}

#lrc {
   --state: paused;
   --motion: cover2;
   --tt: 2s;
   --bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
   position: absolute;z-index: 6;
   left: 50%;
   transform: translate(-50%);
   top: 480px;
   font:normal 3.4em 华文行楷;
   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:340px; left:250px; }
#vid {
position: absolute;
width: 100%;
height: 110%;
top:-50px;
   left: -00;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
border-radius:5px 0px 5px;
z-index: 2;
opacity: 0.25;
}
</style>
<div id="papa">
<audio id="aud"src="https://aod.cos.tx.xmcdn.com/storages/ff0c-audiofreehighqps/BF/7C/GKwRIaILX3FWABK6GgNWbTp_.m4a" autoplay loopcontrols crossOrigin="anonymous"></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2422006/00/01/70/5b4b1d296f554.mp4" autoplay="" loop="" muted=""></video>
<div data-lrc="音乐在线" id="lrc" title="歌词显示"> </div>
<canvas id="canvas" "></canvas>
</div>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `你一直在我一直爱
词曲：晓朋
编曲：晓朋
HTML：歌词同步
编辑：山里人
走在这个迷情的时代
谁不渴望能得到真爱
倾心相遇在爱的花海
相依相守永远不分开
总要经历漫长的等待
爱的玫瑰才为你盛开
一颗真心换一份热爱
不离不弃才能到发白
你一直在我便一直爱
为你守住这爱的情怀
风雨沧桑都不会更改
海枯石烂是我的表白
你一直在我便一直爱
有你天空不再有阴霾
海角天涯爱不会分解
地老天荒爱与你同在
总要经历漫长的等待
爱的玫瑰才为你盛开
一颗真心换一份热爱
不离不弃才能到发白
你一直在我便一直爱
为你守住这爱的情怀
风雨沧桑都不会更改
海枯石烂是我的表白
你一直在我便一直爱
有你天空不再有阴霾
海角天涯爱不会分解
地老天荒爱与你同在
你一直在我便一直爱
有你天空不再有阴霾
海角天涯爱不会分解
地老天荒爱与你同在
海角天涯爱不会分解
地老天荒爱与你同在`;

/*变量：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 发表于昨天 14:13

问好zlpi@163.com友友，谢谢精彩分享:)

醉美水芙蓉 发表于昨天 19:50

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

醉美水芙蓉 发表于昨天 19:50

设计的音画高雅时尚,韵味非凡,色彩搭配唯美，版式简约新颖！

醉美水芙蓉 发表于昨天 20:14

欢迎老师分享精彩！

页: [1]

纳兰音画网's Archiver

你一直在我一直爱