论坛 › 动画音画 › 跟着我的节奏嗨起来

亚伦影音工作室 发表于 2023-6-7 22:21

跟着我的节奏嗨起来

本帖最后由 亚伦影音工作室 于 2023-9-18 16:09 编辑 <br /><br /><style>
#papa {
        margin: 10px -300px;
        width: 1164px;
        height: 620px;
        background:#000000 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a56dec0f4e87b6e35bc089df83ec15af.jpg') center/cover no-repeat;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#vid { display: none; }
#canv {position: absolute;
        display: block;
        right: 0px;
        top: 0px;
        border-radius: 0%;
        opacity: 1;
        animation: opa 0s infinite alternate ;
}
#mplayer {
        position: absolute;z-index: 4;
        left: calc(50% - 15px);
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 2px solid #cccccc;
        border-radius: 50%;
        opacity: 0;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #cccccc;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 10px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent #cccccc;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }


#fg{width: 100%;height: 100%;top:0px; left:0px;position: absolute; z-index: 1;animation: slider 10s linear infinite ;opacity: 1;}

@keyframes slider {0% {background: linear-gradient(0deg, #000000 7%,#Ffffff 8%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 91%);} 100%{background: linear-gradient(0deg, #000000 7%,#Ffffff 8%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 91%);} }

</style>

<div id="papa">
        <canvas id="canv"></canvas>
<div id="fg">
<div id="rotate-words">
<div>跟着我的节奏嗨起来 <br />
<span>(DJ默涵版)</span></div>

<div>演唱：小玟子<br />
<span></span></div>

<div>作词：陈红卫 作曲：陈浩<br />
<span></span></div>

<div>出品：亚伦影音工作室<br />
<span>Produced by: Aaron Studios</span></div>



</div></div>
        <div id="mplayer"></div>
<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music247438037.mp3" loop autoplay></audio>
<video id="vid" src="http://chuangshicdn.data.mvbox.cn/music/sp/21/01/30/21013009134451441198.mp4" loop autoplay muted></video>

<script>
(function(){
let ctx = canv.getContext('2d');

let ww = canv.width = 1164, hh = canv.height =620;

let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}}
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

fg.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>fg.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>fg.style.animationPlayState = 'paused');
})();
</script>
<style type="text/css">#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;z-index: 4;
        left: 50%;
        transform: translate(-50%);
        top: 80%;
        font:normal 3em 华文隶书;
        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 -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 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `无论你成功或失败
都会化作历史尘埃
只要你保持阳光的心态
快乐的舞台无处不在
不管明朝几点醒来
相信老天自然安排
这一刻继续疯狂地摇摆
青春的风在激情澎湃
跟着我的节奏嗨起来
把烦恼和忧愁全抛开
不要犹豫 不要徘徊
不要等待
活着就要活个痛痛快快
跟着我的节奏嗨起来
把运气和福气拥入怀
忘记过去 忘记伤害
忘记无奈
未来一定能够更加精彩
不管明朝几点醒来
相信老天自然安排
这一刻继续疯狂地摇摆
青春的风在激情澎湃
跟着我的节奏嗨起来
把烦恼和忧愁全抛开
不要犹豫不要徘徊
不要等待
活着就要活个痛痛快快
跟着我的节奏嗨起来
把运气和福气拥入怀
忘记过去 忘记伤害
忘记无奈
未来一定能够更加精彩
跟着我的节奏嗨起来
把烦恼和忧愁全抛开
不要犹豫 不要徘徊
不要等待
活着就要活个痛痛快快
跟着我的节奏嗨起来
把运气和福气拥入怀
忘记过去 忘记伤害
忘记无奈
未来一定能够更加精彩
未来一定能够更加精彩
`;

/*变量 ：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>
<style type="text/css">
#rotate-words {text-align:center;
position:absolute;z-index: 2;
max-width:800px;
left:0%;
margin:auto;
padding:20% 0;
font-size:3.8em;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
text-transform:uppercase;
color:#ff0000;
font-family: '华文隶书', sans-serif;
}

#rotate-words span {
display:block;
height:80px;
font-size:.7em;color:#000000;
text-transform:lowercase;
opacity:0.8;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
font-family: '华文隶书', sans-serif;
}

#rotate-words div {
position:absolute;
opacity:0;
overflow:hidden;
left:10vw;
width:80vw;
line-height:1.2em;
animation: rotate-word 48s linear 2 0s;
}

@keyframes rotate-word {
    0% { opacity: 0;transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    3% { opacity: 1;transform: translateX(0);filter:blur(0px);transform:scale(.7)}
    12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
    16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    80% { opacity: 0}
    100% { opacity: 0}
}

#rotate-words div:nth-child(2) { animation-delay: 6s}
#rotate-words div:nth-child(3) { animation-delay: 12s}
#rotate-words div:nth-child(4) { animation-delay: 18s}
</style>

马黑黑 发表于 2023-6-7 22:54

很欢快

红影 发表于 2023-6-7 23:00

播放器按钮随着鼠标可以浮现。视频很漂亮。欣赏亚伦老师好帖{:4_187:}

醉美水芙蓉 发表于 2023-6-8 06:26

梦缘 发表于 2023-6-8 09:54

好动感的帖，老师分享精彩。{:4_185:}

查看完整版本: 跟着我的节奏嗨起来