亚伦影音工作室 发表于 2023-11-30 19:36

想你的时候问月亮(DJ 默涵版-苏谭谭

本帖最后由 亚伦影音工作室 于 2023-11-30 21:11 编辑 <br /><br /><style>
#papa {margin: 10px -150px;
        width: 1164px;
        height: 640px;
        background:url(https://img.365.tf/file/2023/11/30/yu3xxv.jpg)no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 10%,#Ffffff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 100%,#000000 100%,black 100%);}
#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;}

#mplayer {z-index: 80;
        position: absolute;
        top:94%; left:2%;
        bottom: 3px;
        width: 30px;
        height: 30px;
        border: 0px solid #cccccc;
        border-radius: 0%;
        opacity: 1;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #cccccc;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 12px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent #cccccc;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      font: normal 15px sans-serif;
      color: #ffffff;
         top:94%;
      left:83%;}

#prog {position: absolute;z-index: 91;
      width: 77%;
      height: 0.3%;
      cursor: pointer;
         top:96%;
color: #cccccc;
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left:5%;
border-radius: 2px;}
#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}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#bt{ --w: 85%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:75%;top:2%;font-size: 16px; z-index: 91;}
#bt { word-break: keep-all; white-space: nowrap; animation: bt 40s linear infinite; background:#0000}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
.stop #bt{animation-play-state: paused;}

#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;mix-blend-mode:soft-light;}
</style>

