论坛 › 欢乐水吧 › 学习亚伦老师的代码音画《江南美》

老谟深虑 发表于 2024-4-7 10:44

学习亚伦老师的代码音画《江南美》

本帖最后由 老谟深虑 于 2024-4-8 11:02 编辑 <br /><br /><style>
#papa{margin: 140px -300px;
        width: 1164px;
        height: 620px;
        background:url(https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg)no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345; }
      

#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:calc(95% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}

.photo {width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top:0px; left:0%;
opacity: 1;
animation: round 12s linear infinite;}
@keyframes round   {0% {opacity: 1;transform:translate(-100%,0%)scale(1) ;}
100% {opacity: 1;transform:translate(100%,0%)scale(1) ;}
}
.photo:nth-child(2) {animation-delay: 6s;}
.stop .photo:nth-child(2),
.stop .photo:nth-child(1){animation-play-state: paused;}
li-zi { position: absolute; top: -10px;z-index: 5; background: linear-gradient(to bottom, transparent, snow); animation: drop var(--dur) var(--delay) infinite linear var(--state); }
        @keyframes drop { to { top: 100%; } }
</style>
<style>
#bfq {top:20%; left:40%;z-index: 21;
position: absolute;overflow: hidden;transform:scale(0.4);
width: 100%;
height: 100%;}
#pic {top:20%; left:3%;z-index: 20;
position: absolute;
width: 360px;
height: 360px;
border-radius: 50%;
border:2px solid #000000;
background:url('https://pic.imgdb.cn/item/642d9c53a682492fcccad99f.png') center/cover no-repeat,url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b0bea37f1dff1ba2977e3d3cdf8cf8ea.jpg')no-repeat 30px 50px/100% 60%;
animation: spin 10s infinite linear ;}
@keyframes spin {100% { transform: rotate(360deg); }
}

#mplayer {position: absolute;
      top:2%; left:0%;z-index: 21;
      width: 500px;
      height: 500px;
background: url('https://pic.imgdb.cn/item/65ffbbe89f345e8d036024a8.png')no-repeat 280px 22px/200px 380px;
      cursor: pointer;
}
.pink { transform:rotate(-2deg);transform-origin: 100% 0%;margin: 0px 0px;}
.purple { transform-origin: 85% 0%;margin: 12px -15px;transform:rotate(-16deg);}
#tmsg {position: absolute;z-index: 20;
      font: normal 25px sans-serif;
      color: #ffffff;
         top:500px;
      left:14%;}
#prog {position: absolute;z-index: 91;
      width: 80%;
      height: 0.3%;
      cursor: pointer;
         top:95%;
         margin:0px 10%;
         border-radius: 2px;}

#lrc{left: 10%;top: 75%;}#lrcc {right:10%;top: 85%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:normal 2.5em 华文新魏;color: #000078;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 -1px 0);z-index: 20;}
#lrcc::before,#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 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>

<div id="papa" >
<span id="fullscreen">全屏</span>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1967787189" type="audio/mp3" autoplay loop ></audio>
<div id="testImg" >
<div class="photo"> <div style="background:url(https://s11.ax1x.com/2024/02/01/pFMcXmF.jpg)no-repeat center/cover;transform: rotateY(180deg);width:100%;height:100%" ></div></div>
<divclass="photo"> <div style="background:url(https://s11.ax1x.com/2024/02/01/pFMcXmF.jpg)no-repeat center/cover;width:100%;height:100%" ></div></div>
</div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>

<divid="prog"></div>
        <div id="bfq" >
<div id="pic" ></div>
<div id="mplayer" class="pink"></div>
<div id="tmsg">00:00 | 00:00</div>
</div>
</div>
<script >

mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');

mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple')) : (aud.pause(),mplayer.classList.add('purple')));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

pic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>pic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>pic.style.animationPlayState = 'paused');

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 + '%, snow 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;
      };
</script>

