醉美水芙蓉 发表于 3 天前

冷风吹吹吹

<meta charset="utf-8">
<style> @import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa { margin: 30px -150px; width: 1164px; height: 620px;background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/e1b3d2bd3bc2f56556b91199d6a35b78.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>

<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://sharefs.kugou.com/202603102123/2f71680041ba9cb07cf9d51bb64aa315/v3/260be5b04a52f00fb44b3a00b926e124/yp/full/ap1000_us0_pi409_s226799879.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>
<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>


<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 ? '&nbsp;' : 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 发表于 3 天前

漂亮~谢谢醉美管理员精彩分享

醉美水芙蓉 发表于 3 天前

klxf 发表于 2026-3-10 21:58
漂亮~谢谢醉美管理员精彩分享

可惜听不了多久，有时效！

klxf 发表于 3 天前

醉美水芙蓉 发表于 2026-3-10 22:01
可惜听不了多久，有时效！

有时效？试了一下，这个网站也登录不了

武朝歌 发表于 前天 20:17

好作品，欣赏，学习了。赞！

醉美水芙蓉 发表于 前天 21:09

武朝歌 发表于 2026-3-11 20:17
好作品，欣赏，学习了。赞！

谢谢老师光临！
页: [1]
查看完整版本: 冷风吹吹吹