《神山你我》跨域频谱
<meta charset="utf-8"><style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {
margin: 30px-270px;
width: 1300px;
height: 760px;
background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/986a9dd02101875a4ad765334bca0b03_preview.webp)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://pan.suyanw.cn/view.php/b746548581fc556febcef2438091f79c.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 = '#ff0',
meterNum = 1300 / (0+ 1),
capYPositionArray = []; //
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(200,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: 2px; /*字间距: 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: 50px;
font-family:"华文新魏","仿宋体","SimHei", "Arial", "sans-serif";
text-align: center;
color: #3333ff;//#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>
效果漂亮~谢谢醉美管理员精彩分享 klxf 发表于 2026-5-15 23:05
效果漂亮~谢谢醉美管理员精彩分享
谢谢友友光临！
页:
[1]