论坛 › 动画音画 › 穿过满天的繁星 - 云汐[控]

亚伦影音工作室 发表于 2023-9-7 12:34

穿过满天的繁星 - 云汐[控]

本帖最后由 亚伦影音工作室 于 2023-9-7 12:36 编辑 <br /><br /><style>
#papa {margin: 0px 0 0 calc(50% - 681px); width: 1164px;height:680px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;place-items: center;background: #333 url('https://pic.imgdb.cn/item/64f949fd661c6c8e54389e89.jpg') no-repeat center/cover; position: relative;z-index: 12345;}
#tu{position: absolute;top:0%; left:0%;z-index: 2;
      width: 100%;background:url('https://pic.imgdb.cn/item/64f949fd661c6c8e54389e89.jpg') no-repeat center/cover;
      height: 100%;animation: round 3s linear infinite; }
@keyframes round{
100% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);filter:hue-rotate(360deg);
opacity:0}

0% {
-webkit-transform:rotate(0deg)scale(4)translate(0%,0%);filter:hue-rotate(0deg);
opacity:1}
}
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:2;mix-blend-mode:lighten;}

#lrc { --motion: cover2; --tt: 2s; position: absolute; left: 50%;top:75%;transform: translate(-50%); font:normal 3em 华文新魏; color:#000080;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0); z-index: 5; place-items: center; overflow: hidden; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; place-items: center;}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
#mplayer { position: absolute; left: 0%;top:85%;cursor: pointer;z-index:888; width: 100%;height:100px;mix-blend-mode: exclusion;filter:invert(100%)}
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id='tu'></div>
<div id='dt' ><img id="testImg" src="https://pic.imgdb.cn/item/642a50c2a682492fccd831a0.gif" width="100%" height="100%"></div>
<span id="fullscreen">全屏观赏</span>

<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>

<div id="bnt"><div id="mplayer"><video id="aud" autoplay="autoplay" controls="controls" height="100%" loop="loop" src="https://www.qqmc.com/mp3/music291513405.mp3"width="100%"></video></div></div>

</div>

<script>
(function() {
      let mKey = 0, mFlag = true;
      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 averAdd = 0, offset = 0;
      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));}
var image = document.getElementById("testImg");
varbutton = document.getElementById("bnt");
let mState = () => aud.paused ? image.stop() : image.play();
bnt.onclick = () => {aud.paused ? aud.play() : aud.pause();}
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);


      let geci = `穿过满天的繁星 - 云汐
词：碳基生物
曲：碳基生物
编曲：苏珂
和声编唱：七叶草
混音/母带：李欣懋（Wuli包子）
混音助理：刘明
艺人统筹：庐阳
制作统筹：祁言
监制：何湲
出品：飞行工作室
词曲提供：词曲家
发行：亚伦影音

无尽夜空缓缓被点亮
皎洁月光温暖着目光
我们享受时光的漫长
一切不再那么慌张
微风吹散所有的悲伤
就让我一直陪在你身旁
看世间万物安静的生长
我会陪着你遥望
我和你越过漫天繁星看山川潮汐
无数光影给我指引
迎着风跟随流星轨迹等夜色降临
耀眼光芒落入你眼睛
我和你抓住一缕微风换无边梦境
沉睡其中不愿苏醒
想要送你夏天的风 再一路随行
世间万物的温柔都不及你
微风吹散所有的悲伤
就让我一直陪在你身旁
看世间万物安静的生长
我会陪着你遥望
我和你越过漫天繁星看山川潮汐
无数光影给我指引
迎着风跟随流星轨迹等夜色降临
耀眼光芒落入你眼睛
我和你抓住一缕微风换无边梦境
沉睡其中不愿苏醒
想要送你夏天的风 再一路随行
世间万物的温柔都不及你
我和你越过漫天繁星看山川潮汐
无数光影给我指引
迎着风跟随流星轨迹等夜色降临
耀眼光芒落入你眼睛
我和你抓住一缕微风换无边梦境
沉睡其中不愿苏醒
想要送你夏天的风 再一路随行
世间万物的温柔都不及你
`;
      let lrcAr = getLrcAr(geci);
      let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
      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;}
      aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
      mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();

</script>

<script>

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
      };



tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.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 = '';
      }
      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("testImg"), button = document.getElementById("bnt");
   
</script>

小辣椒 发表于 2023-9-7 13:11

亚伦图图都带LOGO，这个还特别的明显

小辣椒 发表于 2023-9-7 13:11

欣赏亚伦的精彩制作{:4_199:}

红影 发表于 2023-9-7 19:12

又是一个这种类型的播放器呢，漂亮。欣赏亚伦老师好帖{:4_187:}

查看完整版本: 穿过满天的繁星 - 云汐[控]