亚伦影音工作室 发表于 2023-5-8 14:25

韩宝仪 - 冬恋[测试111T网盘]


<style>
#papa {
      margin: 120px-300px;
       place-items: center;
      width: 1164px;
      height: 620px;
   background:#00f000 url(https://pan.111t.net/view.php/414f500db1e5b406f0b195c4a2d45c2d.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;
}
#pp { position: absolute; top: 75%;width: 100%; left:5px; z-index: 5;}
#ptpt{width: 100%;
      height: 100%;display: grid;
left: 0%; top:0%;
background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(242, 9, 9, 0) 28%,rgba(255, 2, 2, 0.62) 65%);

position:absolute;
      z-index: 4;
      opacity: 1;
animation: ptpt 3s infinite linear;
}
@keyframes ptpt{0%{filter:hue-rotate(360deg);}100%{filter:hue-rotate(0deg)}}

#ptpu{width: 400px;display: grid;
         height: 260px;mix-blend-mode:normal;
left: 70%; top:10%;border-radius: 0%;
position:absolute;opacity: 1;
      z-index: 6;transform:translate(0%,0%)scale(0.6);
      overflow:hidden;
}
#ptpn{width: 200px;display: grid;
         height: 80px;
left: 5%; top:60%;
position:absolute;transform: rotateY(180deg);
      z-index: 5;
      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: 25px;--track: #ffffff;--prog: #000000;}

#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{ 0%{opacity: 1;width: 100%;transform: scale(0.4);filter: hue-rotate(0deg)brightness(100%)}
20%{width: 100%;opacity: 1;transform: scale(1.1);filter: hue-rotate(360deg)brightness(100%)}
100%{width: 100%;opacity: 1;transform:scale(1.1);transform: translate(0%, -160px);}}
@keyframes cover2 {0%{width: 0%;opacity: 1;transform: scale(0.4);filter: hue-rotate(0deg)brightness(100%)}
20%{width: 100%;opacity: 1;transform: scale(1.1);filter: hue-rotate(360deg)brightness(100%)}
100%{width: 100%;opacity: 1;transform:scale(1.1);transform: translate(0%, 0%);}}

#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.8em 华文隶书;color:#0000; z-index:100; -webkit-background-clip: text; white-space: pre;transform: translate(-30%, 10px);}
#lrc::before { position: absolute; content: attr(data-lrc); color: transparent; width: 100%; 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"title="亚伦影音">

<div id="ptpt"></div>
<canvas id="pp" title="亚伦影音" ></canvas>
<div id="ptpn"><img id="pp0"src="https://pic2.imgdb.cn/item/645611730d2dde5777c30c2f.gif" width="100%" height="100%"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="ptpu">

<img id="pp1"src="https://pic2.imgdb.cn/item/64518dc30d2dde57779cde74.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://pan.111t.net/view.php/13bd7b8ab9bd60549c1e1cb357433396.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:75%; left: 50%',
                player_css: '--ww: 120px;top:57%;left: 23%;',
                btn_txt: '✳',
      });

      FS({
                pa: papa,
               
set: 'backgroun: #333; color: snow; border: 0px solid snow; bottom: 90%; left: 20px;font:normal 2.5em 华文隶书;',
      });
aud.onerror = () => {
                if(aud.error.code === 4) aud.src='https://pan.111t.net/view.php/13bd7b8ab9bd60549c1e1cb357433396.mp3';
      }
})();

ptpt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>ptpt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>ptpt.style.animationPlayState = 'paused');


(function() { ypData = ;
let total = 120,idx = 0;
      let ctx =pp.getContext('2d');
      let w =pp.width =1164, h = pp.height = 120;
      let slice = w / total, vmax = Math.max.apply(null, ypData);
      aud.loop = false;
      ctx.strokeStyle = '#FFcccc';
      ctx.fillStyle = '#cccccc';
      ctx.font = '14px sans-serif';
      ctx.shadowOffsetX = ctx.shadowOffsetY = 1;
      ctx.shadowBlur = 1;
      ctx.shadowColor = '#000';
      ctx.fillText('play', 100, 50);
      
       aud.addEventListener('ended', () => { idx = 0; aud.play(); });
      aud.addEventListener('timeupdate', () => {
                draw();
                idx ++;
                if(idx > ypData.length - 1) idx = 0;
      });

      let draw = () => {
                let ar = Array(total).fill('0').map( (v,k) => Math.random() * (ypData * h / vmax));
                ctx.clearRect(0,0,w,h);
                ctx.beginPath();
                Array.from({length: total}).forEach((v,k) => ctx.lineTo(slice*k, h - ar));
                ctx.stroke();
                ctx.fillText(toMin(aud.currentTime) + ' / ' + toMin(aud.duration), 950, 30);
      }
      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;};
})();

</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;
            // 透明度还原
             image0.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
image0 = document.getElementById("pp0"),
image1= document.getElementById("pp1"),
button = document.getElementById("mplayer");
button.onclick = function() {
      if (this.value == '') {
             image0.play(); image1.play();
            this.value = '.';
      } else {
             image0.stop(); image1.stop();
            this.value = '';
      }
    };


</script>

小辣椒 发表于 2023-5-8 14:31

测试成功！现在速度杠杠的

小辣椒 发表于 2023-5-8 14:35

就这种变色效果漂亮，简洁的画面，优美的音乐，赞的！

小辣椒 发表于 2023-5-8 14:45

欣赏亚伦精彩的制作

樵歌 发表于 2023-5-8 16:33

欣赏精彩制作，听好听歌曲。{:4_190:}{:4_174:}

醉美水芙蓉 发表于 2023-5-8 17:02

红影 发表于 2023-5-8 18:01

歌词制作很独特。画面漂亮。欣赏亚伦老师好帖{:4_187:}

焱鑫磊 发表于 2023-5-8 18:16

欣赏老师佳作！{:4_187:}{:4_187:}{:4_187:}

马黑黑 发表于 2023-5-8 22:50

楼主的作品越来越精进了

梦缘 发表于 2023-5-9 10:20

好听的歌曲，好看的画面，欣赏点赞！{:4_187:}
页: [1]
查看完整版本: 韩宝仪 - 冬恋[测试111T网盘]