论坛 › 欢乐水吧 › 长路漫漫 情依依[BFQ模块]

亚伦影音工作室 发表于 2026-5-13 17:14

长路漫漫 情依依[BFQ模块]

本帖最后由 亚伦影音工作室 于 2026-5-15 20:36 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
:root {--ocean-dark: #0a3d62;--ocean-medium: #3c6382;--ocean-light: #60a3bc;--sand-color: #f5e1b5;--shell-light: #f0e6d2;--shell-dark: #d9c9a3;--color-1: #fff887;--color-2: #fc89e5;--color-3: #fd27d2;--color-4: #9cf9fc;--color-5: #0dd7de;--color-6: #fbcb6d;--color-7: #fb8739;--color-8: #fa5f57;--starfish-body: #fb2f39;--starfish-accent: #fb2f39;--starfish-light: #fbb5b8;}
#papa {position: relative;display: grid;place-items: center;margin: 30px 0;width: 1260px;height: 720px;left: calc(50% - 81px);transform: translateX(-50%);box-shadow: 3px 3px 6px gray;overflow: hidden;z-index: 10000;background:url(https://pic1.imgdb.cn/item/6a043d8b6f6a2d474b49f2a1.png) no-repeat center/cover;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
      .intro {margin: 0px0px;z-index:1;
      width: 100%;
      height:100%;
      position: absolute;
background:linear-gradient(180deg, rgba(255, 0, 0, 0) 90%, rgba(8, 8, 13, 0.98)100%),url(https://pic1.imgdb.cn/item/6a043d8b6f6a2d474b49f2a1.png), linear-gradient(45deg, #e56420, #c555aa, #3d9c31, #37bbde);
background-size: cover;
background-blend-mode: hard-light;
animation: hue-rotate 2s linear infinite;
}
@keyframes hue-rotate {
from {
   filter: hue-rotate(0);
}
to {
   filter: hue-rotate(360deg);
}
}

#lyric {position: absolute;left: 50%;bottom: 3%;transform: translateX(-50%);z-index: 12;display: flex;flex-direction: column;justify-content: center;height: 160px;width: 80%;text-align: center;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);font:3em "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
#lyricDisplay{height: 100%;letter-spacing: 0px;display: flex;align-items: center;justify-content: center;overflow: hidden;position: relative;padding: 0 1em;width: 100%;}
.lyrichar {display: inline-block;opacity: 0;animation: charAppear 0.5s forwards,hue-rotate 1.5s linear infinite;margin: 0 2px;}
@keyframes charAppear {to {opacity: 1;transform: translate(0%);}}
@keyframes hue-rotate {50%{ filter: hue-rotate(360deg); }}
.stop .lyrichar{animation-play-state: paused;}
#bnt{left: 10px;bottom: 10px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;height: 50px;border-radius: 0%;cursor: pointer; }
#bnt:hover { mask: unset; }
#pic{position:absolute;top:25px; left:28px;background:#fff;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:22px;
      height: 22px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#fff; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:22px;
      height: 22px}
#tmsg {position:absolute; z-index: 4;
      font: normal 13px sans-serif;
      color: #fff;
         bottom: 28px;
      left:64%;}
#prog {position:absolute;z-index: 40;
      width: 58%;
      height: 4px;background:#fff;
      cursor: pointer;
         bottom: 32px;border-radius: 20px;
left:5%;
}
#prog-bar {
            height: 100%;
            background: #ff6500;
            width: 0%;border-radius: 20px;
      }
      
   #dt{z-index: 40;
      position:absolute;
      width: 35px;
      height: 34px;filter:invert(0%);
      bottom: 16px;border-radius: 0px;
   left: 72%;
      cursor: pointer;
    }
#mutedbnt{z-index: 40;
   width: 25px;
      height: 24px;
      filter:invert(0%);
   left: 0%;
      cursor: pointer;
    }

#volumeSlider{bottom: 42px;left: 75%;z-index: 40;
             position:absolute;
         width: 17%; height: 3px;border-radius: 20px;

}
input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
::-webkit-slider-runnable-track {
    height: 4px;border-radius: 20px;
    background: #eee;
}
::-webkit-slider-container {
    height: 18px;border-radius: 30px;
    overflow: hidden;
}
::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f44336;
    border: 1px solid transparent;
    margin-top: -4px;
    border-image: linear-gradient(#f44336,#f44336) 0 fill / 4 10 4 0 / 0px 0px 0 2000px;
}

#loopbnt{z-index: 40;
      position:absolute;
      width: 22px;filter:invert(100%);
      height: 18px;background:#0000;
      bottom: 25px;border-radius: 0px;
   right: 60px;
      cursor: pointer;
    }   
      
#statusDisplay{position: absolute;z-index: 1;font-size: 1.5em;font-weight: 300;left: 12%;top: 11%;color:#000}

