论坛 › 欢乐水吧 › 歌曲《心被伤透爱难留》

亚伦影音工作室 发表于 2024-5-10 18:53

歌曲《心被伤透爱难留》

本帖最后由 亚伦影音工作室 于 2024-5-10 18:53 编辑 <br /><br /><style>
#papa {margin: 150px -300px;
        width: 1164px;
        height: 640px;
        background:#000000;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;
}

#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; transition: 0.1s all ease;mix-blend-mode: lighten; }
#vid1 { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: -1; transition: 0s all ease;}
#bfqbj{margin: 50% 80px;width: 320px;height: 200px;position: absolute;background:url(https://pic.imgdb.cn/item/663d89940ea9cb1403fda2dc.png)no-repeat 0px 10px/260px 50px;}
#prog {position: absolute;z-index: 91;
      width: 300px;
      height: 3px;
      cursor: pointer;
         top:10px;

left:0px;background:#ff0000 linear-gradient(to right,#0000, #0000var(--prg), white 0);
      color: #ffffff;
      --prg: 0%; --state: paused;}
#prog::before, #prog::after { position: absolute; }
#prog::before { content: attr(data-cu); left:0px; top: -20px; }
#prog::after { right: 0px; content: attr(data-du); ; top: -20px; }

#mplayer {z-index: 80;position:absolute;top:16px;left:132px;width:38px;height:38px;}
#lb{ position: absolute;top: 24px;right:35px; width: 22px; height: 20px; }
#lb img{ width: 100%; height: 100%;   opacity: 1; }

#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:95%; left:calc(95% - 15px);font: normal 1.5em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}

#lrc{left: 30%;top: 80%;}#lrcc {right:10%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:normal 2.5em 华文新魏;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 -1px 0);z-index: 20;}
#lrcc::before,#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 {}

#bt{ width: 90%; height: 60px;color: #ffffff; position: absolute; left:3%;top:5%;font-size: 20px; font-family:仿宋;z-index: 11; animation: wz 20s linear infinite ; }
.stop #bt{animation-play-state: paused;}
@keyframes wz {
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%); left: 80%;}
}
</style>
<div id="papa">
<span id="fullscreen">全屏</span>
<div id="testImg"><div id="bt">歌曲《心被伤透爱难留》</div></di>
<video id="vid"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6d5e65d5535209ab6e36dc73596bbb1b_preview.mp4" muted autoplay loop></video>
<video id="vid1"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0540a449967dc511122be6c46d14e977_preview.mp4" muted autoplay></video>
<div id="bfqbj">
<div data-cu="00:00" data-du="00:00" id="prog" title="调节进度" style="--state: running; --prg: 48.40552205703211%;"></div>
<div ><img id="mplayer" src="https://pic.imgdb.cn/item/66260c740ea9cb14034b5c16.png" alt="" /></div>
<div id="lb"> <img id="lbImg" src="https://pic.imgdb.cn/item/662615500ea9cb14035d435e.gif" alt="" /></div>
</div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/6e/49/da/da58a29ea944c2793d97de8dbef04a68/audio.mp3" loop autoplay></audio>
<span id="lrcStr" style="visibility: hidden;">
歌曲《心被伤透爱难留》
作词：张海宝
作曲：张海宝
演唱：卢喃
素材：网络
制作：天涔
真心诚心多难求
最珍贵初见的温柔
时光流逝岁月走
真假猜不透
狠心负心说出口
有心人包容还依旧
爱情总有风雨骤
无情先逃走
心被伤透爱难留
都追求想要的自由
红尘迷惑来时路
幸福太难求
心被伤透爱难留
想找个不哭的理由
痴情总被绝情瘦
泪落心里头
泪落心里头
真心诚心多难求
最珍贵初见的温柔
时光流逝岁月走
真假猜不透
狠心负心说出口
有心人包容还依旧
爱情总有风雨骤
无情先逃走
心被伤透爱难留
都追求想要的自由
红尘迷惑来时路
幸福太难求
心被伤透爱难留
想找个不哭的理由
痴情总被绝情瘦
泪落心里头
泪落心里头
心被伤透爱难留
都追求想要的自由
红尘迷惑来时路
幸福太难求
心被伤透爱难留
想找个不哭的理由
痴情总被绝情瘦
泪落心里头
泪落心里头
谢谢欣赏！
</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"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.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.innerHTML); /*获得歌词数组*/
})();


/*暂停 播放按钮*/
(function() {
var aud = document.getElementById("aud");
var img = document.getElementById("mplayer");
img.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}
aud.addEventListener("play", function (e) {
        img.src="https://pic.imgdb.cn/item/66260c740ea9cb14034b5c16.png";
}, false);
aud.addEventListener("pause", function (e) {
        img.src="https://pic.imgdb.cn/item/66260c7f0ea9cb14034b6d07.png";
}, false);})();

mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

/*结束*/
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
/*进度条 进度时间*/

let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => {
      prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
      prog.dataset.cu = toMin(aud.currentTime);
      prog.dataset.du = toMin(aud.duration);
});

prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
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;
      };
/*结束*/

/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { aud.paused ?(vid.play(),imagelb.play()): (vid.pause(),imagelb.stop()) };
/*结束*/

klok.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => klok.style.animationPlayState = 'running');
aud.addEventListener('pause', () => klok.style.animationPlayState = 'paused');
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wzsd1.style.animationPlayState = 'paused');
</script>

<script>
/*控制动画*/
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*/
</script>
<script>
(function() {
let vid1 = document.querySelector('vid1');
let mState = () => aud.paused ?vid1.pause() :vid1.play();
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);});
setInterval( () => { aud.paused ? vid1.pause() : vid1.play(); },100);
var dts = [
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0540a449967dc511122be6c46d14e977_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6648b5e3e5a9f07b8fffd9689c73f4a5_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/736fdc82634c98f0146dc7492f29fa6a_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c4c773c5e33f7d0f9ccdc0db0f9f8dbf_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/8de5242073d6a845db945e81c1971b80_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c3e0dfe58d56efa1b3922cfa3de07e1f_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ccd7c236ef2fae94462eb93e5a60b79e_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/9c4a0b27d12cf4e2d42ec76e5161d9cd_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3ccf3f47f62f1cba2480e21720fa1f74_preview.mp4"
];
var dt= document.getElementById('vid1');
var dtIdx = 1;
dt.onended = function(){
      dt.src = dts;
      dtIdx++;
      dtIdx %= dts.length;
}
</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;
            // 透明度还原
            imagelb.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 imagelb= document.getElementById("lbImg");
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

红影 发表于 2024-5-10 20:43

漂亮的视频轮转，还是一键全控的呢。这制作真棒。
欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2024-5-11 23:33

精彩亚伦精彩制作

查看完整版本: 歌曲《心被伤透爱难留》