花妖 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

亚伦影音工作室 发表于 2025-10-26 13:43

花妖

本帖最后由亚伦影音工作室于 2025-10-26 15:06 编辑 <br /><br /><style>

   .main{
         position: relative;
         width: 1250px; background: #000;
         background:url(https://pic1.imgdb.cn/item/6732aa3bd29ded1a8cf96a8e.webp)no-repeat center/cover;
         height: 720px;
         margin: 0 -300px;
         overflow: hidden;
   }


   #lrc{
         position: absolute;
      z-index: 99;
         height: 100px; /* 调整高度，只容纳当前歌词 */
            left: 50%;
         top: 90%;
         transform: translateX(-50%);
}
   #lrcbox {bottom: 0px;position: relative;
         color: #fff;filter: drop-shadow(#000078 2px 0 0) drop-shadow(#000078 0 2px 0) drop-shadow(#000078 -2px 0 0) drop-shadow(#000078 0 -2px 0);
         height: 100px;
         text-align: center;
         font: 300 45px 华文隶书;

white-space: nowrap;
   }
   #lrcbc {
         overflow: hidden;
            left: 0%; bottom: 50px;
         color: #880000;
         height: 100px;
position: relative;
   text-align: center;
font: 300 45px 华文隶书;

      white-space: nowrap;
            filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);

   }
   #play-tip {
         position: absolute;
         bottom: 20px;
         right: 130px;
         color: white;
         font-size: 1.1rem;
         font-weight: 500;
         background: linear-gradient(45deg,
            #ff0000, #ff0000, #ff4500, #ffd700, #00ff7f, #1e90ff, #9370db, #ff69b4);
         background-size: 400% 400%;
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
         text-shadow: 0 1px 2px rgba(0,0,0,0.2);
         padding: 8px 16px;
         border-radius: 20px;
         background-color: rgba(0, 0, 0, 0);
         backdrop-filter: blur(5px);
         transition: all 0.3s ease;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0);
         z-index: 9;
   }


   #play-tip:hover {
         transform: scale(1.15);

         background-color: #000077;
   }

   @keyframes rainbow {
         0% { background-position: 0% 50%; }
         50% { background-position: 100% 50%; }
         100% { background-position: 0% 50%; }
   }

   @keyframes flicker {
         from { opacity: 0.8; }
         to { opacity: 1; }
   }

   #rotating-text-btn {
         position: absolute;
         left: 80%;
         top: 30%;
         transform: translate(-50%, -50%);
         z-index: 9999;
         cursor: pointer;
         width: 200px;
         height: 200px;
color:#000078;
         display: flex;
         align-items: center;
         justify-content: center;
   }

   .rotating-char {
         position: absolute;
         font-family: Arial;
         font-size: 14px;
         color: #00ff00;
         text-align: center;
         transition: all 0.3s ease;
         pointer-events: none;
         text-shadow:
            0 0 5px #00ff00,
            0 0 10px #00ff00,
            0 0 15px #00ff00;
         font-weight: bold;
   }

   .rotating-char:hover {
         color: #ffffff;
         text-shadow:
            0 0 10px #ffffff,
            0 0 20px #ffffff,
            0 0 30px #ffffff;
   }

   #video-overlay {
         position: absolute;
         top: 0px;
         right: 0px;
         width: 100%;
         height: 100%;
         z-index: 3;
         opacity: .9;
         transition: opacity 0.05s ease;
      animation: opa 3s infinite alternate linear;
   }
   #video-source {
         display: none;
   }

   @keyframes opa {
         to { opacity: 0; }
   }
.llz {
position: absolute;
left:23px;
width: 40px;
top: 270px;
height: 240px;
text-align: center;
color: #fff;
line-height: 100%;
font: 400 1.5em cursive;
z-index: 1;
opacity: 1;
text-shadow:
   -1px -1px 0 #000,
   1px -1px 0 #000,
   -1px 1px 0 #000,
   1px 1px 0 #000;
writing-mode: vertical-rl;

}
</style>

<body onload="initPage()">
<div class="main" >
<audio id="audio-player" loop>
   <source src="https://s2.cldisk.com/sv-w9/audio/6c/43/1d/84574cfe1d7c6fcad1681d5bc699fc27/audio.mp3" type="audio/mpeg">
   </audio>
<div class="llz">亚伦影音工作室音画</div>
<div id="play-tip">播放中</div>
<div id="lrc">
<span id="lrcbox"></span>
<div id="lrcbc"></div>
</div>
<canvas id="video-overlay"></canvas>
   <video id="video-source" muted loop>
         <source src="https://cccimg.com/view.php/8c31c721a9747591c6fbb12082e99ae5.mp4" type="video/mp4">
   </video>