#fullscreen { opacity:1;position: absolute; width: 20px; height: 20px;   bottom:26px; cursor: pointer;right:1%;z-index: 40;filter:invert(0%);}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 20px; height: 20px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 20px; height: 20px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="papa">
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div class='intro'></div>
<divid="statusDisplay">播放中: -2:20 </div>

<div id="bnt">
<div id="pic"></div>
<div id="picc"></div>
</div>
<div id="tmsg">00:00|00:00</div>
<div id="prog" title="播放进度条"><div id="prog-bar"><div class="now"></div></div></div>
<div id="dt">
<img src="https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif"id="mutedbnt" onClick="pc()"/>
</div>
<inputtype="range" min="0.1" max="1" step="0.1" value="0.8" id="volumeSlider" >
<br>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />
<div id="testImg" >
<div id="lyric">
<div id="lyricDisplay" ></div>
</div>
</div>
<audio id="aud" controls src="https://file.uhsea.com/2605/85c6a4302287f8e911de666b30e089f4TF.mp3" loop autoplay ></audio>
</div>
<script>
const papa = document.getElementById('papa');
const audioPlayer = document.getElementById('aud');
const starfishPlayer =document.getElementById('bnt');
const lyricDisplay = document.getElementById('lyricDisplay');
const statusDisplay = document.getElementById('statusDisplay');

let currentLyricIndex = -1;
let isUpdating = false;
window.isPlaying = false;
let isMuted = true;
let fsTimer = null;
let sparkleInterval = null;
function createSingleSparkle() {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle';
const x = Math.random() * 100;
const y = Math.random() * 100;
sparkle.style.left = `${x}%`;
sparkle.style.top = `${y}%`;
sparkle.style.animationDelay = `${Math.random() * 2}s`;
sparkle.style.setProperty('--tx', `${(Math.random() - 0.5) * 80}px`);
sparkle.style.setProperty('--ty', `${(Math.random() - 0.5) * 80}px`);
sparklesContainer.appendChild(sparkle);
setTimeout(() => {
if (sparkle && !sparkle.classList.contains('hidden')) {
sparkle.remove();
}
}, 3000);
}
function startSparkleLoop() {
stopSparkleLoop();
sparklesContainer.classList.remove('fade-out');
sparklesContainer.style.opacity = 1;
sparklesContainer.innerHTML = '';
for (let i = 0; i < 15; i++) {
createSingleSparkle();
}
sparkleInterval = setInterval(() => {
if (window.isPlaying) {
createSingleSparkle();
}
}, 500);
}
function stopSparkleLoop() {
clearInterval(sparkleInterval);
sparkleInterval = null;
}
function fadeOutAllSparkles() {
stopSparkleLoop();
sparklesContainer.classList.add('fade-out');
document.querySelectorAll('.sparkle').forEach(sparkle => {
sparkle.classList.add('hidden');
});
setTimeout(() => {
sparklesContainer.innerHTML = '';
}, 800);
}
function resetLyrics() {
currentLyricIndex = -1;
lyricDisplay.innerHTML = '';
}
function togglePlayPause() {
if (audioPlayer.paused) {
if (audioPlayer.currentTime <= 0.5) {
resetLyrics();
}
audioPlayer.play()
.then(() => {

window.isPlaying = true;
starfishPlayer.classList.remove('paused');
starfishPlayer.classList.add('playing');
statusDisplay.textContent = '播放中...';
startSparkleLoop();
})
.catch(error => {
console.error('播放失败:', error);
statusDisplay.textContent = '播放失败，请检查音频文件';
});
} else {
audioPlayer.pause();
document.getElementById('testImg').classList.add('stop') ;
window.isPlaying = false;
starfishPlayer.classList.remove('playing');
starfishPlayer.classList.add('paused');
statusDisplay.textContent = '已暂停';
fadeOutAllSparkles();
}
}
audioPlayer.addEventListener('play', () => {
animatedGif.classList.add('active');
staticImage.classList.remove('active');
});
audioPlayer.addEventListener('pause', () => {
staticImage.classList.add('active');
animatedGif.classList.remove('active');
});
starfishPlayer.addEventListener('click', (e) => {
e.stopPropagation();
document.getElementById('testImg').classList.remove('stop');
togglePlayPause();
});
function displayLyricCharByChar(text) {
lyricDisplay.innerHTML = '';
const chars = text.split('');
const colorList = ['var(--color-1)', 'var(--color-2)', 'var(--color-3)', 'var(--color-4)', 'var(--color-5)', 'var(--color-6)'];
chars.forEach((char, i) => {
const span = document.createElement('span');
span.className = 'lyrichar';
span.style.color = colorList;
if (char === ' ') {
span.innerHTML = '&nbsp;';
} else {
span.textContent = char;
}
const offset = i === 0 ? 0 : i * 30;
span.style.transform = `translateY(${offset}px)`;
span.style.animationDelay = `${i * 0.08}s`;
if (/[，。！？,.!?]/.test(char)) {
span.style.animationDelay = `${i * 0.08 + 0.08}s`;
}
lyricDisplay.appendChild(span);
});
}
audioPlayer.addEventListener('timeupdate', () => {
if (!window.isPlaying) return;
if (isUpdating) return;
isUpdating = true;
setTimeout(() => isUpdating = false, 100);
const currentTime = audioPlayer.currentTime;
const remainingTime = audioPlayer.duration - currentTime;
statusDisplay.textContent = `播放中: ${formatTime(-remainingTime)}`;
for (let i = 0; i < lyrics.length; i++) {
const currentLyricTime = lyrics.time;
const nextLyricTime = i < lyrics.length - 1 ? lyrics.time : Infinity;
if (currentTime >= currentLyricTime - 0.3 && currentTime < nextLyricTime + 0.3) {
if (currentLyricIndex !== i) {
currentLyricIndex = i;
displayLyricCharByChar(lyrics.text);
}
break;
}
}
});
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}`;
}
const lrcText = `
长路漫漫 情依依
词曲：晚妹儿
制作人：亚伦
演唱：晚妹儿
出品：亚伦影音
长路漫漫 情依依
山野万万 清风里
睁眼是你闭眼是你
求佛圆了我的期许
转山转水不容易
我把誓言刻心底
若非前世 苦苦追寻
今生又怎能相遇
海棠花开又一季
情话只说给你听
风过千里 人间有情义
对你的爱不转不移
晓看天晴暮看云
月色里与你相依
往后余生 守护着你
陪你看春来冬去
lalalalalala
世间万千种相遇
唯有你是命中注定
你走向我 我走向你
陪伴胜过千言万语
从此云雾落城际
一人撑伞两人行
你中有我 我中有你
海枯石烂不分离

