大姚 - 心中最美的风景线 (男版DJ) - 音画作品 - 微风音乐

亚伦影音工作室 发表于 2024-3-27 14:47

大姚 - 心中最美的风景线 (男版DJ)

本帖最后由亚伦影音工作室于 2024-3-27 14:50 编辑 <br /><br /><style>
#papa{width: 1164px; height: 620px; margin-top:120px; margin-left:-150px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://pic.imgdb.cn/item/6600e87c9f345e8d03adc879.jpg)no-repeat center/cover,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000); text-align: center;}
#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;
}

#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: 280px;
   font:normal 3em 华文新魏;
   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: 1200px;top:0px; left:0px; }
</style>
<div id="papa">
<audio id="aud"src="https://p4.t57.cn:8399/2022/zw/1/FZN.m4a" autoplay loopcontrols crossOrigin="anonymous"></audio>
<div data-lrc="亚伦影音工作室" id="lrc" title="歌词显示">亚伦影音工作室</div>
<canvas id='canvas'></canvas>
</div>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `大姚 - 心中最美的风景线 (男版DJ)
作词：轻云望月
作曲：轻云望月
编曲：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>
<script>
window.onload = function () {
   var oAudio = document.getElementById('aud');

   var oCtx = new AudioContext();
   // console.log(oCtx);

   var audioSrc = oCtx.createMediaElementSource(oAudio);

   var analyser = oCtx.createAnalyser();

   audioSrc.connect(analyser);

   analyser.connect(oCtx.destination);

   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>

liumang 发表于 2024-3-27 20:12

亚伦老师这个频谱漂亮{:5_150:}

liumang 发表于 2024-3-27 20:15

画面漂亮欣赏精彩歌词同步制作，

liumang 发表于 2024-3-27 20:16

频谱还可以移左边一点

页: [1]

微风音乐's Archiver

大姚 - 心中最美的风景线 (男版DJ)