论坛 › 欢乐水吧 › 黑老师代码就是厉害，佩服！

亚伦影音工作室 发表于 2023-3-19 15:08

黑老师代码就是厉害，佩服！

本帖最后由 亚伦影音工作室 于 2023-3-19 18:24 编辑 <br /><br /><style>
#papa {
        margin: 20px -300px;
        width: 1164px;
        height: 640px;
        box-shadow: 1px 1px 0px #000;
        position: relative;
background:#000080;
        display: grid;
        place-items: center;
        z-index: 1;
}
#canv {
        position: absolute;
        display: block;
       
        position: relative;
        cursor: pointer;
        z-index: 2;
}
#vid { display: none; }

#mypic {
        width: 580px;
        height: 380px;
        position: absolute;
        top: 20px;
        right: 30px;
-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);
        cursor: pointer;
        z-index: 3;
        animation: rot 20s infinite alternate var(--state);
        --state: paused;
}
@keyframes rot { 0%{ transform:scale(0); }}
.wenzi { position: absolute; left: 10px; top: 30px; z-index: 4; color: pink; font: bold 30px/30px 'FangSong',serif;opacity: .8; }
</style>

<div id="papa">
        <canvas id="canv"></canvas>
        <audio id="aud" src="https://www.qqmc.com/mp3/music176729863.mp3" autoplay loop></audio>
        <video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4221da2e515b439f93a40d723be0b381_preview.mp4" autoplay loop muted></video>
        <img id="mypic" src="https://wj1.kumeiwp.com:812/wj/bl/2023/02/02/3295f5c9ebd5f999c6bae779d2fef4c0.jpg?t=1679208327&key=f85e58058c13a7d43d88" alt="" />
      <div class="wenzi">烟雨人间 (DJ沈念版) - 海来阿木</div>

<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>

</div>
<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
        ctx.drawImage(vid, 0, 0, ww, hh);
        if(!vid.paused) {
                requestAnimationFrame(loop);
                return;
        }
}
let mState = () => aud.paused ? (mypic.style.setProperty('--state', 'paused'), vid.pause()) : (mypic.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

<style type="text/css">#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;z-index: 3;
        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 = `
烟雨人间 (DJ沈念版) - 海来阿木
词：海来阿木
曲：海来阿木
编曲：曲比阿且
录音：曲比阿且
混音：张黎兵
OP：坚诚文化
（、）
路过人间呐
路过烟火啊
心里嘛有苦也切莫声张
你说人生呐
你说岁月啊
男儿嘛他就该志在四方啊
等到天边月亮入睡
等到姑娘把口弦揉碎
等到我把心儿唱碎
等到你音信全无我就入睡
被爱的人不用流泪
幸福的人他不会晚睡
思念在月光里酒醉
煽情的眼泪好让人羞愧
路过人间呐
路过烟火啊
心里嘛有苦也切莫声张
你说人生呐
你说岁月啊
男儿嘛他就该志在四方啊
等到天边月亮入睡
等到姑娘把口弦揉碎
等到我把心儿唱碎
等到你音信全无我就入睡
被爱的人不用流泪
幸福的人他不会晚睡
思念在月光里酒醉
煽情的眼泪好让人羞愧
路过人间呐
路过烟火啊
心里嘛有苦也切莫声张
你说人生呐
你说岁月啊
男儿嘛他就该志在四方啊
路过人间呐
路过烟火啊
心里嘛有苦也切莫声张
你说人生呐
你说岁月啊
男儿嘛他就该志在四方啊
男儿嘛他就该志在四方啊
`;

/*变量 ：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>

红影 发表于 2023-3-19 15:37

漂亮的视频，好听的歌曲。欣赏亚伦老师的制作{:4_187:}

焱鑫磊 发表于 2023-3-19 17:25

欣赏老师佳作！赞！！！{:4_176:}

非常开心 发表于 2023-3-19 18:32

制作的太漂亮了

冬天的雨 发表于 2023-3-19 19:30

我没有看见是手机原因？{:4_203:}

亚伦影音工作室 发表于 2023-3-19 19:41

手机欣赏视频不显示，但图片 音乐歌词都有！

冬天的雨 发表于 2023-3-19 19:44

亚伦影音工作室 发表于 2023-3-19 19:41
手机欣赏视频不显示，但图片 音乐歌词都有！

没有图片，没有音乐出来，我人品问题？

樵歌 发表于 2023-3-19 19:52

漂亮的制作。

小辣椒 发表于 2023-3-19 21:03

欣赏亚伦精彩的制作{:4_187:}

小辣椒 发表于 2023-3-19 21:04

谢谢分享

查看完整版本: 黑老师代码就是厉害，佩服！