伤离别 (DJ沈念版)

亚伦影音工作室 发表于 2024-4-26 11:50

本帖最后由亚伦影音工作室于 2024-4-26 11:52 编辑 <br /><br /><style>
#papa {margin: 120px -300px;
   width: 1164px;
   height: 640px;
   background:url(https://pic.imgdb.cn/item/645662e30d2dde577730c209.jpg)no-repeat center/cover;
   box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
   position: relative;overflow: hidden;
   z-index: 12345;
}
#dtm{width: 520px;
   height: 125px;top:41px; left:600px;z-index: 2;
   position: absolute;mix-blend-mode: lighten;}
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 320px; top: 540px;transform: translate(-50%);font:normal 2.2em 华文新魏; font-weight:400;color: #000080;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: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
</style>

<div id="papa">
<div id="dtm"><img id="lmg" src="https://pic.imgdb.cn/item/6575811dc458853aefc7de14.gif" ></div>
<div id="bfqbj">
<div id="dt"><img id="tu" src="https://pic.imgdb.cn/item/662b17890ea9cb140332d9d8.gif" ></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<div id="bt">正在播放伤离别 (DJ沈念版)</div>
</div>
<div data-lrc="亚伦影音工作室" id="lrc" title="歌词显示">亚伦影音工作室</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/ae/56/e3/796f23d31d79801491cf16f439181974/audio.mp3" loop autoplay></audio>

<style>
#bfqbj {margin: 500px 620px;
   width: 520px;
   height: 125px;
   position: absolute;overflow: hidden;
   z-index: 12;}
#dt{position: absolute;top:41px; left:0px;width: 520px;height: 125px;z-index:3; }
#dt img{width: 100%;}
#mplayer {z-index: 80;
   position: absolute;
   top:0px; left:0px;
   bottom: 0px;
   width: 30px;
   height: 30px;
   opacity: 1;
   transition: .3s;
   display: grid;
   place-items: center;
   --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
   position: absolute;
   content: '';
   border-style: solid;
   border-color: #eeeeee;
   cursor: pointer;
   transition: .3s;
}
#mplayer::before {
   width: 0;
   height: 0;
   left: 281px;bottom: -35px;
   border-width: 4px 5px;
   border-color: transparent transparent transparent #eeeeee;
   opacity: var(--disp1);
}
#mplayer::after {
   width: 2px;
   height: 8px;bottom: -35px;
            left: 266px;
   border-width: 0 2px 0 2px;
   opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
   color: #ffffff;font-size: 4px;
   bottom: 70px;
   left:70px;}
#prog {position: absolute;z-index: 91;
   width: 167px;
   height: 1px;
   cursor: pointer;
      bottom: 63px;
left:71px;
border-radius: 2px;}
#bt{ --w: 80%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:320px;top:80px;font-size: 14px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 16s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>

<script >
(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(),image.play(),imagedt.play() ): (aud.pause(),image.stop(),imagedt.stop()));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
prog.onclick = (e) => {
            aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
   }
aud.addEventListener('timeupdate', () => {
            aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #00ff00, #00ff00, #00ff00 ' + aud.currentTime / aud.duration * 100 + '%, transparent 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;
   };
bt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => bt.style.animationPlayState = 'running');
aud.addEventListener('pause', () => bt.style.animationPlayState = 'paused');

</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 = ''; imagedt.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("tu");
var imagedt= document.getElementById("lmg");
</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));
};
/*函数：模拟显示同步歌词*/
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'),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-4-26 11:58

{:4_199:}

愤怒的葡萄 发表于 2024-4-26 12:19

挺不错的音乐。

小辣椒 发表于 2024-4-26 12:50

这个播放器是我的？？{:4_170:}

小辣椒 发表于 2024-4-26 12:53

在软件做的时候我还把进度条拉长了一点，你现在截图后缩小后感觉整体还是尺寸不错的，亚伦好棒!

小辣椒 发表于 2024-4-26 12:54

只是播放器不够清晰了

亚伦影音工作室 发表于 2024-4-26 13:19

小辣椒发表于 2024-4-26 12:53
在软件做的时候我还把进度条拉长了一点，你现在截图后缩小后感觉整体还是尺寸不错的，亚伦好棒!

不错是你的，把你播放器抠图所以不清楚了！

小辣椒 发表于 2024-4-26 13:23

亚伦影音工作室发表于 2024-4-26 13:19
不错是你的，把你播放器抠图所以不清楚了！

这种播放器不是透明的，所以还只能在软件里面制作，你也是只能截图了{:4_173:}

亚伦影音工作室 发表于 2024-4-26 13:26

小辣椒发表于 2024-4-26 13:23
这种播放器不是透明的，所以还只能在软件里面制作，你也是只能截图了

截图后又抠图环节太多，所以失真了，不抠图还可以！

小辣椒 发表于 2024-4-26 13:27

亚伦影音工作室发表于 2024-4-26 13:26
截图后又抠图环节太多，所以失真了，不抠图还可以！

透明的这个好像做不了

亚伦影音工作室 发表于 2024-4-26 13:28

亚伦影音工作室发表于 2024-4-26 13:26
截图后又抠图环节太多，所以失真了，不抠图还可以！

有时间用代码直接做个！就清楚了！

亚伦影音工作室 发表于 2024-4-26 13:32

小辣椒发表于 2024-4-26 13:27
透明的这个好像做不了
这个就是透明的，我做的！你打开看看。

小辣椒 发表于 2024-4-26 13:33

亚伦影音工作室发表于 2024-4-26 13:32
这个就是透明的，我做的！

你是先截图再修改的，直接做透明的我做不出来

小辣椒 发表于 2024-4-26 13:33

亚伦影音工作室发表于 2024-4-26 13:28
有时间用代码直接做个！就清楚了！

这种swf播放器我已经做了好几个了，透明的不行，我软件里面做的

红影发表于 2024-4-26 16:24

漂亮的播放器，漂亮的动图和人物画面。欣赏亚伦老师好帖{:4_199:}

页: [1]

花潮论坛's Archiver

伤离别 (DJ沈念版)