亚伦影音工作室 发表于 2023-3-27 08:14

为何让我苦苦思念

<style>
#papa {
        margin: 10px -300px;
        width: 1164px;
        height: 620px;
        background:#000000 url('') center/cover no-repeat;
        box-shadow: 3px 3px 2px #000;
        position: relative;
        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 #000000;
        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: #000000;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 10px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent #000000;
        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(51deg, rgba(255, 0, 99, 0.31) 2%,rgba(69, 178, 69, 0) 68%,#27C607 85%,#29C609 100%); } 50% {background: linear-gradient(51deg, rgba(0, 93, 255, 0.22) 2%,rgba(69, 178, 69, 0) 68%,#073DC6 85%,#0929C6 100%);}100%{background: linear-gradient(51deg, rgba(22, 255, 0, 0.22) 2%,rgba(69, 178, 69, 0) 59%,#F80101 88%,#FF0404 92%);} }
</style>

<div id="papa">
        <canvas id="canv"></canvas>
<div id="fg"></div>
        <div id="mplayer"></div>
<div data-lrc="为何让我苦苦思念" id="lrc">为何让我苦苦思念</div>
</div>
<audio id="aud" src="https://p4.t57.cn:8399/2022/zw/1/CMJ.m4a" loop autoplay></audio>
<video id="vid" src="http://chuangshicdn.data.mvbox.cn/music/sp/21/01/19/21011923413336507390.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: 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 = `
演唱：DJ伟然
作词：牛晓玉
作曲：张世彬
编曲：DJ伟然
为何让我苦苦思念
制作人：亚伦
出品：亚伦影音工作室
小脾气对我发了多少遍
一再容忍是爱的表现
我在原地等你如初见
不要让我苦苦思念
一首歌无限循环不厌倦
听着歌感受你的陪伴
我在原地守候等眷恋
你却让我苦苦思念
爱你时刻让我想念
你突然出现我心会慌乱
晴天雨天拒孤单
为何让我苦苦思念
爱你时刻让我牵念
你突然离去我心在耳间
日出日落盼相见
为何让我苦苦思念思念
一首歌无限循环不厌倦
听着歌感受你的陪伴
我在原地守候等眷恋
你却让我苦苦思念
爱你时刻让我想念
你突然出现我心会慌乱
晴天雨天拒孤单
为何让我苦苦思念
爱你时刻让我牵念
你突然离去我心在耳间
日出日落盼相见
为何让我苦苦思念思念
爱你时刻让我想念
你突然出现我心会慌乱
晴天雨天拒孤单
为何让我苦苦思念
爱你时刻让我牵念
你突然离去我心在耳间
日出日落盼相见
为何让我苦苦思念思念
`;

/*变量 ：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-27 10:30

这个小播放器可以随着鼠标而隐现，视频漂亮，歌词同步准确，还能所有动态一键暂停。亚伦老师的帖子真棒{:4_199:}

小辣椒 发表于 2023-3-27 13:30

这个隐藏小播用音画帖感觉很合适的

樵歌 发表于 2023-3-27 18:01

歌词的意思和画面的意境特别相配。{:4_199:}
页: [1]
查看完整版本: 为何让我苦苦思念