论坛 › 欢乐水吧 › 时尚首屏字幕制作《今生的遗憾就是错过你》王爱华

亚伦影音工作室 发表于 2023-2-22 22:18

时尚首屏字幕制作《今生的遗憾就是错过你》王爱华

<style>
#papa{margin: 10px -250px ; width: 1164px; height: 640px;background:url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f8c26f36f0e7def3294fae69643ba486.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#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: 11}
#pp { position: absolute; top: 75%;width: 100%; left:5px; z-index: 1;}
#mplayer {margin:0 auto;z-index: 40;
position: absolute;top:75%; left:85%;
width: 120px;
height: 120px;
cursor: pointer;
animation: spin 10s infinite linear;
}
@keyframes spin {0% { transform: rotate(360deg); }
}
.photo {width: 100%;
height: 100%;
position: absolute;z-index: -2;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;-webkit-mask-image: radial-gradient(black 28% ,transparent 65%);
animation: round 90s linear infinite;
}
@keyframes round{
4% {
opacity: 0;
transform:translate(0%,-150%)scale(1);}
10% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
12% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
18% {
opacity: 0;
transform:translate(0%,150%)scale(1);}
}

img:nth-child(1) {
animation-delay: 84s;
}
img:nth-child(2) {
animation-delay: 78s;
}
img:nth-child(3) {
animation-delay: 72s;
}
img:nth-child(4) {
animation-delay: 66s;
}
img:nth-child(5) {
animation-delay: 60s;
}
img:nth-child(6) {
animation-delay: 54s;
}
img:nth-child(7) {
animation-delay: 48s;
}
img:nth-child(8) {
animation-delay: 42s;
}
img:nth-child(9) {
animation-delay: 36s;
}
img:nth-child(10) {
animation-delay: 30s;
}
img:nth-child(11) {
animation-delay: 24s;
}
img:nth-child(12) {
animation-delay: 18s;
}
img:nth-child(13) {
animation-delay: 12s;
}
img:nth-child(14) {
animation-delay: 6s;
}
img:nth-child(15) {
animation-delay: 0s;
}
.stop img:nth-child(1) {
animation-play-state: paused;
}
.stop img:nth-child(2){
animation-play-state: paused;
}
.stopimg:nth-child(3){
animation-play-state: paused;
}
.stop img:nth-child(4){
animation-play-state: paused;
}
.stop img:nth-child(5){
animation-play-state: paused;
}
.stop img:nth-child(6){
animation-play-state: paused;
}
.stop img:nth-child(7) {
animation-play-state: paused;
}
.stop img:nth-child(8) {
animation-play-state: paused;
}
.stop img:nth-child(9) {
animation-play-state: paused;
}
.stop img:nth-child(10) {
animation-play-state: paused;
}
.stop img:nth-child(11) {
animation-play-state: paused;
}
.stop img:nth-child(12) {
animation-play-state: paused;
}
.stop img:nth-child(13) {
animation-play-state: paused;
}
.stop img:nth-child(14) {
animation-play-state: paused;
}
.stop img:nth-child(15) {
animation-play-state: paused;
}

</style>
<style>
#midground{
        background:url(https://365.tf/disk/tf/1676799062.png)0 0/ 40% 90%;
animation: STAR-MOVE50s linear infinite;position: absolute;overflow:hidden;width: 100%;filter: blur(0px);
        height: 100%;z-index: -1;
}
#foreground{
        background:url(https://365.tf/disk/tf/1676799062.png)0 0/ 60% 120%;
        animation: STAR-MOVE120s linear infinite;position: absolute;overflow:hidden;width: 100%;filter: blur(8px);
        height: 100%;z-index: -1;
}

@keyframes STAR-MOVE {
        from {
                background-position: 0% -600%
        }
        to {
                background-position: 600% 0%
        }
}
</style>

