《深情依旧》朱俊卫
本帖最后由 亦是金 于 2026-3-7 11:52 编辑 <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-top: 120px;
left: calc(50% - 81px);
transform: translateX(-50%);
width: 1300px;
height: 760px;
background:url(https://pic1.imgdb.cn/item/69ab888659f896a650d45184.png)no-repeat center/cover;
border-radius: 22px;
border: thick double#88abfa;
position: relative;
overflow: hidden;
"华文新魏","仿宋体","SimHei", "Arial", "sans-serif";
}
#canv {
display: block;
position: absolute;
width: 1500px;
height: 250px;
top: 500px;
left: 130px;
animation: slider 3s linear infinite ;
transform:scale(1.2); /*变换：比例（0.4）；*/
}
#mplayer{
width: 250px;
height: 250px;
border: none;
outline: none;
position:absolute;
left:50px;
top: -50px;
z-index: 20;
background: url('https://pic1.imgdb.cn/item/69aa988f59f896a650d3f69f.png')0 0/100% 100%;
transition: 0.3s all ease;
cursor: pointer; //游标：指针；
}
@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://pic1.imgdb.cn/item/69aaf68d59f896a650d442d2.gif" width="100%" height="100%" ></div>
<div id="mplayer" ><img id="picBtn" src="https://wimg.588ku.com/gif620/24/07/24/4b021aeafdd4493558e2b5318c93a706.gif" width="100%" height="100%"></div>
<audio id="aud" src="https://s2.cldisk.com/sv-w7/audio/eb/97/23/a45624b5f39290971f912c7b86c1ed88/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 = 2,
capStyle = '#00ffd8',//频谱帽颜色
meterNum = 1300 / (0+ 1),
capYPositionArray = []; //
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(250,110,250,0);
gradient.addColorStop(1, '#ff0000');
gradient.addColorStop(0.6, '#fc5919');//频谱主颜色
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);
}
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 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;
margin: 30px -100px;
}
#lrcArea ul{
width: 100%;
padding: 0;
transition: 0.3s all ease;/*一定要加上不然看着突兀*/
margin: 20px 220px;
}
#lrcArea ul li{
height: 0px;
letter-spacing: 2px; /*字间距: 5px*/
line-height: 5px; /*行间距: 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: #ff00cc;
font-weight: 300;
margin: 0px auto;
}
</style>
<script id="lrc" type="text">
亦是金在线音乐 欢迎您
《 醉 红 妆 》
词曲: 崔伟立
编曲：牛渡
演唱：孙艺琪
Lrc编辑：亦是金
。。。。。。
半个月亮升起在东山岗
清凌凌的小河门前流淌
桥边那是谁家的红姑娘
花一样的脸庞是俏模样
两只鱼儿嬉戏在画中央
火辣辣的爱情心头荡漾
池边采一缕微微荷花香
执子之手伴你在水一方
精心为你画上红红的妆
今夜你便是我最美的郎
止不住的思念在心中藏
那动人的情歌听你轻轻唱
精心为你画上红红的妆
今夜我便是你最美新娘
对饮百杯泼墨情思千行
在有情岁月里对你慢慢讲
。。。。。。
两只鱼儿嬉戏在画中央
火辣辣的爱情心头荡漾
池边采一缕微微荷花香
执子之手伴你在水一方
精心为你画上红红的妆
今夜你便是我最美的郎
止不住的思念在心中藏
那动人的情歌听你轻轻唱
精心为你画上红红的妆
今夜我便是你最美新娘
对饮百杯泼墨情思千行
在有情岁月里对你慢慢讲
精心为你画上红红的妆
今夜你便是我最美的郎
止不住的思念在心中藏
那动人的情歌听你轻轻唱
精心为你画上红红的妆
今夜我便是你最美新娘
对饮百杯泼墨情思千行
在有情岁月里对你慢慢讲
在有情岁月里对你慢慢讲
-- 谢谢欣赏 --
</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-2-10 20:50
曲好图美，亦是金朋友新年快乐！
问好梦油老师！谢谢欣赏点赞！新年快乐！{:4_180:} 红影 发表于 2026-2-10 21:02
歌曲好听，花美人更美。欣赏亦是金老师好帖
问好红影！谢谢欣赏点评！{:4_187:} https://upbbsimg.cehome.com/cms/260121/378d316a7fbd4bc1b64695f07f7fb62a.!W550
没明白画频谱的算法 本帖最后由 亦是金 于 2026-2-11 08:41 编辑
也曾年轻 发表于 2026-2-10 21:50
没明白画频谱的算法
@也曾年轻 问好老师！我不会代码制作。只是把过去的旧帖修改（把频谱改为倒频谱）而成。https://huachaowang.com/forum.php?mod=viewthread&tid=87113。{:4_180:} 亦是金 发表于 2026-2-10 21:11
问好红影！谢谢欣赏点评！
不客气，问亦是金老师{:4_187:} 亦是金 发表于 2026-2-10 23:07
@也曾年轻 问好老师！我不会代码制作。只是把过去的旧帖修改（把频谱改为倒频谱）而成。https://huacha ...
没事， 我慢慢琢磨 红影 发表于 2026-2-11 09:49
不客气，问亦是金老师
中午好!{:4_187:} 也曾年轻 发表于 2026-2-11 10:26
没事， 我慢慢琢磨
我等待分享老师的新播放器代码！{:4_180:} 画面漂亮，歌曲动人，欣赏老师佳作！{:4_187:} 梦江南 发表于 2026-2-11 12:49
画面漂亮，歌曲动人，欣赏老师佳作！
问好梦江南老师！谢谢欣赏点赞！{:4_187:} 亦是金 发表于 2026-2-11 12:28
我等待分享老师的新播放器代码！
现在没搞明白的东西太多，向大家学习吧 也曾年轻 发表于 2026-2-11 16:57
现在没搞明白的东西太多，向大家学习吧
致敬也曾年轻老师！老师谦虚了！{:4_190:} 亦是金 发表于 2026-2-11 17:23
致敬也曾年轻老师！老师谦虚了！
年纪大了，脑筋锈掉学习费劲 亦是金 发表于 2026-2-11 12:27
中午好!
问好亦是金，晚上好{:4_187:} 前辈现在精彩多多，小辣椒欣赏加学习{:4_187:} 小辣椒 发表于 2026-2-11 21:42
前辈现在精彩多多，小辣椒欣赏加学习
问好小辣椒！谢谢欣赏点赞！祝小年快乐！{:4_187:}
页:
[1]