最近特火的歌《岁月如笔写春秋》
本帖最后由 亚伦影音工作室 于 2026-6-5 11:12 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
#papa { margin: 0 0 0 calc(50% - 680px); width: 1186px; height:620px; background: #000000; overflow: hidden; display: grid; place-items: center; box-shadow: 0px 0px 0px gray; position: relative; z-index: 1; --state: paused; }
#dh{ width: 100%; height: 100%; position: absolute;
z-index: 1;background:url(https://pic1.imgdb.cn/item/68be8b6558cb8da5c8883639.jpg)no-repeat center/cover;
top:0px; left:0px;
animation: rod 10s linear infinite var(--state);}
@keyframes rod{0% {opacity: 0.3;filter:hue-rotate(60deg);}
50% {opacity:1 ;}
100% {opacity: 0.3;}
}
li-zi { position: absolute; width: 100px; height: 0.5px; border-radius:100%50%;background: #fff000;animation: imov 2s infinite;z-index: 2;}
@keyframes moving {
to{ opacity: 1; transform: translate(var(--x0),var(--y0)) rotate(var(--deg)); filter:hue-rotate(360deg);}
from{ opacity: 0; transform: translate(0,0) rotate(var(--deg)); }
}
@keyframes rotating { to { transform: rotate(360deg); } }
.mplayer { position: absolute; width: 300px; height: fit-content; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #eee; margin: auto; top: 90%; left:14%;z-index: 20; }
.mplayer::before { position: absolute; content: attr(data-time); width: 100%; text-align-last: justify; pointer-events: none; }
.btnPlay { width: 20px; height: 20px; cursor: pointer; position: relative; }
.btnPlay::after { position: absolute; content: ''; width: 100%; height: 100%; background: #eee; clip-path: var(--clip); }
.progress { --prg: 0%; position: relative; width: 100%; height: 20px; display: grid; place-items: center start; background: linear-gradient(90deg, red var(--prg), gray var(--prg), gray 0) no-repeat center/100% 2px; padding: 0; margin: 0; }
.thumb { position: absolute; left: calc(var(--prg) - 10px); width: 10px; height: 10px; background: red; border: 1px solid #FF0000; border-radius: 50%; cursor: pointer; box-sizing: border-box; }
.play { --clip: polygon(10% 0,100% 50%,10% 100%); }
.pause { --clip: polygon(35% 0,15% 0,15% 100%, 35% 100%,35% 0,75% 0,75% 100%,55% 100%,55% 0); }
.lrc {position:absolute;width: 600px; height: 400px;
z-index: 3; left:48%;
border: 0px solid white;
overflow: hidden;margin: 6px;
}
.lrc #ul {width: 100%;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0}
.lrc #ul li {
cursor: pointer;
font-family: "ZCOOL QingKe HuangYou","华文行楷","SimHei", "Arial", "sans-serif";
font-size: 25px;
color: #fff;
font-weight: 100;
transition: .3s all ease;
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;
height: 50px;
line-height: 35px;
}
.lrc #ulli.active{ font-size: 35px;
color: #ff0000;
text-align: center;text-align: center; animation: fadeIn 0.5sforwards linear infinite var(--state); }
@keyframes fadeIn {0% {filter: hue-rotate(360deg)brightness(580%)contrast(200%); }}
</style>
<div id="papa">
<div id="dh" ></div>
<div class="mplayer" data-time="00:00 00:00">
<div class="btnPlay play"></div>
<div class="progress">
<div class="thumb"></div>
</div>
</div>
<div class="lrc">
<ul id="ul">
</ul>
</div>
<audio id="audio"autoplay loop controlslist="nodownload">
<source src="https://upfile.mp3.wf/view.php/15d364a8adc087b75fd725aab7249c5e.mp3" type="audio/mpeg">
</audio>
</div>
<script>
//获取需要操作的元素标识
const mplayer = document.querySelector('.mplayer');
const btnPlay = document.querySelector('.btnPlay');
const progress = document.querySelector('.progress');
const thumb = document.querySelector('.thumb');
const audio = document.querySelector('audio');
// 拖曳操作状态（初始值为假）
let isDraggable = false;
//时间格式化工具函数 ：秒转分秒 mm:ss 格式
const formatTime = (seconds) => {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};
// 联动函数 mState ：处理按钮形状
const mState = () => {
btnPlay.className = `btnPlay ${['pause', 'play'][+audio.paused]}`;
};
// 获取设备指针所在点在进度条上的距离（百分比）
const getPercent = (e) => {
const rect = progress.getBoundingClientRect();
const left = rect.left;
const width = rect.width;
let x = e.clientX ?? e.touches?.?.clientX ?? e.changedTouches?.?.clientX;
x = Math.min(width, Math.max(0, x - left));
return x / width * 100;
};
// 滑块鼠标按下、触屏设备手指或触笔按下
thumb.onmousedown = thumb.ontouchstart = (e) => {
isDraggable = true; // 拖曳状态进行中
e.preventDefault(); // 阻止默认行为
};
// 文档指针松开、触屏设备手指或触笔弹开
document.onmouseup = document.ontouchend = (e) => {
// 松开时若拖曳状态为真，驱动 audio 改变播放进度
if (isDraggable) audio.currentTime = `${getPercent(e) * audio.duration / 100}`;
isDraggable = false; //然后拖曳状态为假
};
// 文档上指针或手指、触笔移动时
document.onmousemove = document.ontouchmove = (e) => {
if (!isDraggable) return; // 若不是拖曳状态则忽略之
// 反之，若处于拖曳状态，给CSS变量 --prg 赋值
progress.style.setProperty('--prg', `${getPercent(e)}%`);
// 给时间文本信息即mplayer伪元素 attr(data-time) 函数赋值
mplayer.dataset.time = `${formatTime(audio.duration * getPercent(e) / 100)} ${formatTime(audio.duration)}`;
};
// 进度条点击事件
progress.onclick = (e) => audio.currentTime = `${getPercent(e) * audio.duration / 100}`;
// 音频标签开始播放和暂停时执行联动函数
audio.onplaying = audio.onpause = () => mState();
// 音频时间更新事件 ：驱动文本时间信息及进度条进度变更
audio.ontimeupdate = () => {
if (isDraggable) return; // 拖曳操作发生时忽略
mplayer.dataset.time = `${formatTime(audio.currentTime)} ${formatTime(audio.duration)}`;
progress.style.setProperty('--prg', `${audio.currentTime / audio.duration * 100}%`);
};
// 按钮单击 ：播放、暂停状态切换
btnPlay.onclick = () => audio.paused ? audio.play() : audio.pause();
</script>
<script>
(function() {
var lrc = `爱上音画
岁月如笔写春秋（女版）
作词：日月同辉
作曲：欧阳尚尚
演唱：河南三妹
出品：亚伦影音工作室
岁月如笔写春秋
一生知己最难求
相逢本是百年修
缘聚今生不可丢
时光似酒酿温柔
心事诉与明月收
若问情根深几许
朝朝暮暮共白头
我珍惜一路 真心的相逢
感恩命运的温柔
愿余生常相伴不负这份宿命
我眷恋时光 沉淀的安宁
憧憬偕老的约定
若有来世重逢 再续未了情
岁月如笔写春秋
一生知己最难求
相逢本是百年修
缘聚今生不可丢
时光似酒酿温柔
心事诉与明月收
若问情根深几许
朝朝暮暮共白头
我珍惜一路 真心的相逢
感恩命运的温柔
愿余生常相伴不负这份宿命
我眷恋时光 沉淀的安宁
憧憬偕老的约定
若有来世重逢 再续未了情
我珍惜一路 真心的相逢
感恩命运的温柔
愿余生常相伴不负这份宿命
我眷恋时光 沉淀的安宁
憧憬偕老的约定
若有来世重逢 再续未了情
歌词整理：亚伦`;
let lrcArr = lrc.split('\n');
let result = [];
var audio = document.querySelector("#audio");
var ul = document.querySelector("#ul");
var container = document.querySelector(".lrc");
for (let i = 0; i < lrcArr.length; i++) {
var lrcData = lrcArr.split(']');
if (lrcData.length < 2) continue;
var lrcTime = lrcData.substring(1);
var obj = {
time: parseTime(lrcTime),
word: lrcData.trim()
}
result.push(obj);
}
function parseTime(lrcTime) {
let lrcTimeArr = lrcTime.split(":");
return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
}
function getIndex() {
let time = audio.currentTime;
for (let i = 0; i < result.length; i++) {
if (result.time > time) {
return i - 1;
}
}
return result.length - 1;
}
function randomColor(){
const colors = ['#ff0000','#00ff00','#00C851','#7fff00','#1e90ff','#ff8800','#fff000'];
return colors;
}
function createElements() {
let fragment = document.createDocumentFragment();
for (let i = 0; i < result.length; i++) {
let li = document.createElement("li");
li.innerText = result.word;
li.style.color = randomColor();
li.addEventListener("click", function () {
audio.currentTime = result.time;
setOffset();
});
fragment.appendChild(li);
}
ul.appendChild(fragment);
}
createElements();
let containerHeight = container.clientHeight;
let liHeight = ul.children?.clientHeight || 50;
let minOffset = 0;
let maxOffset = ul.clientHeight - containerHeight;
function setOffset() {
const index = getIndex();
if (index < 0) return;
const liHeight = ul.children?.clientHeight || 50;
let offset = liHeight * index - containerHeight / 3 + liHeight / 2;
offset = Math.max(minOffset, Math.min(offset, maxOffset));
ul.style.transform = `translateY(${-offset}px)`;
ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
if (index < ul.children.length) {
ul.children.classList.add('active');
}
}
audio.addEventListener("timeupdate", setOffset);
})();
</script>
<script>
(function() {
let all = 160;
for(let i = 0; i < all; i++) {
let movBall = document.createElement('li-zi');
let hudu = Math.PI / 180 * 360 / all * i;
let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
movBall.style.cssText += `
--x0: ${xx}px;
--y0: ${yy}px;
--deg: ${360 / all * i}deg;
background: #${Math.random().toString(16).substr(-6)};
animation: moving ${Math.random() * 2 + 2}s -${Math.random() * 2}s infinite var(--state);
`;
papa.prepend(movBall);
}
let mState = () => papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
audio.addEventListener('playing',mState,false);
audio.addEventListener('pause',mState,false);
})();
</script>
欣赏佳作，问候亚伦。 这首歌真的很不错，欣赏老师的代码音画。中午好！
歌曲好听，制作漂亮。欣赏亚伦老师好帖{:4_199:} 欣赏亚纶精彩制作{:4_187:} 本帖最后由 杨帆 于 2026-6-8 13:53 编辑
视听盛宴，效果惊艳，欣赏学习，谢谢亚伦老师精彩示范{:4_190:}
页:
[1]