《哥哥送我一支穿云箭》 - 梁 红 （试帖亚伦老师新频谱代码）
本帖最后由 亦是金 于 2026-3-4 14:23 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2340283">
<style>
#papa{position: relative;
width: 1300px;
height: 720px;
margin-left: -361px;
margin-top: 10px;
box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
overflow: hidden;
z-index:12345;
background:url(https://i.ibb.co/LXNTQ95L/231023a.gif)no-repeat center/cover;
}
.wrap {
position: absolute;
width: 1200px;
height: 350px;
margin: 180px 10px;
}
.content {list-style: none;
position: absolute;
width: 1200px;
height: 360px;
}
.content li{box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
position: absolute;
background-size: 100% 100%;
}
#lyrics-container {
position: absolute;
width: 80%;
height: 50%;
left: 22%;
top: -3%;
}//歌词容器
:root {
--lyric-stroke-color: #eee; //#0099ff
--lyric-stroke-width: 5px;
}
.lyric-line {
position: absolute;
white-space: nowrap;
opacity: 0;
transform: scale(0.1);
transition: transform 3s, opacity 0.8s, color 4s;
text-align: center;
left:10%;
top: 20%;
z-index: 10;
font: 45 30px '华文楷体', sans-serif;
margin-left: -200px;
margin-top: -40px;
-webkit-text-stroke: var(--lyric-stroke-width) var(--lyric-stroke-color);
text-stroke: var(--lyric-stroke-width) var(--lyric-stroke-color);
paint-order: stroke fill;
}
#audio-controls {
position: fixed;
bottom: 20px;
z-index: 100;
display: none;
}
#spectrum-container {
position: absolute;
width: 1100px;
height: 640px;
top: 40px;
left: 50px;
pointer-events: none;
z-index: 5;
}
.butterfly {
position: absolute;
width: 40px;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
transform-origin: center;
transition: transform 0.2s;
}
#progress-container {
position: absolute;
left: 551px;
top: 41px;
transform: translateX(-50%);
width: 120px;
height: 120px;
z-index: 100;
}
#progress-circle {
fill: transparent;
stroke: #880000;
stroke-width: 5;
stroke-dasharray: 339.6;
stroke-dashoffset: 339.6;
transform: rotate(-90deg);
transform-origin: 50% 50%;
transition: stroke-dashoffset 0.1s linear;
}
#progress-bg {
fill: transparent;
stroke: rgba(255,255,255,0.2);
stroke-width: 5;
}
#rotating-image {
position: absolute;
left: 500px;
top: 50px;
width: 102px;
height: 102px;
border-radius: 50%;
object-fit: cover;
z-index: 101;
transform-origin: center;
transition: transform 0.1s linear;
cursor: pointer;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
#rotating-image.playing {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 5px rgba(255, 105, 180, 0.7); }
50% { box-shadow: 0 0 20px rgba(255, 105, 180, 0.9); }
100% { box-shadow: 0 0 5px rgba(255, 105, 180, 0.7); }
}
</style>
<divid="papa">
<div class="wrap" id="wrap">
<p class="content"></p>
</div>
<div id="lyrics-container"></div>
<div id="spectrum-container"></div>
<div id="audio-controls">
<audio id="audio-player" crossOrigin="anonymous"controls>
<source src="https://s2.cldisk.com/sv-w8/audio/44/e3/6e/086a141b9f38a964a50198cc746246b7/audio.mp3" type="audio/mpeg">
</audio>
</div>
<img id="rotating-image" src="https://pic1.imgdb.cn/item/69a59457dcdb109d1d43d05e.png" width="102" height="102">
<!-- 圆形进度条 -->
<div id="progress-container">
<svg width="120" height="120" viewBox="0 0 120 120">
<circle id="progress-bg" cx="60" cy="60" r="54" />
<circle id="progress-circle" cx="60" cy="60" r="54" />
</svg>
</div>
</div>
<script>
window.onload=function(){
var imgArr=[ ];
var size=[
];
var imgSum=imgArr.length;
var wrap=document.getElementById('wrap');
var cont=wrap.firstElementChild || wrap.firstChild;
var btnArr=wrap.getElementsByTagName('a');
var falg=true;
var speed=2000;
wrap.onmouseover=function(){
for (var i=0;i<btnArr.length;i++) {
btnArr.style.display='block';
}
clearInterval(wrap.timer);
}
wrap.onmouseout=function(){
for (var i=0;i<btnArr.length;i++) {
btnArr.style.display='none';
}
wrap.timer=setInterval(function(){
move(true);
},speed);
}
for (var i=0;i<imgSum;i++) {
var lis=document.createElement('li');
// lis.style.cssText='top:'+size.top+'px;'+'left:'+size.left+'px;'+'width:'+size.width+'px;'+'z-index:'+size.zIndex+';'+'height:'
// +size.height+'px;'+'opacity:'+size.opacity+';';
lis.style.backgroundImage='url('+imgArr.path+')';
cont.appendChild(lis);
}
var liArr=cont.children;
move();
wrap.timer=setInterval(function(){
move(true);
},speed);
btnArr.onclick=function(){
if (falg) {
move(true);
}
}
btnArr.onclick=function(){
if (falg) {
move(false);
}
}
function move(bool){
if(bool!=undefined){
if(bool){
size.unshift(size.pop());
}else {
size.push(size.shift());
}
}
for (var i=0;i<liArr.length;i++) {
animate(liArr,size,function(){
falg=true;
});
}
}
}
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle : window.getComputedStyle(obj,null);
}
function animate(obj,json,fn){
clearInterval(obj.timer);
if(!audioPlayer.paused)obj.timer=setInterval(function(){ var bool=true;
for(var k in json){
var leader;
if (k=='opacity') {
if (getStyle(obj,k)==undefined) {
leader=100;
}else {
leader=parseInt(getStyle(obj,k)*150);
}
}else {
leader=parseInt(getStyle(obj,k)) || 0;
}
var step=(json-leader)/10;
step=step>0?Math.ceil(step):Math.floor(step);
leader=leader+step;
if(k=='zIndex'){
obj.style=json;
}else if(k=='opacity'){
obj.style=leader/100;
obj.style.filter='alpha(opacity='+leader+')';
}else {
obj.style=leader+'px';
}
if(json!=leader){
bool=false;
}
}
if(bool){
clearInterval(obj.timer);
if (fn) {
fn();
}
}
},10);
}
//尽量使用标准LRC格式歌词
const lrcLyrics = `《哥哥送我一支穿云箭》
作词 : 高羽/徐杰
作曲 : 陈 伟
编曲 : 阿 浩
演唱 ：梁 红
歌词同步编辑：亦是金
。。。。。。
走进我的世界 打开我的时间
每一天带给你 不同的新鲜
像花香的蔓延 像可乐的甘甜
让你神清气爽 让你笑容灿烂
卸掉你的疲倦 进入我的房间
每一天都有我 用心的陪伴
像行舟的靠岸 像平静的港湾
让你洗去风尘 轻轻松松入眠
哥哥你送我 一支穿云箭
如春风拂动了我美丽的华年
爱我你就用 真情来体现
隔着万水千山 我也觉得暖
哥哥你送我 一支穿云箭
如细雨润泽了我等待的心田
爱我你就用 勇气去浪漫
快乐穿越时空 停留我身边
。。。。。。
卸掉你的疲倦 进入我的房间
每一天都有我 用心的陪伴
像行舟的靠岸 像平静的港湾
让你洗去风尘 轻轻松松入眠
哥哥你送我 一支穿云箭
如春风拂动了我美丽的华年
爱我你就用 真情来体现
隔着万水千山 我也觉得暖
哥哥你送我 一支穿云箭
如细雨润泽了我等待的心田
爱我你就用 勇气去浪漫
快乐穿越时空 停留我身边
哥哥你送我 一支穿云箭
如春风拂动了我美丽的华年
爱我你就用 真情来体现
隔着万水千山 我也觉得暖
哥哥你送我 一支穿云箭
如细雨润泽了我等待的心田
爱我你就用 勇气去浪漫
快乐穿越时空 停留我身边
快乐穿越时空 停留我身边
-- 谢谢欣赏 --
`;
// 采用鲜艳的颜色数组，更符合春暖花开主题
const colors = [
'#FF1493', '#FF69B4', '#FF6347', '#FFA500',
'#FFD700', '#90EE90', '#00FA9A', '#00FF7F',
'#7CFC00', '#ADFF2F', '#32CD32', '#00FF00',
'#FF00FF', '#DA70D6', '#BA55D3', '#9370DB',
'#FF4500', '#FF8C00', '#FFD700', '#FF0000'
];
// 解析LRC歌词
function parseLRC(lrcText) {
const lines = lrcText.split('\n');
const result = [];
for (const line of lines) {
// 匹配时间标签
const timeMatch = line.match(/\[(\d{2}):(\d{2})\.(\d{2})\]/);
if (!timeMatch) continue;
const minutes = parseFloat(timeMatch);
const seconds = parseFloat(timeMatch);
const hundredths = parseFloat(timeMatch) / 100;
const time = minutes * 60 + seconds + hundredths;
// 获取歌词文本
const text = line.replace(timeMatch, '').trim();
if (text) {
result.push({ time, text });
}
}
return result;
}
const lyrics = parseLRC(lrcLyrics);
const container = document.getElementById('lyrics-container');
const spectrumContainer = document.getElementById('spectrum-container');
const audioPlayer = document.getElementById('audio-player');
const rotatingImage = document.getElementById('rotating-image');
const progressCircle = document.getElementById('progress-circle');
let currentLineIndex = 0;
let lyricElements = [];
let hasPlayedOnce = false;
let audioContext;
let analyser;
let dataArray;
let butterflies = [];
let animationId;
let progressInterval;
let rotationAngle = 0;
let rotationInterval;
let isPlaying = false;
// 创建蝴蝶频谱
function createButterflies() {
const butterflySVG = `
<svgviewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M512 0.001536c69.119793 0 136.191591 13.516759 199.321002 40.294279A508.363275 508.363275 0 0 1 873.982914 150.017086 510.257669 510.257669 0 0 1 1023.998464 512a510.974467 510.974467 0 0 1-150.01555 361.982914 508.363275 508.363275 0 0 1-162.661912 109.721271A507.134479 507.134479 0 0 1 512 1023.998464a511.128067 511.128067 0 0 1-361.982914-150.01555 508.363275 508.363275 0 0 1-109.721271-162.661912A507.134479 507.134479 0 0 1 0.001536 512c0-69.119793 13.516759-136.191591 40.294279-199.321002A508.414475 508.414475 0 0 1 150.017086 150.017086 508.414475 508.414475 0 0 1 312.678998 40.295815 507.134479 507.134479 0 0 1 512 0.001536zM299.725437 636.057228c-13.158361 0-25.855922 10.547168-32.153504 28.620714-8.908773 25.446324-1.689595 56.473431 16.076752 69.068593 71.218986 50.790248 147.865156 76.54377 227.839317 76.54377 80.07656 0 156.67153-25.753523 227.839316-76.390171 17.766347-12.748762 25.087925-43.622269 16.179151-69.119792-8.908773-25.446324-30.463909-35.839892-48.281455-23.142331-61.030217 43.46867-126.873219 65.638203-195.685813 65.638203-68.863793 0-134.655596-22.169533-195.839412-65.791802a26.879919 26.879919 0 0 0-15.974352-5.427184z m5.990382-382.974851c-39.782281 0-71.935784 38.604684-71.935784 86.169341 0 47.615857 32.153504 86.066942 71.935784 86.066942s71.935784-38.553484 71.935784-86.066942c0-47.615857-32.153504-86.118142-71.935784-86.118141z m411.646765 0c-39.83348 0-71.986984 38.604684-71.986984 86.169341 0 47.513457 32.153504 86.066942 71.935784 86.066942s71.935784-38.553484 71.935784-86.066942c0-47.615857-32.153504-86.169341-71.935784-86.169341z" fill="#ff00ff" ></path></svg>
`;
for (let i = 0; i < 15; i++) {
const butterfly = document.createElement('div');
butterfly.className = 'butterfly';
butterfly.style.backgroundImage = `url("data:image/svg+xml;utf8,${encodeURIComponent(butterflySVG)}")`;
butterfly.style.left = `${Math.random() * 100}%`;
butterfly.style.top = `${Math.random() * 100}%`;
butterfly.style.opacity = '0.9';
butterfly.style.transform = `scale(${0.5 + Math.random() * 0.5}) rotate(${Math.random() * 360}deg)`;
spectrumContainer.appendChild(butterfly);
butterflies.push({
element: butterfly,
x: Math.random(),
y: Math.random(),
speed: 0.1 + Math.random() * 0.2,
angle: Math.random() * Math.PI * 2,
size: 0.5 + Math.random() * 0.5,
baseSize: 0.5 + Math.random() * 0.5,
targetX: Math.random(),
targetY: Math.random(),
targetSize: 0.5 + Math.random() * 0.5,
frequencyBand: Math.floor(Math.random() * 32)
});
}
}
// 初始化音频分析器
function initAudioAnalyzer() {
try {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
const source = audioContext.createMediaElementSource(audioPlayer);
analyser = audioContext.createAnalyser();
analyser.fftSize = 64;
source.connect(analyser);
analyser.connect(audioContext.destination);
dataArray = new Uint8Array(analyser.frequencyBinCount);
console.log('音频分析器初始化成功');
if (!animationId) {
updateButterflies();
}
} catch (e) {
console.error('音频分析器初始化失败:', e);
}
}
// 更新蝴蝶动画
function updateButterflies() {
if (!analyser) {
animationId = requestAnimationFrame(updateButterflies);
return;
}
analyser.getByteFrequencyData(dataArray);
let volume = 0;
for (let i = 0; i < dataArray.length; i++) {
volume += dataArray;
}
volume = volume / dataArray.length / 255;
butterflies.forEach((butterfly, index) => {
const intensity = dataArray / 255;
butterfly.targetSize = butterfly.baseSize * (1 + intensity * 1.2 + volume * 0.3);
butterfly.size += (butterfly.targetSize - butterfly.size) * 0.05;
if (Math.random() < 0.005 || intensity > 0.5) {
butterfly.angle = Math.random() * Math.PI * 2;
}
const moveIntensity = 0.003 * butterfly.speed * (1 + intensity * 1.5 + volume * 0.3);
butterfly.x += Math.cos(butterfly.angle) * moveIntensity;
butterfly.y += Math.sin(butterfly.angle) * moveIntensity;
if (butterfly.x < 0) {
butterfly.x = 1;
butterfly.angle = Math.random() * Math.PI * 2;
}
if (butterfly.x > 1) {
butterfly.x = 0;
butterfly.angle = Math.random() * Math.PI * 2;
}
if (butterfly.y < 0) {
butterfly.y = 1;
butterfly.angle = Math.random() * Math.PI * 2;
}
if (butterfly.y > 1) {
butterfly.y = 0;
butterfly.angle = Math.random() * Math.PI * 2;
}
butterfly.element.style.left = `${butterfly.x * 100}%`;
butterfly.element.style.top = `${butterfly.y * 100}%`;
const rotation = (butterfly.angle * 180 / Math.PI) + (intensity * 90) + (index % 2 === 0 ? 1 : -1) * (volume * 45);
butterfly.element.style.transform = `scale(${butterfly.size}) rotate(${rotation}deg)`;
butterfly.element.style.opacity = `${0.5 + intensity * 0.4}`;
const hue = (index * 15 + Date.now() * 0.0005 * (1 + volume)) % 360;
butterfly.element.style.filter = `hue-rotate(${hue}deg) saturate(${1 + volume * 1.5})`;
});
animationId = requestAnimationFrame(updateButterflies);
}
// 预创建所有歌词元素
function createLyricElements() {
lyrics.forEach((line, index) => {
const element = document.createElement('div');
element.className = 'lyric-line';
element.textContent = line.text;
element.style.color = colors;
element.style.left = '66%';
element.style.top = '53%';
element.style.marginLeft = '-200px';
element.style.marginTop = '-50px';
container.appendChild(element);
lyricElements.push(element);
});
}
// 显示歌词行
function showLyricLine(index) {
if (index >= lyricElements.length) return;
const element = lyricElements;
element.style.transform = 'scale(0.1)';
element.style.opacity = '0';
setTimeout(() => {
element.style.transition = 'transform 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 1s, color 2s';
element.style.transform = 'scale(1.5)';
element.style.opacity = '1'
let colorIndex = index % colors.length;
const colorChangeInterval = setInterval(() => {
colorIndex = (colorIndex + 1) % colors.length;
element.style.color = colors;
}, 2000);
setTimeout(() => {
element.style.transition = 'transform 3s, opacity 5s';
element.style.transform = 'scale(0.8) translateY(-180px)';
element.style.opacity = '0';
clearInterval(colorChangeInterval);
setTimeout(() => {
element.style.transition = 'none';
}, 1000);
}, 3000);
}, 100);
}
// 重置歌词状态
function resetLyrics() {
currentLineIndex = 0;
lyricElements.forEach(el => {
el.style.opacity = '0';
el.style.transform = 'scale(0.1)';
el.style.transition = 'none';
});
}
// 更新歌词
function updateLyrics() {
const currentTime = audioPlayer.currentTime;
if (currentLineIndex < lyrics.length && currentTime >= lyrics.time) {
showLyricLine(currentLineIndex);
currentLineIndex++;
}
if (currentTime < lyrics.time && currentLineIndex > 0) {
resetLyrics();
}
}
// 更新进度条
function updateProgress() {
const progress = (audioPlayer.currentTime / audioPlayer.duration) || 0;
const circumference = 339.6; // 2πr (r=54) 放大20%
const offset = circumference - (progress * circumference);
progressCircle.style.strokeDashoffset = offset;
}
// 旋转图片
function rotateImage() {
if (isPlaying) {
rotationAngle +=- 0.5;
rotatingImage.style.transform = `rotate(${rotationAngle}deg)`;
}
}
function startAllAnimations() {
isPlaying = true;
rotatingImage.classList.add('playing');
progressInterval = setInterval(updateProgress, 100);
rotationInterval = setInterval(rotateImage, 20);
}
function stopAllAnimations() {
isPlaying = false;
clearInterval(progressInterval);
clearInterval(rotationInterval);
rotatingImage.classList.remove('playing');
}
// 初始化函数
function init() {
createLyricElements();
createButterflies();
const togglePlayback = () => {
if (audioPlayer.paused) {
if (!audioContext) {
initAudioAnalyzer();
}
audioPlayer.play().then(() => {
startAllAnimations();
hasPlayedOnce = true;
}).catch(e => {
console.log('播放失败:', e);
});
} else {
audioPlayer.pause();
stopAllAnimations();
}
};
// 旋转图片点击事件
rotatingImage.addEventListener('click', togglePlayback);
audioPlayer.addEventListener('timeupdate', updateLyrics);
audioPlayer.addEventListener('ended', function() {
resetLyrics();
stopAllAnimations();
});
audioPlayer.addEventListener('pause', function() {
stopAllAnimations();
});
// 播放时恢复动画
audioPlayer.addEventListener('play', function() {
startAllAnimations();
if (!animationId) {
updateButterflies();
}
if (!analyser) {
initAudioAnalyzer();
}
});
// 尝试自动播放
const tryAutoPlay = () => {
if (!hasPlayedOnce) {
togglePlayback();
}
};
// 页面加载后尝试自动播放
tryAutoPlay();
// 如果自动播放失败，在用户点击时再次尝试
document.addEventListener('click', tryAutoPlay);
}
// 启动应用
window.addEventListener('load', init);
</script></td></tr></table> https://5b0988e595225.cdn.sohucs.com/images/20191003/c67c8071346742d1a5edbe7e6c8a2940.gif 2026马年到！奔向美好！ 也曾年轻 发表于 2026-3-3 09:48
问好老师！元宵节快乐！{:4_180:} 庶民 发表于 2026-3-3 09:59
2026马年到！奔向美好！
问好庶民老师！元宵节快乐！{:4_180:} 也曾年轻 发表于 2026-3-3 09:48
没分了，欣赏点赞，元宵节快乐！{:4_204:} 本帖最后由 杨帆 于 2026-3-3 12:08 编辑
加载好像慢了点呀~祝亦是金老师元宵节快乐，马年大吉大利{:4_176:} 那个旋转的小图标的旋转频率就是频谱吧，制作真漂亮，歌词的制作也很别致。
欣赏亦是金老师好帖{:4_199:} 梦江南 发表于 2026-3-3 11:19
没分了，欣赏点赞，元宵节快乐！
谢谢老师！元宵节快乐！{:4_187:} 杨帆 发表于 2026-3-3 12:06
加载好像慢了点呀~祝亦是金老师元宵节快乐，马年大吉大利
问好！老师元宵节快乐！{:4_180:} 红影 发表于 2026-3-3 13:00
那个旋转的小图标的旋转频率就是频谱吧，制作真漂亮，歌词的制作也很别致。
欣赏亦是金老师好帖
是的！问好红影！祝元宵节快乐！{:4_187:} 欣赏前辈的精彩制作，{:4_199:} 可能我的网卡，没有看见频谱{:4_198:} 小辣椒 发表于 2026-3-3 22:21
欣赏前辈的精彩制作，
问好！祝元宵节快乐！{:4_187:} 本帖最后由 亦是金 于 2026-3-4 11:29 编辑
小辣椒 发表于 2026-3-3 22:23
可能我的网卡，没有看见频谱
要刷新后，稍候片刻。{:4_198:}
也可以去这里看看：https://mxjy.net/forum.php?mod=viewthread&tid=43167&extra=page%3D1
很美的制作，赞一个。 梦油 发表于 2026-3-4 11:12
很美的制作，赞一个。
问好老师！谢谢欣赏点赞！{:4_180:} 亦是金 发表于 2026-3-4 11:30
问好老师！谢谢欣赏点赞！
老朋友别客气。以后你就称我老梦吧。
页:
[1]