邀寻梦花园老师协作的特效歌词播放器出炉
本帖最后由 亚伦影音工作室 于 2026-7-8 09:12 编辑 <br /><br /><style>#bj {
position: relative;
width: 1286px;
height: 720px;
overflow: hidden;
z-index: 1;top: 0%;
left: -330px;
background: url(https://pic1.imgdb.cn/item/67162d12d29ded1a8c2f45cf.jpg) no-repeat center/cover;
border-radius: 0px;
box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}
/* 旋转文字样式优化 */
.rotating-text {
position: absolute;
top: 30%;
left: 20%;
transform: translate(-50%, -50%);
font-family: "Microsoft Yahei", Lato, sans-serif;
font-weight: 600;
font-size: 46px;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);
z-index: 2;
transform: translateX(-80px);
text-align: center;
}
.rotating-text p {
display: inline-flex;
margin: 0;
vertical-align: top;
flex-wrap: wrap;
justify-content: center;
}
.rotating-text p .word {
position: relative;
display: flex;
opacity: 0;
justify-content: center;
width: 100%;
}
.rotating-text p .word .letter {
transform-origin: center center 25px;
margin: 0 2px;
}
.rotating-text p .word .letter.out {
transform: rotateX(90deg);
transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
}
.rotating-text p .word .letter.in {
transition: 0.38s ease;
}
.rotating-text p .word .letter.behind {
transform: rotateX(-90deg);
}
/* 扩展更多歌词颜色主题 */
.alizarin { color: #ff0000; } /* 红 */
.wisteria { color: #8e44ad; } /* 紫 */
.peter-river { color: #3498db; } /* 蓝 */
.emerald { color: #2ecc71; } /* 绿 */
.sun-flower { color: #f1c40f; }/* 黄 */
.carrot { color: #e67e22; } /* 橙 */
.amethyst { color: #9b59b6; } /* 紫晶 */
.turquoise { color: #1abc9c; } /* 青 */
#vid {position: absolute;width: 25%; left: 22%; top:54%;height: auto;mix-blend-mode: lighten; cursor: pointer;mask-image: radial-gradient(black 25% ,transparent 75%);
}
</style>
<div id="bj">
<div class="rotating-text">
<p>
<span class="word" id="current-lyric"></span>
<span class="word alizarin"></span>
<span class="word wisteria"></span>
<span class="word peter-river"></span>
<span class="word emerald"></span>
<span class="word sun-flower"></span>
<span class="word carrot"></span>
<span class="word amethyst"></span>
<span class="word turquoise"></span>
</p>
</div>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/39/5d21bde6a1eca.mp4" autoplay loop muted></video>
</div>
<!-- 音频标签 -->
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=2736304723.MP3" loop autoplay></audio>
<script>
// 原始带时间戳的歌词文本
const lyricText = `不删不聊不联系-沧桑小杰
作词：广羽人彡
作曲：舟木楼
演唱：沧桑小杰
编辑制作：亚伦
曾经爱到了 骨子里的人
如今变成了 我心底的针
我回不了头 也转不过身
心头早已经 只剩下伤痕
曾经对彼此 最熟悉的人
如今却变得 这样的陌生
你来过一阵 我疼了一生
若是能重来 我不会沉沦
后来不删不聊不联系
可我不得不能不想你
无论走到哪里我的心
还是会继续对你惦记
也许我会被别人代替
可我却还是无能为力
从今往后离开我的你
也一定要记得好好 照顾自己
曾经对彼此 最熟悉的人
如今却变得 这样的陌生
你来过一阵 我疼了一生
若是能重来 我不会沉沦
后来不删不聊不联系
可我不得不能不想你
无论走到哪里我的心
还是会继续对你惦记
也许我会被别人代替
可我却还是无能为力
从今往后离开我的你
也一定要记得好好 照顾自己`;
// 步骤1：定义颜色类数组
const colorClasses = [
'alizarin', 'wisteria', 'peter-river',
'emerald', 'sun-flower', 'carrot',
'amethyst', 'turquoise'
];
let colorIndex = 0;
// 步骤2：解析歌词文本
function parseLyrics(lyricText) {
const lyricArr = [];
const reg = /\[(\d{2}):(\d{2})\.(\d{3})\](.*)/g;
let match;
while ((match = reg.exec(lyricText)) !== null) {
const minute = parseInt(match);
const second = parseInt(match);
const millisecond = parseInt(match);
const time = minute * 60 + second + millisecond / 1000;
const text = match.trim();
if (text) lyricArr.push({ time, text });
}
return lyricArr;
}
// 步骤3：初始化变量
const audio = document.getElementById('audio');
const currentLyricEl = document.getElementById('current-lyric');
const lyrics = parseLyrics(lyricText);
let currentLyricIndex = 0;
let isPlaying = false;
// 步骤4：获取颜色类（两种模式：循环/随机，二选一）
// 模式1：循环切换颜色类
function getNextColorClass() {
const colorClass = colorClasses;
colorIndex = (colorIndex + 1) % colorClasses.length; // 循环索引
return colorClass;
}
// 模式2：随机获取颜色类（注释掉模式1，启用此函数即可）
/*function getNextColorClass() {
const randomIndex = Math.floor(Math.random() * colorClasses.length);
return colorClasses;
}*/
function initLetterAnimation(el, text) {
// 清空原有内容和颜色类
el.textContent = '';
el.className = 'word';
const colorClass = getNextColorClass();
el.classList.add(colorClass);
const letters = text.split('');
letters.forEach(letter => {
const span = document.createElement('span');
span.textContent = letter;
span.className = 'letter';
el.appendChild(span);
});
el.style.opacity = '1';
}
function playRotateAnimation(el) {
const letters = el.querySelectorAll('.letter');
letters.forEach((letter, i) => {
setTimeout(() => {
letter.className = 'letter out';
}, i *90);
});
letters.forEach((letter, i) => {
setTimeout(() => {
letter.className = 'letter behind';
setTimeout(() => {
letter.className = 'letter in';
}, 340);
}, i * 90);
});
}
function matchLyric(currentTime) {
for (let i = 0; i < lyrics.length; i++) {
if (
currentTime >= lyrics.time &&
(i === lyrics.length - 1 || currentTime < lyrics.time)
) {
if (i !== currentLyricIndex) {
currentLyricIndex = i;
initLetterAnimation(currentLyricEl, lyrics.text); // 切换歌词时变色
}
break;
}
}
}
// 步骤7：绑定音频事件
audio.addEventListener('timeupdate', () => {
if (!isPlaying) return;
matchLyric(audio.currentTime);
});
audio.addEventListener('play', () => isPlaying = true);
audio.addEventListener('pause', () => isPlaying = false);
// 循环执行旋转动画
setInterval(() => {
if (isPlaying && currentLyricEl.children.length) {
playRotateAnimation(currentLyricEl);
}
}, 4000);
// 初始化第一句歌词
if (lyrics.length) {
initLetterAnimation(currentLyricEl, lyrics.text);
}
</script>
恭喜特效歌词播放器闪亮登场~谢谢亚伦老师~谢谢梦花园老师{:4_180:} 歌词变色的还是动态变化的，真漂亮。
欣赏亚伦老师好帖{:4_199:} 设计新颖 画面漂亮 歌曲动听 非常 赞赏 音画太棒了！
播放器唯美
背景歌声动听
制作大气
音画合一，音乐与画面结合完美
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
感谢亚伦影音工作室带来的精彩，辛苦了！祝你开心幸福、阖家安康！
页:
[1]