<script>
/*控制动画*//*控制动字*/
(function(){
var image = document.getElementById("testImg");
var image1 = document.getElementById("Img");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*//*结束*/
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };

</script>

<span id="lrcStr" style="visibility: hidden;">
江南美
作词：徐昭昌
作曲：李永安
演唱：周艳萍
LRC：老谟深虑
江南美美悠悠
竹外桃花楼外楼
蓝天映碧水白雾绕山丘
听布谷啭歌喉
缕缕香风醉心头
缕缕香风醉心头
渔家拉起金银网
美了江畔又一筹
朝霞簇拥采茶女
红粉荡轻舟荡轻舟
朝霞簇拥采茶女
红粉荡轻舟
江南美美悠悠
春去暑往又金秋
庆收打糍粑休闲到深幽
雁归来添温柔
路路离客论乡愁
路路离客论乡愁
木台策马唱大戏
一场谈笑一壶酒
自古江南画连画
画里人奔走人奔走
自古江南画连画
画里人奔走
自古江南画连画
画里人奔走人奔走人奔走
画里人奔走
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
        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) => {
        lrca=lrcAr;
        lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
        let Y=String(mKey/2).indexOf(".");
        if (Y == -1)
    {
        0==mKey&&(lrc.innerHTML=lrca);
        lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
        lrcc.dataset.lrc = "";
        lrc.style.setProperty('--motion', 'cover1');
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
        }
    else
    {
        lrc.innerHTML = lrcb;
        lrcc.dataset.lrc = lrca;
        lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
        lrcc.style.setProperty('--tt', time + 's');
        lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
        }
        mKey += 1;
};
/*函数 ：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.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.innerHTML); /*获得歌词数组*/
})();

</script>

<script>

var pa= document.querySelector('body');
var mState = () => aud.paused ?
        (pa.style.setProperty('--state', 'paused')) :
        (pa.style.setProperty('--state', 'running'));

aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());

Array.from({length: 200}).forEach((item) => {
                item = document.createElement('li-zi');
                item.style.cssText += `
                        --dur: ${0.5 + Math.random() * 0.5}s;
                        --delay: ${Math.random() * -0.8}s;
                        width: ${1 + Math.round(Math.random())}px;
                        height: ${8 + Math.random() * 30}px;
                        left: ${Math.random() * 100}%;
                `;
                papa.appendChild(item);
        });
</script>

庶民 发表于 2024-4-7 10:54

真的，意境美好。

起个网名好难 发表于 2024-4-7 11:04

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

红影 发表于 2024-4-7 13:15

漂亮的无缝滚动背景，欣赏老谟深虑好帖{:4_187:}

樵歌 发表于 2024-4-7 13:56

漂亮的滚动效果。

老谟深虑 发表于 2024-4-7 15:37

庶民 发表于 2024-4-7 10:54
真的，意境美好。

         谢谢你的美评，下午好！

老谟深虑 发表于 2024-4-7 15:51

起个网名好难 发表于 2024-4-7 11:04


         谢谢老师的鼓励，下午好！

老谟深虑 发表于 2024-4-7 15:52

红影 发表于 2024-4-7 13:15
漂亮的无缝滚动背景，欣赏老谟深虑好帖

          这是亚伦老师的代码，谢谢老师的收看和支持。下午好！

老谟深虑 发表于 2024-4-7 15:55

樵歌 发表于 2024-4-7 13:56
漂亮的滚动效果。

          谢谢老师的支持，下午好！

亚伦影音工作室 发表于 2024-4-7 17:53

清晰的画面，好听的歌曲！

红影 发表于 2024-4-7 20:50

老谟深虑 发表于 2024-4-7 15:52
这是亚伦老师的代码，谢谢老师的收看和支持。下午好！

不客气啊，这个制作很漂亮{:4_187:}

老谟深虑 发表于 2024-4-8 10:12

亚伦影音工作室 发表于 2024-4-7 17:53
清晰的画面，好听的歌曲！

         谢谢老师的支持，向老师学习！

老谟深虑 发表于 2024-4-8 10:13

红影 发表于 2024-4-7 20:50
不客气啊，这个制作很漂亮

         再次感谢老师鼓励，上午好！

红影 发表于 2024-4-8 10:37

老谟深虑 发表于 2024-4-8 10:13
再次感谢老师鼓励，上午好！

再次欣赏老师的好帖，问好{:4_187:}

查看完整版本: 学习亚伦老师的代码音画《江南美》