<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id="testImg" >
<img alt="" class="photo" src="https://365.tf/disk/tf/1676637814.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676611859.jpg" />
<img alt="" class="photo"src="https://365.tf/disk/tf/1676550717.jpg" />
<img alt=""class="photo"src="https://365.tf/disk/tf/1676555245.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676605567.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676571860.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676556713.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676549416.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676449988.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676439398.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676290487.jpg" />
<img alt="" class="photo"src="https://365.tf/disk/tf/1676341203.jpg" />
<img alt=""class="photo"src="https://365.tf/disk/tf/1676364179.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676320722.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676280389.jpg" /></div>
<audio id="MusicPlayer" src="https://www.qqmc.com/mp3/music262320911.mp3" loop autoplay></audio>
<canvas id="pp" title="亚伦影音" ></canvas>

<div id="rotate-words">
<div>今生的遗憾就是错过你<br />
<span>The regret of this life is to miss you)</span></div>

<div>演唱：王爱华<br />
<span>Sing: Wang Aihua</span></div>

<div>词/曲：春妹<br />
<span>Word/Song: Chunmei</span></div>

<div>出品：亚伦影音工作室<br />
<span>Produced by: Aaron Studios</span></div>
</div>

<div id="foreground" ></div>
<div id="midground" ></div>
<div type="button" id="btn"title="暂停/播放">
<img id="mplayer" src="https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png" alt="" /></div>

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

<style>
#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;z-index: 2;
        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 = `
《今生的遗憾就是错过你》王爱华
词/曲：春妹
LRC歌词制作：焱鑫磊
每当那星星挂满天际
我会期待再一次相遇
无法忘记你温柔的气息
可是我们再也回不去
多少次想你偷偷哭泣
后悔当初没有留住你
你离开后我独守着孤寂
若有来生我还会爱你
今生的遗憾就是错过你
孤独的夜晚落下了泪滴
在我心里你永远是唯一
想要见你却只能在梦里
今生的遗憾就是错过你
窗外的小雨在为谁哭泣
多想能够陪你一生一世
哪怕浪迹天涯我也愿意
多少次想你偷偷哭泣
后悔当初没有留住你
你离开后我独守着孤寂
若有来生我还会爱你
今生的遗憾就是错过你
孤独的夜晚落下了泪滴
在我心里你永远是唯一
想要见你却只能在梦里
今生的遗憾就是错过你
窗外的小雨在为谁哭泣
多想能够陪你一生一世
哪怕浪迹天涯我也愿意
哪怕浪迹天涯我也愿意

`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引*/
let mKey = 0, mFlag = true;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
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));
        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 = () => lrc.style.setProperty('--state',MusicPlayer.paused ? 'paused' : 'running');

/*监听播放进度*/
MusicPlayer.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (MusicPlayer.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});

var image = document.getElementById("testImg"),
    button = document.getElementById("btn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}

MusicPlayer.addEventListener('pause', () => mState());/*监听暂停事件*/
MusicPlayer.addEventListener('play', () => mState());/*监听播放事件*/
MusicPlayer.addEventListener('seeked', () => calcKey());/*监听查询事件*/
mplayer.addEventListener('click', () => { MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause(); });

midground.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>midground.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>midground.style.animationPlayState = 'paused');

foreground.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>foreground.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>foreground.style.animationPlayState = 'paused');

mplayer.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');

