论坛 › 欢乐水吧 › 受伤的玫瑰 歌手：魏新雨

亚伦影音工作室 发表于 2024-4-29 15:19

受伤的玫瑰 歌手：魏新雨

本帖最后由 亚伦影音工作室 于 2024-5-10 10:20 编辑 <br /><br /><style>
#papa{margin: 140px -310px;
        width: 1164px;
        height: 620px;background:#222 url(https://pic.imgdb.cn/item/64ce4f0e1ddac507ccfe1eae.jpg)no-repeat center/cover;
        position: relative;overflow: hidden;
        z-index: 12345;}
#yinpin{position: absolute;top:55px; left:30px;width: 400px;height: 220px;z-index:3; mix-blend-mode: lighten; }
#yinpin img{width: 100%;}
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 50%; top: 400px;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: 500px 10px;
        width: 600px;
        height: 86px;background: url(https://pic.imgdb.cn/item/662b69cb0ea9cb1403e4db7d.png)no-repeat center/480px 75px;
        position: absolute;overflow: hidden;
        z-index: 1;}
#dt{position: absolute;top:35px; left:480px;width: 20px;height: 15px;z-index:3; mix-blend-mode: lighten; }
#dt 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: #fff;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 325px;bottom: -18px;
        border-width: 5px 5px;
        border-color: transparent transparent transparent #eeeeee;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 10px;bottom: -18px;
                left: 338px;
       border-width: 0 2px 0 2px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      color: #ffffff;font-size: 8px;
      bottom: 50px;
      left:100px;}
#prog {position: absolute;z-index: 80;
      width: 185px;
      height: 1px;
      cursor: pointer;
         bottom: 42px;
left:100px;
border-radius: 2px;}
#bt{ --w: 70%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:300px;top:60px;font-size: 14px; 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="yinpin"><img id="tu1" src="https://pic.imgdb.cn/item/645191830d2dde5777a192dc.gif" ></div>
<div id="bfqbj">
<div id="dt"><img id="tu" src="https://pic.imgdb.cn/item/662615500ea9cb14035d435e.gif" ></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<div id="bt">受伤的玫瑰 歌手：魏新雨</div>
</div>
<div data-lrc="亚伦影音工作室" id="lrc" title="歌词显示">亚伦影音工作室</div>
</div>
<audio id="aud" src="https://songs.boonkiong.com/244137952dj.mp3" 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 = `埋葬心中点点对你喜欢
我愿意为你 流光
我愿意为你 流光所有的泪
每一滴都象 征着一次心碎
你的离开让 世界一片漆黑
如同一只 受伤的刺猬
~Music~
海誓山盟的诺言
沧海桑田的变换
一颗愁心拆两半
反正都是与你有关
童言无忌的语言
不堪回首的桥段
离愁别恨的心酸
埋葬心中点点对你喜欢
我愿意为你 流光所有的泪
每一滴都象 征着一次心碎
你的离开让 世界一片漆黑
如同一只 受伤的刺猬
每一次想起 你都会黯然憔悴
细细的品味
心如刀割的滋味
爱恨交错 里没有对错是非
一朵 哭泣的玫瑰
~Music~
海誓山盟的诺言
沧海桑田的变换
一颗愁心拆两半
反正都是与你有关
童言无忌的语言
不堪回首的桥段
离愁别恨的心酸
埋葬心中点点对你喜欢
我愿意为你 流光所有的泪
每一滴都象 征着一次心碎
你的离开让 世界一片漆黑
如同一只 受伤的刺猬
每一次想起 你都会黯然憔悴
细细的品味
心如刀割的滋味
爱恨交错 里没有对错是非
一朵 哭泣的玫瑰
我愿意为你 流光所有的泪
每一滴都象 征着一次心碎
你的离开让 世界一片漆黑
如同一只 受伤的刺猬
每一次想起 你都会黯然憔悴
细细的品味
心如刀割的滋味
爱恨交错 里没有对错是非
一朵 哭泣的玫瑰
☆谢谢欣赏☆
`;
/*变量 ：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-29 15:49

            欣赏老师得精美音画，点赞！

梦油 发表于 2024-4-29 16:46

图美曲好，分享了。问候亚伦！

红影 发表于 2024-4-29 20:28

这小喇叭真漂亮。歌曲好听，制作漂亮，还能一键全控。
欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2024-4-29 23:11

亚伦也是厉害哦，自己制作png播放器，自己做的喇叭动图{:4_178:}

小辣椒 发表于 2024-4-29 23:12

自己ps不用的按钮你就不要做上去了，就打开和停止就可以了

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

你这个播放器样式也是不对，方块地方应该是三角形

小辣椒 发表于 2024-4-29 23:14

现在的按钮就一个，打开，停止都一样了

小辣椒 发表于 2024-4-29 23:16

欣赏亚伦精彩的制作，继续捣鼓啊{:4_173:}

亚伦影音工作室 发表于 2024-4-30 01:23

小辣椒 发表于 2024-4-29 23:14
现在的按钮就一个，打开，停止都一样了

多余的按钮只是装饰，没有不好看！

查看完整版本: 受伤的玫瑰 歌手：魏新雨