论坛 › 欢乐水吧 › 负我不负她

亚伦影音工作室 发表于 2024-2-5 17:35

负我不负她

本帖最后由 亚伦影音工作室 于 2024-2-9 17:50 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 600px); width: 1076px; height: 640px; background: url('https://pic.imgdb.cn/item/65bf0434871b83018a3fcebd.jpg') no-repeat center/cover; box-shadow: 0px 0px 2px #ffffff; position: relative; z-index: 1; display: grid; overflow: hidden; place-items: center;}
#vid { position: absolute; width: 100%; height: 640px;top:0%; left:0px; opacity: 1;z-index: -1; transition: 0.1s all ease;}
#vid1 { position: absolute; width: 100%; height: 640px; top:0%;left:-33.5%;opacity: 1;z-index: -1; transition: 0.1s all ease;}
#vid2 { position: absolute; width: 100%; height: 640px; top:0%; left:33.5%; opacity: 1;z-index: -1; transition: 0.1s all ease;}
#lrc { --motion: cover2; --tt: 1s; --bg: #ff0000; position: absolute; top: 450px; font: bold 2.4em sans-serif; color:#000080; white-space: pre; -webkit-background-clip: text; pointer-events: none; z-index: 9; font:normal 3em 华文隶书;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: 0%; height: 100%; color: transparent; border-bottom: 4px dashed #880000; overflow: hidden; white-space: pre; background: var(--bg);background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
@keyframes cover1 { from { width: 0%; }to { width: 100%; } }
      @keyframes cover2 { from { width: 0%; }to { width: 100%; } }
#mplayer { position: absolute; text-align: center; top: 520px; z-index: 60;color:#ffffff;}
#mplayer::before {position: absolute;content: attr(data-tt);left: 0;bottom: 25px;width: 100%;text-align-last: justify;}
#mprog { width: 240px; accent-color: darkgreen; outline: none; cursor: pointer; }
#btnplay { width: 60px; height: 60px; cursor: pointer; animation: rotating 6s infinite linear var(--state); }
@keyframes rotating { to { transform: rotate(360deg); } }

</style>

<!-- HTML代码 -->
<div id="papa">
<video id="vid"src="http://chuangshicdn.data.mvbox.cn/music/yc/21/09/25/21092509085202141701.mp4" muted autoplay loop></video>
<video id="vid1"src="http://chuangshicdn.data.mvbox.cn/music/yc/21/09/25/21092509085202141701.mp4" muted autoplay loop></video>
<video id="vid2"src="http://chuangshicdn.data.mvbox.cn/music/yc/21/09/25/21092509085202141701.mp4" muted autoplay loop></video>
        <audio id="aud" src="http://chuangshicdn.data.mvbox.cn/music/yc/24/02/05/24020516271878901513.mp3" autoplay loop></audio>
        <div id="mplayer" data-tt="0:00 0:00">
                <img id="btnplay" src="https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png" title="播放/暂停" alt="" /><br>
                <input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度" />
        </div>
        <div id="lrc" data-lrc="HuaChao LRC">HuaChao LRC</div>
</div>
<script>
var mseek = false;
var mState = () => aud.paused ?
( btnplay.style.setProperty('--state', 'paused'), btnplay.title = '点击播放' ) :
( btnplay.style.setProperty('--state', 'running'), btnplay.title = '点击暂停' );
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;
}


aud.addEventListener('timeupdate', () => {

        if (!mseek) mprog.value = aud.currentTime / aud.duration * mprog.max;

        mplayer.dataset.tt = toMin(aud.currentTime) + ' ' + toMin(aud.duration);

});

aud.addEventListener('pause', () => mState());

aud.addEventListener('playing', () => mState());

mprog.onmousedown = () => mseek = true;

mprog.onmouseup = () => mseek = false;

mprog.onchange = () => aud.currentTime = aud.currentTime = mprog.value / mprog.max * aud.duration;

btnplay.onclick = () => aud.paused ?(aud.play(),vid.play(),vid1.play(),vid2.play()): ( aud.pause(),vid.pause(),vid1.pause(),vid2.pause());
</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));
};



/*函数 ：处理当前歌词索引 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 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;
};
/*函数 ：关键帧动画状态切换*/
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>

樵歌 发表于 2024-2-5 18:44

好精美的视频！{:4_199:}

小辣椒 发表于 2024-2-5 20:20

亚伦用了3个视频背景{:4_199:}

小辣椒 发表于 2024-2-5 20:21

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

红影 发表于 2024-2-5 20:23

好漂亮的制作，这些视频选得真美。欣赏亚伦老师好帖{:4_199:}

查看完整版本: 负我不负她