论坛 › 动画音画 › 《高原情歌》阿鲁阿卓

焱鑫磊 发表于 2023-7-11 01:23

《高原情歌》阿鲁阿卓

本帖最后由 焱鑫磊 于 2023-8-29 00:52 编辑 <br /><br /><style>
#papa {
        margin: 110px -280px;
        width: 1164px;
        height: 728px;overflow:hidden;border-radius:1%;
        box-shadow: 0px 0px 0px 2px #ffff00, 0px 0px 0px 6px #ff0000;

        position: relative;
        display: grid;
        place-items: center;
        z-index: 1;
}
#canv {
        position: absolute;
        display: block;
        position: relative;
        cursor: pointer;
        z-index: 2;
}
#vid { display: none; }
#dt{position: absolute;top:0%; left:0%;z-index: 2;
        width:1164px;
        height:728px; transition: .3s all ease;/*一定要加上不然看着突兀*/}
#mypic {top:82%; left:5%;z-index: 4;
position: absolute;
width: 80px;
height: 80px;
cursor: pointer;
animation: spin 10s infinite linearvar(--state);
--state: paused;
}
@keyframes spin {0% { transform: rotate(-360deg); }
}

.wenzi { position: absolute; left: 10px; top: 30px; z-index: 5; color:#800000; font: bold 30px/30px 'FangSong',serif;opacity: 1;filter:drop-shadow( 1px 1px 1px #ffffff); }

</style>

<div id="papa">

        <canvas id="canv"></canvas>

<div class="pg">
<div id="polygon" >
</div>
</div>
<div id='dt'><img id="testImg" src="https://pic.imgdb.cn/item/64ac41821ddac507cc38677d.png" width="100%" height="100%"></div>
        <video id="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/15/08/V-150836-E1DDBB18.mp4" autoplay loop muted></video>
        <divid="testBtn"><img id="mypic" src="https://pic.imgdb.cn/item/64ac3a901ddac507cc2097ea.png" alt="" /></div>
<div style="position: absolute; width: 513px; height: 136px; z-index: 2; left: 320px; top:40px" id="layer3">
        <p align="center"><strong><font face="宋体" size="6" face="高原情歌" color="#ff0000">《高原情歌》</font></strong></p>
        <p align="center"><strong><font face="宋体" size="4" color="#ffff00">演唱：阿鲁阿卓</font></strong></div>      
<div data-lrc="高原情歌" id="lrc">高原情歌</div>
</div>

<audio id="aud" src="https://i.mp3.wf/view.php/596e0e2be1d822da1a1af5002199d36a.mp3" autoplay loop></audio>
<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());

polygon.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>polygon.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>polygon.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: #ff0000;
        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);
}

</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
《高原情歌》阿鲁阿卓
词/曲：段庆民
LRC歌词制作：焱鑫磊
我们相约在蓝天下
我们又分别在天涯
你说你一生只爱我
你问我哪里是我的家
你问我的家
我告诉你我的家
你去没去过青海湖
翻没翻过巴颜喀拉
你听没听过一首歌
看没看过一幅画
就在那高高的高原上
洁白的帐篷 盛开的格桑花
那就是我的家
那就是我的家
我们相约在蓝天下
我们又分别在天涯
你说你一生只爱我
你问我哪里是我的家
你问我的家
我告诉你我的家
你去没去过青海湖
翻没翻过巴颜喀拉
你听没听过一首歌
看没看过一幅画
就在那高高的高原上
洁白的帐篷 盛开的格桑花
那就是我的家
那就是我的家
那就是我的家

`;

/*变量 ：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-7-11 08:42

美极！问好！

红影 发表于 2023-7-11 10:07

这边框真漂亮，视频和歌曲也很相合。好壮阔的场景啊。真美的制作{:4_199:}

红影 发表于 2023-7-11 10:07

欣赏焱鑫磊好帖{:4_187:}

樵歌 发表于 2023-7-11 12:10

美美的制作，美美的景色，美美的歌声，简直醉了{:4_206:}

老谟深虑 发表于 2023-7-11 16:36

       精美的制作，欣赏点赞！

焱鑫磊 发表于 2023-7-11 19:09

小文 发表于 2023-7-11 08:42
美极！问好！

问候小文好！{:4_187:}

焱鑫磊 发表于 2023-7-11 19:10

红影 发表于 2023-7-11 10:07
这边框真漂亮，视频和歌曲也很相合。好壮阔的场景啊。真美的制作

问候红影好！{:4_187:}

焱鑫磊 发表于 2023-7-11 19:11

红影 发表于 2023-7-11 10:07
欣赏焱鑫磊好帖

{:4_187:}{:4_204:}{:4_176:}

焱鑫磊 发表于 2023-7-11 19:11

樵歌 发表于 2023-7-11 12:10
美美的制作，美美的景色，美美的歌声，简直醉了

樵歌好！{:4_187:}

焱鑫磊 发表于 2023-7-11 19:12

老谟深虑 发表于 2023-7-11 16:36
精美的制作，欣赏点赞！

老谟深虑好！{:4_204:}

红影 发表于 2023-7-11 20:13

焱鑫磊 发表于 2023-7-11 19:10
问候红影好！

问好焱鑫磊，晚上好{:4_187:}

樵歌 发表于 2023-7-12 08:12

焱鑫磊 发表于 2023-7-11 19:11
樵歌好！

美女好{:4_185:}

查看完整版本: 《高原情歌》阿鲁阿卓