论坛 › 欢乐水吧 › 问情 (释怀版) - 大头针 Official

亚伦影音工作室 发表于 2026-3-22 09:28

问情 (释怀版) - 大头针 Official

本帖最后由 亚伦影音工作室 于 2026-3-22 12:16 编辑 <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: #000 url(https://pic1.imgdb.cn/item/69bf52824235741b1e445539.gif) no-repeat center/100% 100%; font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
}
#testImg{transition: 1s all ease;}
.photo {width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top:0px; left:0%;
opacity: 1;
animation: round 8s linear infinite;}
@keyframes round{0% {opacity: 1;transform:translate(100%,0%)scale(1) ;}
100% {opacity: 1;transform:translate(-100%,0%)scale(1) ;}
}
.photo img{width: 100%;
height: 100%; }
.photo:nth-child(1) {animation-delay: 0s;}
.photo:nth-child(2) {animation-delay: 4s;}
.stop .photo:nth-child(1),
.stop .photo:nth-child(2){animation-play-state: paused;}
#lyric {position: absolute;left: 50%;bottom: 63%;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-size: 3.5em;}
#lyricDisplay{height: 100%;letter-spacing: 0px;display: flex;align-items: center;justify-content: center;overflow: hidden;position: relative;padding: 0 1em;width: 100%;animation:rotd 0.5s linear infinite}
.lyrichar {display: inline-block;opacity: 0;animation: charAppear 0.5s forwards;margin: 0 2px;}
@keyframes charAppear {to {opacity: 1;transform: translate(0%);}}
@keyframes rotd {to {filter: hue-rotate(360deg);}}
#player{
    position:absolute;background:url('https://pic1.imgdb.cn/item/69bf59714235741b1e445620.png') no-repeat center/85% 85%;width:600px;height: 300px;border-radius:2%;z-index: 220; transform:scale(0.35); cursor: pointer;
top: 420px; left: 30%;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #000;
animation:sese 6sinfinite alternate;
}
#zhen{position: absolute; transform: translate(-50%, -50%);
    background:#ff0000;width:4px;height: 185px;border-radius:0% 0% 50% 50%;
transform-origin:center 0%;top: 270px; left: 50%;transition: 0.5s all ease;
animation:swin 0.4s ease-in-out infinite alternate;
}
#zhe{position: absolute; transform: translate(-50%, -50%);
    background:#ff0000;width:4px;height: 185px;opacity:0;border-radius:0% 0% 50% 50%;
transform-origin:center 0%;top: 270px; left: 50%;transition: 0.5s all ease;
animation:swsw 1s ease-in-out infinite alternate;
}
#dian { width: 20px;height: 20px; background: #fff;top: 270px; left: 50%;position: absolute;
border-radius:50%;transform: translate(-50%, -50%);
}
@keyframes swin{
100%{
    transform:rotate(-180deg);
}
    60%{
    transform:rotate(-160deg);
}
40%{
    transform:rotate(-170deg);
}

0%{
    transform:rotate(-140deg);
}
}
@keyframes swsw{
0%{
    transform:rotate(-255deg);
}
100%{
    transform:rotate(-255deg);
}
}
@keyframes sese{
0%{filter:hue-rotate(0deg)contrast(110%)brightness(90%);
   }
}


#statusDisplay{position: absolute;z-index: 1;font-family: "仿宋";font-size: 2.5em;font-weight: 500;left: 30%;top: 42%;color:#00ff00}

#fullscreen{border-radius: 4px;position: absolute;
color:#fff;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;transition: 0.5s all ease;
font-size: 20px;
border: none;
cursor: pointer;top: 5px;left: 3%;
}


</style>

<div id="papa">
<div id="fullscreen" title="屏展模式">全屏欣赏</div>
<div id='testImg'>
<div class="photo" > <img    src="https://pic1.imgdb.cn/item/69bf524b4235741b1e445537.gif" style="transform: rotateY(180deg);" /></div>
<div class="photo" > <img    src="https://pic1.imgdb.cn/item/69bf524b4235741b1e445537.gif" style="transform: rotateY(0deg);" /></div>
</div>

<div id="player" title="暂停/播放">
<div id="zhen"></div>
<div id="zhe"></div>
<div id="dian"></div>
<divid="statusDisplay">播放中: -2:20 </div>
</div>

<div id="lyric">
<div id="lyricDisplay" ></div>
</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w8/audio/28/71/a2/4dea903abb17fafb3e6480a9225408c0/audio.mp3" loop autoplay ></audio>
</div>
       
<script>
const papa = document.getElementById('papa');
const audioPlayer = document.getElementById('aud');
const starfishPlayer =document.getElementById('player');
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();

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();
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 = `
问情 (释怀版) - 大头针 Official
词：陈乐融
曲：Iskandar Ismail
山川载不动太多悲哀
岁月经不起太长的等待
春花最爱向风中摇摆
黄沙偏要将痴和怨掩埋
一世的聪明情愿糊涂
一生的遭遇向谁述
爱到不能爱 聚到总须散
繁华过后成一梦啊
海水永不干 天也望不穿
红尘一笑和你共徘徊
山川载不动太多悲哀
岁月经不起太长的等待
春花最爱向风中摇摆
黄沙偏要将痴和怨掩埋
一世的聪明情愿糊涂
一生的遭遇向谁述
爱到不能爱 聚到总须散
繁华过后成一梦啊
海水永不干 天也望不穿
红尘一笑和你共徘徊
一世的聪明情愿糊涂
一生的遭遇向谁述
爱到不能爱 聚到总须散
繁华过后成一梦啊
海水永不干 天也望不穿
红尘一笑和你共徘徊
爱到不能爱 聚到总须散
繁华过后成一梦啊
海水永不干 天也望不穿
红尘一笑和你共徘徊
`;
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 = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                papa.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };

let mState = () => aud.paused ? (zhen.style.opacity= '0',zhe.style.opacity= '1',testImg.style.opacity= '0',lyricDisplay.style.animationPlayState = 'paused' ) : (zhen.style.opacity= '1',zhe.style.opacity= '0',testImg.style.opacity= '1',lyricDisplay.style.animationPlayState = 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

红影 发表于 2026-3-22 11:04

男声版的温情也很好听，滚动的对称背景也很漂亮。
欣赏亚伦老师好帖{:4_187:}

红影 发表于 2026-3-22 11:06

这指针频谱真漂亮{:4_204:}

查看完整版本: 问情 (释怀版) - 大头针 Official