`;
function parseLrc(lrc) {
const lyrics = [];
const lines = lrc.trim().split('\n');
const lrcRegex = /\[(\d{2}):(\d{2})\.(\d{2})\](.*)/;
lines.forEach(line => {
const match = line.match(lrcRegex);
if (match) {
const minutes = parseInt(match);
const seconds = parseInt(match);
const ms = parseInt(match);
const totalSeconds = minutes * 60 + seconds + ms / 100;
const text = match.trim();
lyrics.push({
time: totalSeconds,
text: text
});
}
});
return lyrics;
}
const lyrics = parseLrc(lrcText);
audioPlayer.addEventListener('ended', () => {
resetLyrics();
starfishPlayer.classList.remove('playing');

starfishPlayer.classList.add('paused');

statusDisplay.textContent = '播放结束，可重新播放';
window.isPlaying = false;
fadeOutAllSparkles();
});
audioPlayer.addEventListener('loadedmetadata', () => {
statusDisplay.textContent = '音频已加载，点击播放开始';
tryAutoPlay();
});

audioPlayer.addEventListener('error', (e) => {
console.error('音频错误:', e);
statusDisplay.textContent = '音频加载失败，请检查文件路径';
});
function tryAutoPlay() {
audioPlayer.play()
.then(() => {

window.isPlaying = true;
starfishPlayer.classList.remove('paused');
starfishPlayer.classList.add('playing');
statusDisplay.textContent = '音乐加载中...';
startSparkleLoop();
})
}
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}

</script>
<script>
const intro= document.querySelector('.intro');

let mState = () => aud.paused ? (picc.style.opacity = '1',pic.style.opacity = '0',image.stop(),intro.style.animationPlayState = 'paused') : (picc.style.opacity= '0',pic.style.opacity = '1',image.play(),intro.style.animationPlayState = 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

/*进度条 进度时间*/
prog.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');


aud.addEventListener('timeupdate', () => {
          varpercent= (aud.currentTime / aud.duration) * 100;
            progBar.style.width = percent + '%';
let p = (coordEnd - coordStart) / this.offsetWidth
   
      });

aud.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});


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;
      };
/*结束*/
var volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', function() {
    aud.volume =volumeSlider.value;
});
            function pc() {
var img = document.getElementById("mutedbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif") {aud.muted= true;
img.src = "https://pic1.imgdb.cn/item/68e9c0c2c5157e1a886337ae.png"; volumeSlider.value=0;
} else {aud.muted= false;volumeSlider.value=0.8;
img.src = "https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif";}
}


function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}
</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("mutedbnt");
</script>

杨帆 发表于 2026-5-13 18:46

视听盛宴，效果漂亮，谢谢亚伦老师精彩分享{:4_190:}

红影 发表于 2026-5-13 20:55

漂亮的变色效果，欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2026-5-13 22:27

欣赏亚纶精彩制作{:4_187:}

查看完整版本: 长路漫漫 情依依[BFQ模块]