论坛 › 欢乐水吧 › 梦里楼兰(DJ默涵版)-安吉格乐

亚伦影音工作室 发表于 2024-5-3 20:58

梦里楼兰(DJ默涵版)-安吉格乐

本帖最后由 亚伦影音工作室 于 2024-6-3 11:14 编辑 <br /><br /><style>
#papa{margin: 150px -300px;
        width: 1164px;
        height: 620px;background:#222 url(https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg)no-repeat center/cover;
        position: relative;overflow: hidden;
        z-index: 12345;}

#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 50%; top: 460px;transform: translate(-50%);font:normal 2.8em 华文新魏; 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); } }

#bfqbj {margin: 520px 610px;
        width: 600px;
        height: 86px;background: url(https://pic.imgdb.cn/item/663248920ea9cb140397e28c.png)no-repeat center/420px 120px;
        position: absolute;overflow: hidden;
        z-index: 1;}
#dt{position: absolute;top:20px; left:240px;width: 70px;height: 70px;z-index:3; mix-blend-mode: lighten; }
#dt img{width: 100%;}
#yinpin{position: absolute;top:26px; left:73px;width: 180px;height: 80px;z-index:83; mix-blend-mode:overlay; }
#yinpin img{width: 100%;}

#mplayer {z-index: 80;
        position: absolute;
        top:0px; left:0px;
        bottom: 0px;
        width: 30px;
        height: 30px;
       
        opacity: 1;
        transition: .4s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #aaa;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 422px;bottom: -20px;
        border-width: 7px 8px;
        border-color: transparent transparent transparent #aaa;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 3px;
        height: 10px;bottom: -18px;
                left: 438px; border-color: #aaa;
        border-width: 0 2px 0 2px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      color: #ffffff;font-size: 12px;
      bottom: 32px;
      left:305px;}
#prog {position: absolute;z-index: 80;
      width: 160px;
      height: 1px;
      cursor: pointer;
         bottom: 28px;
left:305px;
border-radius: 2px;}
#bt{ --w: 60%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:300px;top:65px;font-size: 12px; z-index: 2; word-break: keep-all; white-space: nowrap; animation: bt 16s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>
<div id="papa">

<div id="bfqbj">
<div id="yinpin"><img id="tu1" src="https://pic.imgdb.cn/item/64ee76b5661c6c8e546b61ba.gif" ></div>
<div id="dt"><img id="tu" src="https://pic.imgdb.cn/item/66324e000ea9cb1403a64408.webp" ></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.krakenfiles.com/uploads/03-05-2024/916EzFjLdc/music.m4a" loop autoplay></audio>

<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(),image1.play() ): (aud.pause(),image.stop(),image1.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, red, red, red ' + 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 = '';   image1.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 image1= document.getElementById("tu1");
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `梦里楼兰(DJ默涵版)-安吉格乐
出品：亚伦影音工作室
梦里楼兰(DJ默涵版)-安吉格乐
词:李青曲:李青
遥望梦幻天边
楼兰还那么远
远处传来的驼铃声
怎不见你容颜
你曾说我们有缘
我说拜菩萨成全
此生若与你相见
再无心杂念
问一问那大漠的孤烟
你为何挂在天边
风不忍吹断思念请你
轻吻我的脸
虔诚的拜在佛前
求过菩萨千百遍
祈祷一定有那一天
再见你的笑脸


梦里梦见楼兰
看长河落日圆
还没轻触到你的脸
转身你已不见
日夜的心心念念
飞奔到你的面前
用我散发的光和热
守护你两千年
系上一条红红的丝线
双手合十的祝愿
那是我用千丝万缕
缠绕我的诺言
虔诚的拜在佛前
求过菩萨千百遍
都说姻缘一线牵
我们是血脉相连
如果菩萨开眼
应了我的心愿
我愿化作那胡杨
长在你的身边
为你遮避风雨为你取暖


`;
/*变量 ：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-5-3 21:33

亚伦这个png应该和出来的颜色不一样，这样才有区别音乐按钮在变换，

小辣椒一直想给你做一个透明的播放器，还是不行，不会做，今天送你一个帖就是送你这个播放器，你可以 自己修改透明的玩

小辣椒 发表于 2024-5-3 21:44

亚伦去看看播放器效果

https://www.huachaowang.com/forum.php?mod=viewthread&tid=75760

马黑黑 发表于 2024-5-3 21:55

{:4_208:}

红影 发表于 2024-5-3 22:50

这个播放器好像按下去没什么变化？评分后暂停键按了没反应呢。
欣赏亚伦老师好帖{:4_187:}

老谟深虑 发表于 2024-5-4 10:03

          欣赏老师的精美制作，点赞！

查看完整版本: 梦里楼兰(DJ默涵版)-安吉格乐