亚伦影音工作室 发表于 2023-5-6 08:42

一生只爱你一次-梅伊伊

<style>
#papa {
      margin: 100px-300px;
       place-items: center;
      width: 1164px;
      height: 620px;
      background:#000000 url(https://file.moyublog.com/d/file/2020-11-30/a9c0893907eac0aa34e302390ffe1910.jpg)no-repeat center/cover; border-radius: 0%;display: grid;
      box-shadow: 0 0px 4px 0px hsla(0,0%,0%,.65);
      user-select: none;
      position: relative;
      z-index: 1;   
       overflow:hidden;
}

#ptpt{width: 100%;
      height: 100%;display: grid;
left: 0%; top:0%;
position:absolute;
      z-index: 4;
      opacity: 0.1;
}
#ptpu{width: 400px;display: grid;
         height: 165px;mix-blend-mode:normal;
left: 65%; top:40%;border-radius: 2%;
position:absolute;opacity: .7;
      z-index: 50;transform:translate(0%,0%)scale(1,1);
      overflow:hidden;
}
#ptpn{width: 200px;display: grid;
         height: 160px;
left: 75%; top:20%;
position:absolute;transform: rotateY(180deg);
      z-index: 51;
      opacity: 1;
}

#ptpm{width: 500px;display: grid;
         height: 620px; mix-blend-mode: difference;
left: 10%; top:0%;-webkit-mask-image: radial-gradient(black 30% ,transparent 80%);
position:absolute;
      z-index: 51;
      opacity: 1;
}

#mplayer {position: absolute;grid-template-columns: auto auto auto;gap: 8px;display: grid;place-items: center;color: var(--color);font: normal 12px sans-serif;z-index: 999;--ww: 500px;--color: #ffffff;--btn_size: 30px;--track: #ffffff;--prog: #FF0000;}

#btnplay {--state: paused;margin-right: -5px;font: bold var(--btn_size) / var(--btn_size) serif;cursor: pointer;animation: rot 4s infinite linear;animation-play-state: var(--state);}
@keyframes rot { to { transform: rotate(1turn); } }
#prog {--xx: 0px;width: var(--ww);height: 2px;border-radius: 8px;background: var(--track
);position: relative;cursor: pointer;}
#prog::before {position: absolute;content: '';width: var(--xx);height: 100%;border-radius: 8px;background: var(--prog);}

