频谱播放器-从此我们再也没见
本帖最后由 亚伦影音工作室 于 2026-3-11 09:09 编辑 <br /><br /><style> @import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");#papa { margin: 30px -250px; width: 1164px; height: 620px;background:url(https://pic1.imgdb.cn/item/692e1efa11af9ce9c3e936db.jpg)no-repeat center/cover;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;"Ma Shan Zheng","仿宋体","SimHei", "Arial", "sans-serif";}
#canv {display: block; position: absolute; top: 370px; left: 0px; animation: slider 3s linear infinite ;}
#mplayer{width:200px; height: 120px;border: none;outline: none;position:absolute; left:40px; top: 10px;z-index: 20;background: url('https://pic.imgdb.cn/item/638fd787b1fccdcd36503624.gif')0 0/100% 100%; transition: 0.3s all ease; }
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:1; mix-blend-mode:soft-light; }
#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>
<style>
#lrcArea ul,#lrcArea li,#lrcArea ol,#lrcArea {margin: 15px ; padding: 0;list-style: none;}
#lrcArea{width: 980px;height: 200%;
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: 0px -100px;}
#lrcArea ul{width: 100%;
padding: 0;
transition: 0.3s all ease;/*一定要加上不然看着突兀*/
margin: 480px 0px;
}
#lrcArea ul li{height: 0px;
line-height: 0px;
font-family:"Ma Shan Zheng","仿宋体","SimHei", "Arial", "sans-serif";;
font-size: 0px;
color: #000000;
font-weight: 400;
transition: .3s all ease;/*一定要加上不然看着突兀*/
display: block;
margin: 0px auto;}
#lrcArea ul li.cur{font-size: 45px;
font-family:"Ma Shan Zheng","仿宋体","SimHei", "Arial", "sans-serif";text-align: center;
color: #FF0000;
font-weight: 400; margin: 0px auto;}
</style>
<div id="papa">
<div id="items"><divid="lrcArea"></div></div>
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/64f942ca661c6c8e5436b629.gif" width="100%" height="100%"></div>
<div id="mplayer" >
<img id="picBtn" src="https://pic.imgdb.cn/item/638fd787b1fccdcd36503624.gif" width="100%" height="100%"></div>
<audio id="aud" src="https://s2.cldisk.com/sv-w8/audio/90/ce/4c/608b2459d0bd60889f186cc20753e644/audio.mp3" loop="loop" autoplay="autoplay" crossOrigin="anonymous"></audio>
<canvas id='canv' width="1400" 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 = 1400 / (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 * 2, 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 * 2 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
}
requestAnimationFrame(renderFrame); }
renderFrame();
audio.play();};
</script>
<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>
欣赏佳作，问候亚伦。
页:
[1]