论坛 › 动画音画 › 简单音画模板

亚伦影音工作室 发表于 2025-1-1 12:27

简单音画模板

本帖最后由 亚伦影音工作室 于 2025-1-1 14:33 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 721px); background:#800 url(https://file.moyublog.com/d/file/2024-12-31/dde1344130b25fdde9c53ae8ef2d3a97.jpg)no-repeat center/cover;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative;   }
#ppm{position: absolute; width: 100%; height: 100%; opacity:.4; z-index: 1;
background:url(https://pic.imgdb.cn/item/66a1ddcfd9c307b7e912a018.gif)no-repeat center/100% 100%; border-radius: 0px;mix-blend-mode: lighten;
}
#ppcm{ position: absolute;width: 100%; height: 100%; opacity:0;z-index: 1;
background:url(https://)no-repeat center/100% 100%; border-radius: 0px;mix-blend-mode: lighten;
}
#but{left: 5%;top: 4%;position:absolute; z-index: 40;border: 3px solid #ff3300; width:50px;overflow: hidden;
      height: 50px;
             border-radius: 0%;cursor: pointer;}

#pic{position:absolute;top:25px; left:28px;background:#ff3300;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:30px;
      height: 30px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#ff3300; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:30px;
      height: 30px;}

#fullscreen { opacity:1;position: absolute; width: 55px; height: 55px;top:4%; cursor: pointer;left:12%;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 55px; height: 55px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774aaffd0e0a243d4ed490c.png)no-repeat center/cover;
}
#退出{ width: 55px; height: 55px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774aaf1d0e0a243d4ed490b.png)no-repeat center/cover;
</style>
<style>
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 16;left: 50%; top: 86%;transform: translate(-50%);font:400 3.5em/1em 华文隶书;font-style:italic; color: #000080;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: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
</style>
<div id="papa">
<div id="ppm"></div>
<div id="ppcm" ></div>
<span id="fullscreen" >
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div id="but" >
<div id="pic"></div>
<div id="picc"></div>
</div>
<div data-lrc="" id="lrc"></div>
</div>
<audio id="aud" src="https://file.uhsea.com/2412/185c6fdbf40c8eebd97b8813d9bb21feQ4.m4a" autoplay loop></audio>
<script >
but.onclick = () => aud.paused ? (aud.play(),picc.style.opacity= '0',pic.style.opacity = '1',ppcm.style.opacity= '0',ppm.style.opacity = '.4'): (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0',ppcm.style.opacity= '.4',ppm.style.opacity = '0');
aud.addEventListener('timeupdate', () => {
                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;
      };

let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}

</script >
<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')) : (lrc.style.setProperty('--state','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>

红影 发表于 2025-1-1 13:56

漂亮的小播按钮和全屏按钮设计。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2025-1-1 16:58

实用、简约的音画模板！
谢谢亚伦老师的新年礼物，祝新年快乐{:4_191:}

秋思梦景 发表于 2025-1-2 07:58

问候老师好！精美音画佳作，精心制作分享！为您点赞！祝您幸福安康！{:5_108:}{:4_204:}

朵拉 发表于 2025-1-2 15:43

漂亮，祝亚伦老师新年快乐，万事顺意{:4_204:}

查看完整版本: 简单音画模板