论坛 › 音乐沙龙 › 夢然 - 美麗的草原我的家

岩新新 发表于 2023-6-26 13:22

夢然 - 美麗的草原我的家

本帖最后由 岩新新 于 2023-6-28 10:20 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1916529">
<i class="pstatus"></i><br /><br /><style>
#papa {
        margin: 20px-250px;
        width: 1164px;
        height: 640px;
        box-shadow: 1px 1px 0px #000;
background:lightgreenurl('http://webftp.bbs.hnol.net/yx2021/pj67/0c9c525b63d0f44ff227f61e9db0ef2d.gif')no-repeat center/cover;
        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; }

#mypic {top:75%; left:10%;z-index: 4;
position: absolute;
width: 100px;
height: 100px;
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: 4; color: pink; font: bold 30px/30px 'FangSong',serif;opacity: .8; }

#papa:hover #fullscreen { display:block ;}


#fullscreen { position: absolute; top:5%; left:80%;color:#FF0000; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 4}
</style>

<div id="papa">
<span id="fullscreen">全屏观赏</span>
        <canvas id="canv"></canvas>
       
        <video id="vid" src="" autoplay loop muted></video>
        <img id="mypic" src="http://webftp.bbs.hnol.net/yx2021/pj67/376a06a2c6f637850fb57eeeea4f4a38.png" alt="" />
      <div class="wenzi">夢然 - 美麗的草原我的家</div>

<div data-lrc=" " id="lrc"> </div>

</div>

<audio id="aud" src="http://music.163.com/song/media/outer/url?id=2005993140
" 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());
</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: 85%;
        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); /*获得歌词数组*/
})();


let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script></td></tr></table>

红影 发表于 2023-6-26 16:04

漂亮的动态背景图制作。好听的歌儿。欣赏新新好帖{:4_187:}

岩新新 发表于 2023-6-26 16:15

红影 发表于 2023-6-26 16:04
漂亮的动态背景图制作。好听的歌儿。欣赏新新好帖

谢谢欣赏！

醉美水芙蓉 发表于 2023-6-26 17:52

焱鑫磊 发表于 2023-6-26 18:24

好听！{:4_187:}

岩新新 发表于 2023-6-26 18:44

醉美水芙蓉 发表于 2023-6-26 17:52
岩新老师制图神速！杠杠的！

谢谢欣赏支持！

岩新新 发表于 2023-6-26 18:45

焱鑫磊 发表于 2023-6-26 18:24
好听！

谢谢欣赏支持！

梦缘 发表于 2023-6-26 20:57

欣赏精彩佳作，谢谢分享，点赞！{:4_178:}

红影 发表于 2023-6-26 21:27

岩新新 发表于 2023-6-26 16:15
谢谢欣赏！

新新弄了那么大的动图呢，真不容易{:4_187:}

小辣椒 发表于 2023-6-27 22:36

欣赏岩新新的精彩制作{:4_187:}

查看完整版本: 夢然 - 美麗的草原我的家