let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
/*函数 ：频谱*/
(function() { ypData = ;
let total = 120,idx = 0;
      let ctx =pp.getContext('2d');
      let w =pp.width =1164, h = pp.height = 120;
      let slice = w / total, vmax = Math.max.apply(null, ypData);
       MusicPlayer.loop = false;
      ctx.strokeStyle = '#00ff00';
      ctx.fillStyle = 'hsla(0, 70%, 95%, .75)';
      ctx.font = '14px sans-serif';
      ctx.shadowOffsetX = ctx.shadowOffsetY = 1;
      ctx.shadowBlur = 1;
      ctx.shadowColor = '#000';
      ctx.fillText('play', 100, 50);
      
      MusicPlayer.addEventListener('ended', () => { idx = 0; MusicPlayer.play(); });
      MusicPlayer.addEventListener('timeupdate', () => {
                draw();
                idx ++;
                if(idx > ypData.length - 1) idx = 0;
      });

      let draw = () => {
                let ar = Array(total).fill('0').map( (v,k) => Math.random() * (ypData * h / vmax));
                ctx.clearRect(0,0,w,h);
                ctx.beginPath();
                Array.from({length: total}).forEach((v,k) => ctx.lineTo(slice*k, h - ar));
                ctx.stroke();
                ctx.fillText(toMin(MusicPlayer.currentTime) + ' / ' + toMin(MusicPlayer.duration), 10, 30);
      }
      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 ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>

<style type="text/css">
#rotate-words {text-align:center;
position:absolute;z-index: 2;
max-width:800px;
margin:auto;
padding:20% 0;
font-size:3.8em;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
text-transform:uppercase;
color:#ff0000;
font-family: '华文隶书', sans-serif;
}

#rotate-words span {
display:block;
height:80px;
font-size:.7em;color:#000000;
text-transform:lowercase;
opacity:0.8;
font-family: '华文隶书', sans-serif;
}

#rotate-words div {
position:absolute;
opacity:0;
overflow:hidden;
left:10vw;
width:80vw;
line-height:1.2em;
animation: rotate-word 48s linear 2 0s;
}

@keyframes rotate-word {
    0% { opacity: 0;transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    3% { opacity: 1;transform: translateX(0);filter:blur(0px);transform:scale(.9)}
    12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
    16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    80% { opacity: 0}
    100% { opacity: 0}
}

#rotate-words div:nth-child(2) { animation-delay: 6s}
#rotate-words div:nth-child(3) { animation-delay: 12s}
#rotate-words div:nth-child(4) { animation-delay: 18s}
</style>

马黑黑 发表于 2023-2-22 23:39

绝美影音。欣赏。

庶民 发表于 2023-2-23 05:17

好方式，有创意！

起个网名好难 发表于 2023-2-23 07:29

欣赏好帖,早上好！

红影 发表于 2023-2-23 08:46

好漂亮的制作。欣赏亚伦老师好帖{:4_187:}

海笑 发表于 2023-2-23 10:03

欣赏老师佳作！

小辣椒 发表于 2023-2-23 13:19

亚伦这次的制作完美了，全屏欣赏可以了{:4_199:}

小辣椒 发表于 2023-2-23 13:20

发现亚伦的影子出现了{:4_170:}

亚伦影音工作室 发表于 2023-2-23 13:26

小辣椒 发表于 2023-2-23 13:20
发现亚伦的影子出现了

过奖了老师！

小辣椒 发表于 2023-2-23 13:41

亚伦影音工作室 发表于 2023-2-23 13:26
过奖了老师！

影子来了，欢迎{:4_187:}

小辣椒 发表于 2023-2-23 13:44

亚伦影音工作室 发表于 2023-2-23 13:26
过奖了老师！

播放器显示要完全完美还要过一个PS关，图片最好要加修饰，你现在的png不够完美，但相信你会完美的，期待

亚伦影音工作室 发表于 2023-2-23 13:57

本帖最后由 亚伦影音工作室 于 2023-2-23 14:59 编辑

小辣椒 发表于 2023-2-23 13:44
播放器显示要完全完美还要过一个PS关，图片最好要加修饰，你现在的png不够完美，但相信你会完美的，期待
图片处理ps完全没问题,本人完全熟悉ps.像皮擦解决。

梦缘 发表于 2023-2-23 17:09

精美播放器，欣赏问好！{:4_185:}

小辣椒 发表于 2023-2-23 21:24

亚伦影音工作室 发表于 2023-2-23 13:57
图片处理ps完全没问题,本人完全熟悉ps.像皮擦解决。

哇瑟~~亚伦是全能高手的{:4_178:}

查看完整版本: 时尚首屏字幕制作《今生的遗憾就是错过你》王爱华