亚伦影音工作室 发表于 2023-5-4 10:12

不专一的心 (变调版) - 魏佳艺

本帖最后由 亚伦影音工作室 于 2023-5-6 12:04 编辑 <br /><br /><style>
#papa {
      margin: 50px-300px;
       place-items: center;
      width: 1164px;
      height: 620px;
      background: gray url(https://file.moyublog.com/d/file/2020-11-30/d5997cb1feae46f8ea62635bc9868c00.jpg) center/cover no-repeat; 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%; mix-blend-mode:soft-light;
position:absolute;
      z-index: 2;
      opacity: 1;
}
#ptpu{width: 400px;display: grid;
         height: 165px;mix-blend-mode:normal;
left: 65%; top:40%;border-radius: 2%;
position:absolute;opacity: .8;
      z-index: 50;
      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: 3;
      opacity: 0;
}

#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%; } }
@keyframes cover2 { from { width: 0; } 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 3em 华文行楷;color:#000078; z-index:100; transform: translate(-30%, 10px);-webkit-background-clip: text;white-space: pre;}
#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="https://pic2.imgdb.cn/item/64530d620d2dde57771b08ca.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/music273182005.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: 50px; 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:80%; 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-4 12:05

梦缘 发表于 2023-5-4 20:22

真好听，欣赏问好老师！{:4_187:}

小辣椒 发表于 2023-5-4 20:59

亚伦速度的，今天做了2个帖{:4_178:}

绿叶清舟 发表于 2023-5-4 21:21

欣赏好贴 ，这声音喜欢

红影 发表于 2023-5-5 10:16

播放器衬图又有变化呢。亚伦老师的作品真美妙{:4_187:}
页: [1]
查看完整版本: 不专一的心 (变调版) - 魏佳艺