一杯烈酒一世孤独 (DJ快猫版) - 李志洲[火焰频谱] - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2022-12-6 23:46

一杯烈酒一世孤独 (DJ快猫版) - 李志洲[火焰频谱]

本帖最后由亚伦影音工作室于 2022-12-7 08:57 编辑 <br /><br /><style>
#papa { margin: 30px -300px; width: 1200px; height: 620px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dba0cb38039a6f2af2f0c043e5280498.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; overflow:hidden;}
#canv { margin: 0px auto 0; display: block; position: absolute; bottom:0px; left: 0px; cursor: pointer;filter:blur(7px)brightness(100%) drop-shadow(#000000 0 0 2px)drop-shadow(#FF0000 0 0 2px)}
</style>
<style type="text/css">
.picBtn {width: 80px;
   height: 142px;border: none;
   outline: none;
   position:absolute; left:880px; top: 440px;z-index: 20;transition: 0.3s all ease;
   background: url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.gif')0 0/100% 100%;
   </style>
<div id="papa">
<divclass="items "style="text-align: center;position: absolute;top:30px; left:200px;z-index: 4;"><divid="lrcArea"></div></div>
<button id="picBtn" class="picBtn"></button>
<div id="audio">
<audio id="aud" src="https://p4.t57.cn:8399/2022/zw/1/LAC.m4a" loop="loop" autoplay="autoplay"controls="controls" crossOrigin="anonymous"></audio></div>
<div class="img_border" ><img id="aplay" style="width: 300px; height: 300px;mask: radial-gradient(transparent 20px,#red 0);-webkit-mask: radial-gradient(transparent 20px,red 0);background: url(http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png)0 0/100% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ff17fabf0b4b48ae3a8e76448904914f.jpg)-40px 0px/160% 100%; "></div>
<canvas id="canv" width="1200" height="300"></canvas>
</div>
<script language="javascript">

var mu = document.getElementById('aud');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
   mu.paused ? (mu.play(), btn.style.background="url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.gif')") : (mu.pause(), btn.style.background="url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.png')");
}

mu.addEventListener("ended", function(){
   btn.style.background="url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.png')";
})

</script>
<script>
(function () {

let Act = new AudioContext();

let audSrc = Act.createMediaElementSource(aud);

let analyser = Act.createAnalyser();

audSrc.connect(analyser);

analyser.connect(Act.destination);

let ctx = canv.getContext('2d');

let width = canv.width;

let height = canv.height;

let ppColor = ctx.createLinearGradient(400,330,400,0);

ppColor.addColorStop(0.6, '#fff000');

ppColor.addColorStop(0.4, '#FF0000');

ppColor.addColorStop(0, '#800000');

let ppNum = 200;

let voiceHeight = new Uint8Array(analyser.frequencyBinCount);

(function draw() {

analyser.getByteFrequencyData(voiceHeight);

let step = Math.round(voiceHeight.length / ppNum);

ctx.clearRect(0, 0, width, height);

for (let j = 0; j < ppNum; j++) {

let audiheighteight = voiceHeight;

ctx.fillStyle = ppColor;

ctx.fillRect(width / 2 + (j * 8), height, 4, -audiheighteight);

ctx.fillRect(width / 2 - (j * 8), height, 4, -audiheighteight);

}

window.requestAnimationFrame(draw);

})();

canv.onclick = () => aud.paused ? aud.play() : aud.pause();

})();

</script>

<style type="text/css">#audio{

position: absolute;top:520px; left:820px;z-index: 250;

bottom: 0;

opacity: 0;

transition: all 2s;

transform:scale(0.7);}

#audio:hover{

opacity: 0;

}

</style>

<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;

text-align: center;

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: 35px;

font-family:悟空大字库;text-align: center;

color: #FF0000;

font-weight: bold; margin: 0px auto;}

/*mv动画*/

.img_border{display:inline-block;width:300px;height:300px;position: absolute;top:60px; left:800px;z-index: 14;}

.img_border #aplay{border:2px solid #cccccc;border-radius:50%; transition: .3s all ease;/*一定要加上不然看着突兀*/ }

.z360z{animation:rotating 10s linear infinite;

}@keyframes rotating{

from {transform: rotate(0deg);}

to {transform: rotate(360deg);}

}

</style>

<style type="text/css">.items{animation: slider 0.26s linear infinite ;}

@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">
一杯烈酒一世孤独 (DJ快猫版) - 李志洲
词：李若夕
曲：春妹
制作人：米奇
Op：星汉马文化
世人皆说爱情很苦
为什么我却不懂认输
只怪当初作茧自缚
最后才被情伤到麻木
世人皆问情为何物
我却压上了所有赌注
我的深情我的付出
你总是假装从不在乎
一杯烈酒一世孤独
千言万语也没能留住
总逃不出记忆的埋伏
回忆是你赐我的礼物
一杯烈酒一世孤独
不要问我爱你有多苦
想起你离别时的祝福
我只能忍着眼泪退出
世人皆问情为何物
我却压上了所有赌注
我的深情我的付出
你总是假装从不在乎
一杯烈酒一世孤独
千言万语也没能留住
总逃不出记忆的埋伏
回忆是你赐我的礼物
一杯烈酒一世孤独
不要问我爱你有多苦
想起你离别时的祝福
我只能忍着眼泪退出
我只能忍着眼泪退出
</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 type="text/javascript">
var my_audio =document.getElementById("aud");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(lrc);

</script>

红影发表于 2022-12-7 08:48

漂亮的频谱音画，欣赏亚伦老师好帖{:4_199:}

樵歌发表于 2022-12-7 09:55

这个挡次太高，音质超好！

梦缘发表于 2022-12-7 11:01

欣赏老师的好帖，好看的频谱！{:4_187:}

页: [1]

花潮论坛's Archiver

一杯烈酒一世孤独 (DJ快猫版) - 李志洲[火焰频谱]