《热水养花》 - 洋澜一 （试帖亚伦老师频谱播放器）
本帖最后由 亦是金 于 2026-3-5 23:07 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2397890">
<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {
margin: 30px-370px;
width: 1300px;
height: 760px;
background:url(https://file.moyubuluo.com/d/file/2024-09-13/e241c485d2ae1fe391374c0a5d154769.jpg)no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;
overflow: hidden;
border-radius: 22px;
"华文新魏","仿宋体","SimHei", "Arial", "sans-serif";
}
#canv {
display: block;
position: absolute;
width: 1700px;
height: 250px;
top: 0px;
left: 0px;
animation: slider 3s linear infinite ;
transform:scale(1.0); /*变换：比例（0.4）；*/
transform: rotateX(180deg); /*变换：旋转Y（180度）*/
}
#mplayer{
width:180px;
height: 180px;
border: none;
outline: none;
position:absolute;
left:80px;
top: 580px;
z-index: 20;
background: url('https://pic.imgdb.cn/item/652e017cc458853aef6f610b.gif')0 0/100% 100%;
transition: 0.3s all ease;
}
@keyframes rot {
0% { transform: rotate(-30deg); }
25% { transform: rotate(0deg); }
50% { transform: rotate(30deg); }
75% { transform: rotate(0deg); }
100% { transform: rotate(-30deg); }
}
#dt{
position: absolute;
top:0%;
left:0%;
width: 100%;
height: 100%;
z-index:1;
mix-blend-mode: overlay; //叠加
#items{
animation: slider 10s linear infinite ;
position: absolute;
left:20%;
text-align: center;
z-index: 4;
}
@keyframes slider {
from {opacity: 1;filter:hue-rotate(360deg)contrast(130%)brightness(120%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<div id="papa">
<div id="items"><divid="lrcArea"></div></div>
<div id="dt"><img id="Img" src="https://i.uik.cc/view.php/3fc1abc2eb4449964297b1fac17eed6f.gif" width="100%" height="190%" ></div>
<div id="mplayer" >
<img id="picBtn" src="https://pic.imgdb.cn/item/652e017cc458853aef6f610b.gif" width="100%" height="100%"></div>
<audio id="aud" src="https://s2.cldisk.com/sv-w8/audio/5d/fe/03/842bcd4e365547567fb0e4cb6280ea79/audio.mp3" loop="loop" autoplay="autoplay" crossOrigin="anonymous"></audio>
<canvas id='canv' width="1300" height="250"></canvas>
</div>
<script>
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
window.onload = function() {
var audio = document.getElementById('aud');
var ctx = new AudioContext();
var analyser = ctx.createAnalyser();
var audioSrc = ctx.createMediaElementSource(aud);
audioSrc.connect(analyser);
analyser.connect(ctx.destination);
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
var canvas = document.getElementById('canv'),
cwidth = canvas.width,
cheight = canvas.height - 1,
meterWidth = 1, //width of the meters in the spectrum
gap = 2, //gap between meters
capHeight = 1,
capStyle = '#fff',
meterNum = 1300 / (0+ 1),
capYPositionArray = []; //
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(250,120,250,0);
gradient.addColorStop(1, '#00ff00');
gradient.addColorStop(0.8, '#00ff00');
function renderFrame() { var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
var step = Math.round(array.length / meterNum);
ctx.clearRect(0, 0, cwidth, cheight);
for (var i = 0; i < meterNum; i++) {
var value = array;
if (capYPositionArray.length < Math.round(meterNum)) {
capYPositionArray.push(value);
};
ctx.fillStyle = capStyle;
//draw the cap, with transition effect
if (value < capYPositionArray) {
ctx.fillRect(i * 1.5, cheight - (--capYPositionArray), meterWidth, capHeight);
} else {
ctx.fillRect(i * 1, cheight - value, meterWidth, capHeight);
capYPositionArray = value;
};
ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
ctx.fillRect(i * 1.5 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
}
requestAnimationFrame(renderFrame); }
renderFrame();
audio.play();};
</script>
<style>
#lrcArea ul,#lrcArea li,#lrcArea ol,#lrcArea {margin: 15px ; padding: 0;list-style: none;}
#lrcArea{
width: 1100px;
height: 100%;
overflow: hidden;
filter:drop-shadow(#ffffff 2px 0 0)drop-shadow(#ffffff 0 2px 0)drop-shadow(#ffffff -2px 0 0) drop-shadow(#ffffff 0 -2px0);
display: block;
margin: 30px -100px;
}
#lrcArea ul{
width: 100%;
padding: 0;
transition: 0.3s all ease;/*一定要加上不然看着突兀*/
margin: 660px 250px;
}
#lrcArea ul li{
height: 0px;
letter-spacing: 1px; /*字间距: 5px*/
line-height: 0px; /*行间距: 50px*/
font-family:"华文新魏","仿宋体","SimHei", "Arial", "sans-serif";;
font-size: 0px;
color: transparent;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
display: block;
margin: 0px auto;}
#lrcArea ul li.cur{
font-size: 46px;
font-family:"华文新魏","仿宋体","SimHei", "Arial", "sans-serif";
text-align: center;
color: #3333ff;//#ff00cc
font-weight: 300;
margin: 0px auto;
}
</style>
<script id="lrc" type="text">
《 热 水 养 花 》
作词：峦无眠
作曲：吸铁磁
演唱：洋澜一
歌词同步编辑：亦是金
。。。。。。
我羡慕你身边的那个她
可以拥有我梦寐以求的童话
听说雨天你会送伞给她
每个节日还有礼物和鲜花
我恨你为什么先遇见她
后来的我拿到不公平的筹码
我闯过了很多的关卡
可惜最后还是输给了她
为何你对她的热情像热水养花
而你对我的态度 如冷水泡茶
我到底是哪一点比不上她
难到就因为她的出场比我早吗
为何你对她的热情像热水养花
却忽略我 任由我 枯萎凋零呀
若是当初你遇见的 不是她
我们应该就会有好的结局吧
。。。。。。
我恨你为什么先遇见她
后来的我拿到不公平的筹码
我闯过了很多的关卡
可惜最后还是输给了她
为何你对她的热情像热水养花
而你对我的态度 如冷水泡茶
我到底是哪一点比不上她
难到就因为她的出场比我早吗
为何你对她的热情像热水养花
却忽略我 任由我 枯萎凋零呀
若是当初你遇见的 不是她
我们应该就会有好的结局吧
为何你对她的热情像热水养花
而你对我的态度 如冷水泡茶
我到底是哪一点比不上她
难到就因为她的出场比我早吗
为何你对她的热情像热水养花
却忽略我 任由我 枯萎凋零呀
若是当初你遇见的不是她
我们应该就会有好的结局吧
会有好的结局吧
-- 谢谢欣赏 --
</script>
<script type="text/javascript">
var musicPlayer = function() {
return this.init.apply(this, arguments);
};
musicPlayer.prototype = {
constructor: musicPlayer,
init:function(options) {if(isEmptyObj(options) || typeof options !== 'object') return;
this.player = options.player;
this.lrc = options.lrc;
this.lrcArea = options.lrcArea;
//用于保存歌词
this.lrcArr = [];
//用于保存时间戳
this.timestamp = [];
//处理歌词
this.handleLrc(this.lrc);
var that = this;
this.player.addEventListener('play', function() {that.play();
}, false);
this.player.addEventListener('pause',function() {that.pause();
}, false);
//歌词索引
this.idx = 0;},
//格式化歌词
handleLrc:function(lrc) {
var re = /(\[.+\])(.+)?/gm,
ul = cEl('ul'),
frag = document.createDocumentFragment(),
tmpArr,i,len;
this.lrcArea.innerHTML = '';
frag.appendChild(ul);
ul.id = 'c';
this.lrcArea.appendChild(frag);
var txt = lrc.replace(re,function(a,b,c) {
return b + (c === undefined ? ' ' : c) + '\n';});
tmpArr = txt.split('\n');
//处理歌词
for(i = 0,len = tmpArr.length; i < len; i++) {
var item = trim(tmpArr);
if(item.length > 0) {
this.lrcArr.push(item);}
}
frag = document.createDocumentFragment();
for(i = 0,len = this.lrcArr.length; i < len; i++) {
var li = cEl('li');
if(i === 0) {li.className = 'cur';}
li.innerHTML = this.lrcArr.replace(/\[.+\]/i,'')
.replace('','').replace('','');
//处理时间
this.timestamp.push(this.lrcArr.replace(re,function(a,b,c) {return b;
}).replace('[','').replace(']',''));
frag.appendChild(li);}
ul.appendChild(frag);
this.li = g('lrcArea').getElementsByTagName('li');},
//播放
play:function() {this.stop = false;
var that = this,
player = this.player,i,len;
this.t = setInterval(function() {if(that.stop) return;
that.curTime = player.currentTime;
for(i = 0,len = that.timestamp.length - 1; i < len; i++) {
var prevTime = that.formatTimeStamp( that.timestamp ),
nextTime = that.formatTimeStamp( that.timestamp );
//当前播放时间与前后歌词时间比较，如果位于这两者之间则转到该歌词
if( parseFloat( that.curTime ) > prevTime && parseFloat( that.curTime ) < nextTime ) {
that.scrollToLrc(i);
return;}}},300);},
//暂停
pause:function() {this.stop = true;
clearInterval(this.t);},
//格式化时间
formatTimeStamp:function(timestamp) {
var re = /(+):(+)\.(+)/i,
seconds = timestamp.replace(re,function(a,b,c,d) {
return Number(b * 60) + Number(c) + parseFloat('0.'+ d);});
return seconds; },
//歌词滚动
scrollToLrc:function(idx) {
var ds = getOffset(this.li).top,i,len;
//如果歌词索引没有变动，则认为这句没有唱完，不处理
if(this.idx === idx) return;
//否则更新索引值并更新样式和位置
this.idx = idx;
for(i = 0,len = this.li.length; i < len; i++) {
this.li.className = '';}
this.li.className = 'cur';
this.lrcArea.scrollTop = ds - this.lrcArea.offsetHeight / 2;}};
function g(id) {return typeof id === 'string' ? document.getElementById(id) : id;}
function cEl(el) {return document.createElement(el);}
function trim(str) {return str.replace(/(^\s*)|(\s*$)/g, "");}
function isEmptyObj(o) {for(var p in o) return false;
return true;}
function getOffset(el) {var parent = el.offsetParent,
left = el.offsetLeft,
top = el.offsetTop;
while(parent !== null) {left += parent.offsetLeft;
top += parent.offsetTop;
parent = parent.offsetParent;}
return {left: left,top: top};}
var p = new musicPlayer({player: g('aud'),
lrc: g('lrc').innerHTML,lrcArea: g('lrcArea')});
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';image1.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image= document.getElementById("Img");
var image1= document.getElementById("picBtn");
mplayer.onclick =function() { aud.paused ? ( image.play(),image1.play(),aud.play()):(image.stop(),image1.stop(),aud.pause())};
items.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>items.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>items.style.animationPlayState = 'paused');
</script>
</td></tr></table> 欣赏老师的精彩音画，问候点赞！{:4_199:} 这个题目挺有趣。 梦江南 发表于 2026-3-5 08:22
欣赏老师的精彩音画，问候点赞！
问好老师！谢谢欣赏点赞！{:4_187:} 庶民 发表于 2026-3-5 08:54
这个题目挺有趣。
问好老师！祝欣赏快乐！{:4_180:} https://pic.rmb.bdstatic.com/bjh/news/3deff8878a8677d7e1fcdd950ed680f3.gif 也曾年轻 发表于 2026-3-5 09:18
问好老师！谢谢欣赏点赞！{:4_180:} 不会是开水也能养花吧。{:5_117:} 倒挂频谱漂亮，小播也很独特，歌词同步奇妙，变色背景也漂亮。
欣赏亦是金老师好帖{:4_187:} 梦油 发表于 2026-3-5 10:59
不会是开水也能养花吧。
哈哈哈，温水能养花哦！{:4_198:} 红影 发表于 2026-3-5 14:33
倒挂频谱漂亮，小播也很独特，歌词同步奇妙，变色背景也漂亮。
欣赏亦是金老师好帖
问好红影！谢谢欣赏！我只是照葫芦画瓢做个帖子玩玩！{:4_189:} 亦是金 发表于 2026-3-5 15:46
哈哈哈，温水能养花哦！
玩笑、玩笑。 漂亮~谢谢亦是金老师分享好歌{:4_191:} 亦是金 发表于 2026-3-5 15:48
问好红影！谢谢欣赏！我只是照葫芦画瓢做个帖子玩玩！
做得很成功{:4_204:} 梦油 发表于 2026-3-5 16:46
玩笑、玩笑。
{:4_180:} 杨帆 发表于 2026-3-5 17:42
漂亮~谢谢亦是金老师分享好歌
问好老师！谢谢欣赏点赞！{:4_180:} 红影 发表于 2026-3-5 22:42
做得很成功
谢谢夸奖！{:4_187:} 亦是金 发表于 2026-3-5 22:54
谢谢夸奖！
不客气啊，问好亦是金老师{:4_187:} 倒频谱，变色效果，漂亮 欣赏前辈的精彩制作，小辣椒欣赏加学习{:4_187:}
页:
[1]
2