首页 › 播放器 › 不能和你有个家-烟嗓兄弟

亚伦影音工作室 发表于 2026-3-17 19:05

不能和你有个家-烟嗓兄弟

本帖最后由 亚伦影音工作室 于 2026-3-17 19:10 编辑 <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/69b92dc51eedde6824929811.jpg) no-repeat center/cover;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
}

.intro {position: absolute;top:0%; left:0%;
      width: 100%;background:url(https://pic1.imgdb.cn/item/69b8c75adbc096ab526d4523.jpg) no-repeat center/cover;
      height: 100%;animation: round 6s linear infinite;box-shadow: 0px 0px 0px 3px #fff; }

@keyframes round{
0% {
-webkit-transform:rotate(0)scale(0.4)translate(-35%,6%);
opacity:0.8}
30% {
-webkit-transform:rotate(0)scale(0.4)translate(-35%,6%);
opacity:0.8}

50% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}
60% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:0.6}

}

#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-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;top: 72%;z-index: 99;
            left: 13%;
width: 200px;
height: 200px;
display: grid;
        place-items: center;animation: rot 8s linear infinite ;}
#rect {position: absolute;
        display: grid;
        place-items: center;
width:35%;
height: 35%;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}

#statusDisplay{position: absolute;z-index: 1;font-size: 1.5em;font-weight: 500;left: 65%;top: 5%;color:#fff}

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


</style>

<div id="papa">
<div id="fullscreen" title="屏展模式">全屏欣赏</div>
<div class='intro'></div>
<divid="statusDisplay">播放中: -2:20 </div>

<div id="player">
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
</div>

<div id="lyric">
<div id="lyricDisplay" ></div>
</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w8/audio/8d/b7/42/e663e10b13ce8757cd7ed308900b5d6c/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 = `不能和你有个家-烟嗓兄弟
作曲：烟嗓兄弟
作曲：烟嗓兄弟
那年相遇 惊艳了年华
年少承诺 难捱风沙
后来才懂 携手到白发
不能只靠 心动一刹
就算共饮 最烈的酒啊
也难走到 海角天涯
就算看尽 世间的繁华
今生也无法和你有个家
香烟燃不尽 想你的愁
烈酒解不开 离别的忧
明明我们 曾十指紧扣
最后沦为 路人某某
今生不能和你有个家
却还梦里 与你相守
既然缘分 不许到白头
为何让我 曾经拥有
那年相遇 惊艳了年华
年少承诺 难捱风沙
后来才懂 携手到白发
不能只靠 心动一刹
就算共饮 最烈的酒啊
也难走到 海角天涯
就算看尽 世间的繁华
今生也无法和你有个家
香烟燃不尽 想你的愁
烈酒解不开 离别的忧
明明我们 曾十指紧扣
最后沦为 路人某某
今生不能和你有个家
却还梦里 与你相守
既然缘分 不许到白头
为何让我 曾经拥有

`;
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;
      };
const intro= document.querySelector('.intro');
let mState = () => aud.paused ? (player.style.animationPlayState = 'paused',intro.style.animationPlayState = 'paused',lyricDisplay.style.animationPlayState = 'paused' ) : (player.style.animationPlayState = 'running',intro.style.animationPlayState = 'running',lyricDisplay.style.animationPlayState = 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

</script>

無名 发表于 2026-3-17 20:43

关于这个添加编辑按钮，discuz 应用中心有免费的插件，你可以建议管理员进后台打开应用中心添加插件，见下图：



地址：https://addon.dismall.com/plugins/freeaddon_editmoveup.html

亚伦影音工作室 发表于 2026-3-17 21:04

無名 发表于 2026-3-17 20:43
关于这个添加编辑按钮，discuz 应用中心有免费的插件，你可以建议管理员进后台打开应用中心添加插件，见 ...

这个需要花潮大佬们利用技术手段来修改！咱说了不算！

小辣椒 发表于 2026-3-17 23:19

亚纶好久不见了，小辣椒最近没有时间玩，难得上来看看了

小辣椒 发表于 2026-3-17 23:24

欣赏亚纶好制作，现在歌词玩的很溜了

https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap

liumang 发表于 2026-3-18 13:58

欣赏亚纶老师漂亮的图片转换效果{:5_150:}{:5_150:}{:5_150:}

查看完整版本: 不能和你有个家-烟嗓兄弟