@keyframes cover1{ from { width: 0; } to { width: 100%;color: #ff0000; } }
@keyframes cover2 { from { width: 0;color: #00ff00; } to { width: 100%; } }

#lrc { --motion: cover2; --tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(240, 50%, 50%, .25), hsla(240, 30%, 50%, .75));position: absolute;left: 0%; top:0%;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);font:normal 2.5em 华文行楷;color:#000078; z-index:100; transform: translate(-30%, 10px)perspective(200px)rotateY(20deg)rotate(20deg);-webkit-background-clip: text;white-space: pre;-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 10%,#FFFFFF)}
#lrc::before { position: absolute; content: attr(data-lrc); color: transparent; width: 30%; height: 100%;white-space: pre; background:#880000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
</style>

<div id="papa">

<div id="ptpt"><img id="pp"src="http://chuangshicdn.data.mvbox.cn/album/22/06/22/22062210335112503592.gif" width="100%" height="100%"></div>

<div id="ptpm"><img id="pp1"src="https://pic2.imgdb.cn/item/644e2e6c0d2dde5777e7add9.gif" width="100%" height="100%"></div>
<div id="ptpn"><img id="pp0"src="https://pic2.imgdb.cn/item/64309c8c0d2dde577781ae06.gif" width="100%" height="100%"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="ptpu">
<img id="pp2"src="https://pic2.imgdb.cn/item/6453015c0d2dde57770fcd4b.gif" width="100%" height="100%">
<div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
</div>




</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music261198646.mp3" loop autoplay></audio>

<script >
(function() {
      (function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 0px; left: 0%; transform: translateX(-50%);',player_css: 'bottom: 0px; ; transform: translateX(-50%);',btn_txt: '✳',playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;btnplay.innerHTML = data.btn_txt;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;prog.style.setProperty('--xx', prg + 'px');for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.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;}};mkPlayer.HCPlayer = playCode;})(this);
      (function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow;background: black; border: 0px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
      let averAdd = 0, offset = 0;
      let geci = `一生只爱你一次-梅伊伊
作词：宋樸
作曲：灰色幽默
出品：亚伦
封面设计：梦瑶
出品：亚伦影音工作室
字幕设计：亚伦
吞了爱的痴情药见你那一秒
想你想到睡不着想把你依靠
心中有把火在烧烧到天破晓
是你的微笑让我想甩甩不掉
祈愿天荒和地老天涯和海角
就算窗外风雨飘有你就静好
向全世界去宣告心只为你跳
我要陪你在人间幸福到老
一生我只爱你一次一次爱你一生
你是往后余生的路程
我不要天地为我见证我只要你感动
我要做你四季的春风
一生我只爱你一次一次爱你一生
你是锁住爱情的牢笼
我的心无时无刻沸腾爱你有始无终
和你相拥这片红尘中
祈愿天荒和地老天涯和海角
就算窗外风雨飘有你就静好
向全世界去宣告心只为你跳
我要陪你在人间幸福到老
一生我只爱你一次一次爱你一生
你是往后余生的路程
我不要天地为我见证我只要你感动
我要做你四季的春风
一生我只爱你一次一次爱你一生
你是锁住爱情的牢笼
我的心无时无刻沸腾爱你有始无终
和你相拥这片红尘中
一生我只爱你一次一次爱你一生
你是往后余生的路程
我不要天地为我见证我只要你感动
我要做你四季的春风
一生我只爱你一次一次爱你一生
你是锁住爱情的牢笼
我的心无时无刻沸腾爱你有始无终
和你相拥这片红尘中
我的心无时无刻沸腾爱你有始无终
和你相拥这片红尘中`;
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;};
      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));}

      HCPlayer({
                lrcAr: getLrcAr(geci),
                lrc_css: ' --bg: linear-gradient(hsla(90,80%,50%,.35),hsla(100,70%,45%,.6)); top:70%; left: 40%',
                player_css: '--ww: 120px;top:80%;left: 35%;',
                btn_txt: '✳',
      });

      FS({
                pa: papa,
               
set: 'backgroun: #333; color: snow; border: 0px solid snow; bottom: 90%; left: 20px;font:normal 2em 华文行楷;',
      });



      

      aud.onerror = () => {
                if(aud.error.code === 4) aud.src='http://antiserver.kuwo.cn/anti.s?rid=MUSIC_263613736&response=res&format=mp3|aac&type=convert_url&br=128kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3';
      }
})();
</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 = ''; image0.style.opacity = '';image1.style.opacity = '';image2.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("pp"),
image0 = document.getElementById("pp0"),
image1 = document.getElementById("pp1"),
image2 = document.getElementById("pp2"),
button = document.getElementById("mplayer");

    if (image1 &&image0 &&image && button) {
    button.onclick = function() {
      if (this.value == '') {
         image.play();    image0.play(); image1.play(); image2.play();
            this.value = '.';
      } else {
            image.stop();   image0.stop();image1.stop(); image2.stop();
            this.value = '';
      }
    };
}

</script>

樵歌 发表于 2023-5-6 09:31

亚伦影音出品，果然音乐大伽范儿！

红影 发表于 2023-5-6 13:52

带倒影的歌词同步，制作真漂亮。欣赏亚伦老师好帖{:4_199:}

梦缘 发表于 2023-5-6 20:25

真美啊，歌很好听，欣赏点赞！{:4_187:}

小辣椒 发表于 2023-5-9 22:30

亚伦这个发现手机和电脑出来效果有点不一样，你测试一下。。。

小辣椒 发表于 2023-5-9 22:32

这种类型的一键点击有好几个，我都测试了，发现电脑可以的，手机点击音乐出来蝴蝶不动了，是不是这样，亚伦手机测试一下。。。

小辣椒 发表于 2023-5-9 22:44

你手机测试后告诉我，我的就是手机效果不一样不敢发

亚伦影音工作室 发表于 2023-5-10 05:49

小辣椒 发表于 2023-5-9 22:44
你手机测试后告诉我，我的就是手机效果不一样不敢发

手机有时控制失效，但电脑可以，多是因为网速问题！

小辣椒 发表于 2023-5-10 18:08

亚伦影音工作室 发表于 2023-5-10 05:49
手机有时控制失效，但电脑可以，多是因为网速问题！

我感觉网速不是问题，我最快的光纤速度，但很奇怪，我手机和电脑效果是相反的，所以郁闷的，点击按钮动图不动了
页: [1]
查看完整版本: 一生只爱你一次-梅伊伊