邀寻梦花园老师协作的特效歌词播放器出炉
本帖最后由 亚伦影音工作室 于 2025-11-30 19:08 编辑 <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://s2.cldisk.com/sv-w8/audio/db/15/8f/b05e398be1d6fb7c829394ab166fbac1/audio.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);
}
vid.onclick = () => audio.paused ? (audio.play(),vid.play()) : (audio.pause(),vid.pause());
</script>
恭喜特效歌词播放器闪亮登场~谢谢亚伦老师~谢谢梦花园老师{:4_180:} 歌词变色的还是动态变化的，真漂亮。
欣赏亚伦老师好帖{:4_199:} 设计新颖 画面漂亮 歌曲动听 非常 赞赏 音画太棒了！
播放器唯美
背景歌声动听
制作大气
音画合一，音乐与画面结合完美
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
感谢亚伦影音工作室带来的精彩，辛苦了！祝你开心幸福、阖家安康！
页:
[1]