<div id="rotating-text-btn" title="播放/暂停"></div>
</div>
<div id="lrcdata" style="display:none">
《花妖》
刀郎演唱
亚伦影音工作室出品
我是那年轮上流浪的眼泪
你仍然能闻到风中的胭脂味
我若是将诺言刻在那江畔上
一江水冷月光满城的汪洋
我在时间的树下等了你很久
尘凡儿缠我谤我笑我白了头
你看那天边追逐落日的纸鸢
像一盏回首道别夤夜的风灯
亚伦影音工作室
我的心似流沙放逐在车辙旁
他日你若再返必颠沛在世上
若遇那秋夜雨倦鸟也淋淋
那却是花墙下弥留的枯黄
君住在钱塘东
妾在临安北
君去时褐衣红
小奴家腰上黄
寻差了罗盘经
错投在泉亭
奴辗转到杭城
君又生余杭
我在时间的树下等了你很久
尘凡儿缠我谤我笑我白了头
你看那天边追逐落日的纸鸢
像一盏回首道别夤夜的风灯
亚伦影音工作室
君住在钱塘东
妾在临安北
君去时褐衣红
小奴家腰上黄
寻差了罗盘经
错投在泉亭
奴辗转到杭城
君又生余杭
</div>
</body>
<script>
// 全局状态统一管理
let isPlaying = true;
let opacity = 1;
let increasing = true;
const minOpacity = 15;
const maxOpacity = 99;
const step = 1;
const interval = 70;

const audioPlayer = document.getElementById('audio-player');
const playTip = document.getElementById('play-tip');
const rotatingText = "花妖亚伦影音工作室";
const charElements = [];
let rotationAngle = 0;
const rotationSpeed = 0.5;
const radius = 80;
let animationId = null;

// 视频叠加相关变量
const overlayCanvas = document.getElementById('video-overlay');
const overlayCtx = overlayCanvas.getContext('2d');
const videoSource = document.getElementById('video-source');

// 视频播放状态标志
let videoReady = false;
let canvasDrawing = false;

// 格式化时间显示 - 支持负数
function formatTime(seconds) {

   const absSeconds = Math.abs(seconds);
   const mins = Math.floor(absSeconds / 60);
   const secs = Math.floor(absSeconds % 60);

   const sign = seconds < 0 ? '-' : '';
   return `${sign}${mins}:${secs < 10 ? '0' : ''}${secs}`;
}

// 更新播放状态显示
function updatePlayTip() {
   if (isPlaying) {

         const remainingTime = audioPlayer.duration - audioPlayer.currentTime;
         playTip.textContent = `播放中: ${formatTime(-remainingTime)}`;
         videoSource.play();
overlayCanvas.style.animation = 'opa 3s infinitelinear';
         playTip.style.animation = 'rainbow 8s ease infinite';
   } else {
         playTip.textContent = '已暂停';
      videoSource.pause();
overlayCanvas.style.animation = 'opa 0s infinitelinear';
         playTip.style.animation = 'none';
   }
}

function updateFade() {
   if (isPlaying) {
         if (increasing) {
            opacity += step;
            if (opacity >= maxOpacity) {
               opacity = maxOpacity;
               increasing = false;
            }
         } else {
            opacity -= step;
            if (opacity <= minOpacity) {
               opacity = minOpacity;
               increasing = true;
            }
         }

         setTimeout(updateFade, interval);
   }
}

//歌词处理模块
class LrcClass {
   constructor(lyricText) {
         this.inr = [];
         this.oTime = 0;
         this.dte = -1;
         this.parseLyric(lyricText);
   }

   parseLyric(tt) {
         tt = tt.replace(/\[[^\[\]]*\:[^\[\]]*[^\[\]\d\.]+[^\[\]]*\]/g, "");
         while (/\[[^\[\]]+\:[^\[\]]+\]/.test(tt)) {
            tt = tt.replace(/((\[[^\[\]]+\:[^\[\]]+\])+[^\[\r\n]*)[^\[]*/, "\n");
            const zzzt = RegExp.$1;
            /^(.+\])([^\]]*)$/.exec(zzzt);
            const ltxt = RegExp.$2;
            const eft = RegExp.$1.slice(1, -1).split("][");
            for (let ii = 0; ii < eft.length; ii++) {
               const sf = eft.split(":");
               const tse = parseInt(sf, 10) * 60 + parseFloat(sf);
               const sso = { t: , w: [], n: ltxt };
               this.inr.push(sso);
            }
         }
         const lrcbc = document.getElementById('lrcbc');
         for (let ii = 0; ii < this.inr.length; ii++) {
            while (/<[^<>]+\:[^<>]+>/.test(this.inr.n)) {
               this.inr.n = this.inr.n.replace(/<(\d+)\:([\d\.]+)>/, "%=%");
               const tse = parseInt(RegExp.$1, 10) * 60 + parseFloat(RegExp.$2);
               this.inr.t.push(tse - this.oTime);
            }
            lrcbc.innerHTML = `<font>${this.inr.n.replace(/&/g, "&").replace(/</g, "<").replace(/>/g,

">").replace(/%=%/g, "</font><font>")} </font>`;
            const fall = lrcbc.getElementsByTagName("font");
            for (let wi = 0; wi < fall.length; wi++) {
               this.inr.w.push(fall.offsetWidth);
            }
            this.inr.n = lrcbc.innerText;
         }
   }

