醉美水芙蓉 发表于 2024-10-26 17:49:32

秋离相思悠

<style>
#papa { margin: 100px 0 20px calc(50% - 721px); background:#800 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/2cf99265f8799cfbe8fe54a7cdde10ca.mp4.jpg')no-repeat center/cover;width: 1280px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;}
#play { position: absolute; width: 60px; height: 60px;top: 18%;background:#000; cursor: pointer; left: 2%;-webkit-mask-image: radial-gradient(black 80% ,transparent 80%);z-index: 20; }
#play img{height: 100%; width: 100%;}
#vid {z-index: 1;
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      
}
#vido {z-index: 2;
      position: absolute;
      width: 100%;
      height: 100%;mix-blend-mode:darken;   
      object-fit: cover;
      
}
#lrc{left: 8%;top: 75%;}#lrcc {right:8%;top: 80%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;font:normal 3em 华文隶书;color: #000080;white-space: pre;-webkit-background-clip: text;z-index: 20;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
#fullscreen { position: absolute; top: 160px; right:30px;font: normal 2em/0em 楷体;color:#000; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id="play" title="暂停/播放"><img id="Img" src="https://pic.imgdb.cn/item/662615500ea9cb14035d435e.gif" alt="" /></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<span id="fullscreen">全屏欣赏</span>
<audio id="aud" src="http://cccimg.com/view.php/85a2a9e51e8a70312c31403a44e7950b.mp3" autoplay loop></audio>
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/b33331857b459d2a35c52cf01aeeaa35_preview.mp4" autoplay loop muted></video>
<video id="vido" src="https://video-qn.51miz.com/preview/video/00/00/14/43/V-144396-073C1809.mp4" autoplay loop muted></video>
</div>
<script>
play.onclick = () => aud.paused ?( aud.play(),vid.play(),vido.play(),image.play()):(aud.pause(),vid.pause(),vido.pause(),image.stop());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };
</script>
<span id="lrcStr" style="visibility: hidden;">秋离相思悠
作词：韩煜灵
作曲：韩煜灵
发行：煜文化
LRC编辑：醉美水芙蓉
男: 山路弯弯绕水一道道
漫山愁云满山雾昭昭
女：藤蔓牵衣袖
也想把人儿留
怎奈两个痴心人离别在深秋
男: 枫叶红透爱在心中留
我把情感暂放在心头
女：人别心未别
贴心话耳边嗟
一行鸿雁向南飞声声诉离忧
男: 合欢树下我们真诚祈祷
合：许下誓约白头到老
女：挥动我的手啊
一步一回头
男：短暂离别为了明天更美好
男: 秋风落叶它在身边呼啸
女：恋恋不舍泪往外流
男：阳光照射我的
影子伴我走
合：浓浓秋意和着愁离人相思悠
男: 枫叶红透爱在心中留
女：我把情感暂放在心头
男：人别心未别
贴心话耳边嗟
女：一行鸿雁向南飞声声诉离忧
男: 合欢树下我们真诚祈祷
女：许下誓约白头到老
合：挥动我的手啊
一步一回头
合：短暂离别为了明天更美好
男: 秋风落叶它在身边呼啸
合：恋恋不舍泪往外流
女：阳光照射我的
影子伴我走
合：浓浓秋意和着愁离人相思悠
谢谢欣赏！

</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
      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) => {
      lrca=lrcAr;
      lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
      let Y=String(mKey/2).indexOf(".");
      if (Y == -1)
    {
      0==mKey&&(lrc.innerHTML=lrca);
      lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
      lrcc.dataset.lrc = "";
      lrc.style.setProperty('--motion', 'cover1');
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
      }
    else
    {
      lrc.innerHTML = lrcb;
      lrcc.dataset.lrc = lrca;
      lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
      lrcc.style.setProperty('--tt', time + 's');
      lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
      }
      mKey += 1;
};
/*函数 ：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),play.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),play.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;
                }
      }
});
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('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}

var image= document.getElementById("Img");
</script>


红尘过客 发表于 2024-11-2 03:31:08

这个作品漂亮！！！！

午老虎 发表于 2024-11-11 13:37:44

这个作品漂亮！！！！

肖浅 发表于 3 天前

这个作品漂亮！！！！
页: [1]
查看完整版本: 秋离相思悠