<div id="papa">
<span id="fullscreen">全屏</span>
<div id="Img0" ><span id="bt">想你的时候问月亮(DJ 默涵版-苏谭谭   亚伦影音工作室</span></div>
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/64f942ca661c6c8e5436b629.gif" width="100%" height="100%"></div>
<div id="testImg" >
<pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p>
</div>
<div id="tmsg">00:00   /00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
</div>
</div>
<audio id="aud" src="https://i.mp3.wf/view.php/d114fe54cf39023834ae278c7bac8ee5.mp3" loop autoplay></audio>
<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 默涵版-苏谭谭
作词：党明毅/一只舟
作曲：一只舟
编曲：孙侠
和声：姚斯婷
混音：王哲
制作人：亚伦
宣发：张丹娴/廖文婷
统筹：唐欣宇
出品人：亚伦
OP：亚伦影音工作室
想你的夜晚总是很漫长
萧萧的冷风还带着寒霜
远隔千里你身处在他乡
苦苦滋味我独自去品尝
问问月亮思念它有多长
你是否也会把我去守望
无法忘掉你旧时的模样
想你的心伴着淡淡忧伤
相思的泪水在不停流淌
只有默默的遥望着远方
把那相思的苦深深埋藏
等你在那曾经的老地方
亲爱的你不知现在怎样
夜深人静时是否把我想
月亮恰似你那甜美脸庞
想你的时候我只能问月亮
问问月亮思念它有多长
你是否也会把我去守望
无法忘掉你旧时的模样
想你的心伴着淡淡忧伤
相思的泪水在不停流淌
只有默默的遥望着远方
把那相思的苦深深埋藏
等你在那曾经的老地方
亲爱的你不知现在怎样
夜深人静时是否把我想
月亮恰似你那甜美脸庞
想你的时候我只能问月亮

`;

/*变量 ：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')) : (lrc.style.setProperty('--state','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); /*获得歌词数组*/
})();

/*暂停 播放按钮*/
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*/

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

prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' / ' + toMin(aud.duration);

      });

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;
      };
/*结束*/

/*结束*/
/*控制歌词颜色*/
klok.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => klok.style.animationPlayState = 'running');
aud.addEventListener('pause', () => klok.style.animationPlayState = 'paused');
/*结束*/

/*控制文字颜色*/
dt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => dt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dt.style.animationPlayState = 'paused');
/*结束*/

</script>
<style>
#klok{
-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-color:#000080;
   background-image:linear-gradient(90deg, #880000 40%, #000080 40%, #8B4513 80%);
   background-repeat:no-repeat;
line-height:35px;
    -webkit-animation:loop 4slinearinfinite ;}
@-webkit-keyframes loop{
   50%{background-position: -400px 0;filter:hue-rotate(0deg)contrast(120%)brightness(350%);}
}
</style>
<style>
.photo {width: 100%;
height: 100%;box-shadow: 0px 0px 0px 1px #cccccc, 0px 0px 0px 4px #880000;
position: absolute;
z-index: 1;
top:0px; left:0px;filter:contrast(140%)brightness(100%);
opacity: 0;
animation: round 90s linear infinite;}
@keyframes round{0% {opacity: 1;transform:matrix(1.0, 6.0, 5.0, 5.0, 6.0, 6)scale(0.2);}

5% {opacity: 1;transform:translate3d(0px,0px,0px)scale(0.5)}
7% {opacity: 1;transform:translate3d(0px,0px,0px)scale(1)}
9% {opacity: 1;transform:translate3d(0px,0px,0px)scale(1)}

12% {opacity: 0;transform:translate3d(0px,0px,0px)scale(3)}
}
.photo:nth-child(1) {animation-delay: 84s;background: url('https://img.365.tf/file/2023/11/30/xvfq94.jpg')no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 78s;background: url(https://img.365.tf/file/2023/11/30/xtmhyu.jpg)no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 72s;background: url(https://img.365.tf/file/2023/11/30/xtld1a.jpg)no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 66s;background: url(https://img.365.tf/file/2023/11/30/xtasem.jpg)no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 60s;background: url(
https://img.365.tf/file/2023/11/30/xovi9b.jpg)no-repeat center/cover}
.photo:nth-child(6) {animation-delay: 54s;background: url(https://img.365.tf/file/2023/11/30/xovj9a.jpg)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 48s;background: url(https://img.365.tf/file/2023/11/30/xovnt1.jpg)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 42s;background: url(https://img.365.tf/file/2023/11/30/xovwfk.jpg)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 36s;background: url(https://img.365.tf/file/2023/11/30/xovwxk.jpg)no-repeat center/cover}
.photo:nth-child(10){animation-delay: 30s;background: url(https://img.365.tf/file/2023/11/30/xow36u.jpg)no-repeat center/cover}
.photo:nth-child(11){animation-delay: 24s;background: url(https://img.365.tf/file/2023/11/30/xow7l4.jpg)no-repeat center/cover}
.photo:nth-child(12){animation-delay: 18s;background: url(https://img.365.tf/file/2023/11/30/xowg1s.jpg)no-repeat center/cover}
.photo:nth-child(13){animation-delay: 12s;background: url(https://img.365.tf/file/2023/11/30/xowbja.jpg)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 6s;background: url('https://img.365.tf/file/2023/11/30/xowigv.jpg')no-repeat center/cover}
.photo:nth-child(15) {animation-delay: 0s;background: url(https://img.365.tf/file/2023/11/30/xowo7e.jpg)no-repeat center/cover}
.stop .photo:nth-child(1),
.stop .photo:nth-child(2),
.stop .photo:nth-child(3),
.stop .photo:nth-child(4),
.stop .photo:nth-child(5),
.stop .photo:nth-child(6),
.stop .photo:nth-child(7),
.stop .photo:nth-child(8),
.stop .photo:nth-child(9),
.stop .photo:nth-child(10),
.stop .photo:nth-child(11),
.stop .photo:nth-child(12),
.stop .photo:nth-child(13),
.stop .photo:nth-child(14),
.stop .photo:nth-child(15){animation-play-state: paused;}
</style>
<script>
/*控制动画*//*控制动字*/
(function(){
var image = document.getElementById("testImg");
var image0 = document.getElementById("Img0");
let mState = () => aud.paused ? (image.classList.add('stop'),image0.classList.add('stop')):(image.classList.remove('stop'),image0.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*//*结束*/
</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");
mplayer.onclick =function() { aud.paused ? image.stop():image.play()};
/*结束*/
</script>

亦是金 发表于 2023-12-2 17:47

欣赏亚伦精美帖子，制作漂亮，歌曲好听！{:5_116:}

liumang 发表于 2023-12-3 22:49

专攻特效代码的高手{:5_150:}

liumang 发表于 2023-12-3 22:49

这个还可以一键停止{:5_150:}
页: [1]
查看完整版本: 想你的时候问月亮(DJ 默涵版-苏谭谭