   run(currentTime) {
         if (!isPlaying) return;
         let index;
         for (index = this.inr.length - 1; index >= 0 && this.inr.t > currentTime; index--) {}
         if (index < 0) return;
         this.ddh = this.inr.t;
         this.fjh = this.inr.w;
         this.dte = (index < this.inr.length - 1) ? this.inr.t : audioPlayer.duration;
         this.print(this.retxt(index));

         let bbw = 0;
         let ki;
         for (ki = 0; ki < this.ddh.length && this.ddh <= currentTime; ki++) {
            bbw += this.fjh;
         }
         const kt = ki - 1;
         if (kt >= 0) {
            const sc = (ki < this.ddh.length ? this.ddh : this.dte) - this.ddh;
            const tc = currentTime - this.ddh;
            bbw -= this.fjh - (tc / sc) * this.fjh;
         }
         const lrcbox = document.getElementById('lrcbox');
         if (bbw > lrcbox.offsetWidth) bbw = lrcbox.offsetWidth;
         lrcbc.style.width = `${Math.round(bbw)}px`;
   }

   retxt(index) {
         return (index < 0 || index >= this.inr.length) ? "" : this.inr.n;
   }

   print(txt) {
         const lrcbox = document.getElementById('lrcbox');
         const lrcbc = document.getElementById('lrcbc');
         lrcbox.textContent = txt;
         lrcbc.textContent = txt;
   }
}

function lrcRun(lrcObj) {
   if (isPlaying) {
         lrcObj.run(audioPlayer.currentTime);
         updatePlayTip();
   }
   requestAnimationFrame(() => lrcRun(lrcObj));
}

// 初始化旋转文字按钮
function initRotatingTextButton() {
   const container = document.getElementById('rotating-text-btn');
   rotatingText.split('').forEach((char, index) => {
         const charElement = document.createElement('div');
         charElement.className = 'rotating-char';
         charElement.textContent = char;

         const hue = index * (360 / rotatingText.length);
         charElement.style.color = `hsl(${hue}, 100%, 50%)`;
         charElement.style.textShadow = `
            0 0 0px hsl(${hue}, 80%, 50%),
            0 0 0px hsl(${hue}, 80%, 50%),
            0 0 0px hsl(${hue}, 80%, 50%)`;
         container.appendChild(charElement);
         charElements.push(charElement);
   });

   animateRotation();
}

// 旋转动画设置
function animateRotation() {
   if (isPlaying) {
         rotationAngle += rotationSpeed;
   }
      charElements.forEach((charElement, index) => {
         const angle = rotationAngle + index * (360 / charElements.length);
         const radians = angle * (Math.PI / 180);
         const x = Math.cos(radians) * radius;
         const y = Math.sin(radians) * radius;
         const zDepth = Math.sin(radians) * 20;
         const scale = 1 + zDepth / 100;
         const opacity = 0.7 + Math.abs(y) / (radius * 2);
         charElement.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
         charElement.style.fontSize = `${16 + Math.abs(y) / 4}px`;
         charElement.style.opacity = opacity;
         charElement.style.zIndex = Math.round(zDepth + 100);
         const hue = index * (360 / charElements.length);
         const shadowIntensity = 0.5 + Math.abs(y) / (radius * 2);
         charElement.style.textShadow = `
            0 0 ${1 * shadowIntensity}px hsl(${hue}, 100%, 0%),
            0 0 ${1 * shadowIntensity}px hsl(${hue}, 100%, 0%),
            0 0 ${1 * shadowIntensity}px hsl(${hue}, 100%, 0%)`;
   });

   animationId = requestAnimationFrame(animateRotation);
}

