测试音乐 频谱外链
本帖最后由 亚伦影音工作室 于 2025-3-3 20:40 编辑 <br /><br /><style>#papa { margin: 30px -300px; width: 1164px; height: 620px;background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/85610539639d79f16fe482dabb62d19e.jpeg)no-repeat center/cover;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;}
#canv {display: block; position: absolute; top: 370px; left: 0px; }
#mplayer{width:200px; height: 120px;border: none;outline: none;position:absolute; left:940px; top: 460px;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; }
</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.ananas.chaoxing.com/sv-w7/audio/17/a4/2f/da1aa41f467563df8304f74152c55a4f/audio.mp3" loop="loop" autoplay="autoplay" crossOrigin="anonymous"></audio>
<canvas id='canv' width="1286" 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 - 9,
meterWidth = 9, //width of the meters in the spectrum
gap = 2, //gap between meters
capHeight = 2,
capStyle = '#fff',
meterNum = 1400 / (10 + 2),
capYPositionArray = []; //
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(350,220,350,0);
gradient.addColorStop(1, '#ffff00');
gradient.addColorStop(0.6, '#00ff00');
gradient.addColorStop(0, '#3366ff');
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 * 12, cheight - (--capYPositionArray), meterWidth, capHeight);
} else {
ctx.fillRect(i * 12, cheight - value, meterWidth, capHeight);
capYPositionArray = value;
};
ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
ctx.fillRect(i * 12 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
}
requestAnimationFrame(renderFrame); }
renderFrame();
audio.play();};
</script>
<style>
#lrcArea ul,#lrcArea li,#lrcArea ol,#lrcArea {margin: 55px ; 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%;150px;
padding: 0;
transition: 0.3s all ease;/*一定要加上不然看着突兀*/
margin: 480px 0px;
}
#lrcArea ul li{height: 0px;
line-height: 0px;
font-family:微软雅黑;
font-size: 0px;
color: #000000;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
display: block;
margin: 0px auto;}
#lrcArea ul li.cur{font-size: 45px;
font-family:微软雅黑;text-align: center;
color: #FF0000;
font-weight: bold; margin: 0px auto;}
</style>
<style type="text/css">#items{animation: slider 0.26s linear infinite ;position: absolute;left:20%;text-align: center;z-index: 4;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</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>
亚伦老师找到可以跨域的上传地方了？这个看起来不错啊，也可以完美地支持频谱相应呢{:4_187:} 一直觉得相应式频谱是很不错的，只是它对音频资源的要求高了点。恭喜亚伦老师又找到个可以跨域的地方{:4_187:} 欣赏老师的佳作，点赞！
欣赏，喜欢，克隆不了，只能眼馋干着急！{:4_198:}
页:
[1]