// 播放/暂停切换
function togglePlay() {
   isPlaying = !isPlaying;

   if (isPlaying) {
         audioPlayer.play();
         if (videoReady) {
            videoSource.play().catch(e => console.log('叠加视频播放失败:', e));
            overlayCanvas.style.opacity = '0.7';
         }
         updatePlayTip();
         updateFade();
         drawVideoToCanvas();
   } else {
         audioPlayer.pause();
         videoSource.pause();
         overlayCanvas.style.opacity = '0.7';
         updatePlayTip();
   }
}

//在画布上绘制视频
function drawVideoToCanvas() {
   if (!videoReady || canvasDrawing) return;
   canvasDrawing = true;

   try {

         if (videoSource.readyState < 2) {
            canvasDrawing = false;
            return;
         }

         overlayCtx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);

         const scaleRatio = 0.5;
         const videoWidth = videoSource.videoWidth * scaleRatio;
         const videoHeight = videoSource.videoHeight * scaleRatio;

         overlayCtx.drawImage(
            videoSource,
            0, 0, videoSource.videoWidth, videoSource.videoHeight,
            0, 0, videoWidth, videoHeight
         );
   } catch (e) {
         console.error('绘制视频出错:', e);
   } finally {
         canvasDrawing = false;
         if (isPlaying) {
            requestAnimationFrame(drawVideoToCanvas);
         }
   }
}

// 重置视频状态
function resetVideo() {
   videoReady = false;
   videoSource.currentTime = 0;
   videoSource.load();

   const checkVideoReady = () => {
         if (videoSource.readyState >= 2) {
            videoReady = true;
            if (isPlaying) {
               videoSource.play().catch(e => console.log('视频播放失败:', e));
               overlayCanvas.style.opacity = '0.7';
               drawVideoToCanvas();
            } else {
               overlayCanvas.style.opacity = '0.7';
            }
         } else {
            setTimeout(checkVideoReady, 100);
         }
   };

   checkVideoReady();
}

// 全局控制模块
function initPage() {

   opacity = minOpacity;


updateFade();


   const lrcData = document.getElementById('lrcdata').textContent;
   const lrcObj = new LrcClass(lrcData);
   lrcRun(lrcObj);

   initRotatingTextButton();


   document.getElementById('rotating-text-btn').addEventListener('click', togglePlay);


   overlayCanvas.width = 600;
   overlayCanvas.height = 300;
   overlayCanvas.style.opacity = '0.7'; // 可修改


   resetVideo();


   videoSource.addEventListener('loadedmetadata', () => {
         videoReady = true;
         if (isPlaying) {
            videoSource.play().catch(err => console.log('视频自动播放失败:', err));
            overlayCanvas.style.opacity = '0.7';
            drawVideoToCanvas();
         }
   });

   videoSource.addEventListener('error', () => {
         console.error('视频加载失败:', videoSource.error);

         setTimeout(resetVideo, 1000);
   });
}

// 页面刷新时重置视频
window.addEventListener('beforeunload', () => {
   videoSource.pause();
   videoSource.currentTime = 0;
});
audioPlayer.play();
</script>

杨帆发表于 2025-10-26 16:37

漂亮！谢谢亚伦老师精彩分享{:4_191:}

红影发表于 2025-10-26 16:54

转动字的小播中，文字还是变化，靠下面的字比较大，一圈的转动中，每个字都变化着。
背景和视频也好看，欣赏亚伦老师好帖{:4_199:}

红影发表于 2025-10-26 16:56

也许是经常听到这首，忽然特别喜欢这首歌，非常好听{:4_187:}
不错在轮回中错过的花妖，让人心生怜惜。

老谟深虑 发表于 2025-10-26 18:52

欣赏老师的精彩音画，点赞！

小辣椒 发表于 2025-10-26 21:06

亚纶这个整体设置很漂亮的，特别背景的效果很自然的变换{:4_199:}

小辣椒 发表于 2025-10-26 21:07

但感觉下面的歌词同步字体出来还是间隔稍微大了一点，

小辣椒 发表于 2025-10-26 21:08

亚纶制作辛苦的，新品不断，赞的！{:4_199:}

寒冬残荷 发表于 2025-10-27 13:37

红影发表于 2025-10-26 16:54
转动字的小播中，文字还是变化，靠下面的字比较大，一圈的转动中，每个字都变化着。
背景和视频也好看，欣 ...

这个背景视频是我用我的照片AI图生视频。

红影发表于 2025-10-29 21:15

寒冬残荷发表于 2025-10-27 13:37
这个背景视频是我用我的照片AI图生视频。

嗯嗯，你的照片AI后好美啊{:4_187:}

页: [1]

花潮论坛's Archiver

花妖