克隆一下HTML5可视频谱【待修改】

亚伦影音工作室 发表于 2022-12-5 22:49

本帖最后由亚伦影音工作室于 2022-12-7 17:15 编辑 <br /><br /><style>
#papa { margin: 40px -300px; position: relative; width: 1200px; height: 640px; overflow: hidden; background: gray url('https://www.kumeiwp.com/sub/filestores/2022/11/21/3a841d8c2092c33b345e417aad872bb4.gif') no-repeat center/cover; box-shadow: 8px 4px 12px 0 hsla( 0,0%,0%,.72); user-select: none; }
#tit{position: absolute; left:-180px; top: -10px;background-image:url('https://www.kumeiwp.com/sub/filestores/2022/11/21/3c83d9f29ec214eff259f1eab57e6ac2.gif'); background-size:cover; width:800px; height:200px;font:悟空大字库; font: bold 2em sans-serif; text-align:center; line-height:200px; color:transparent; -webkit-background-clip:text; border:0px #FF4A20 solid; }
</style>
<div id="papa">
<divclass="items "style="text-align: center;position: absolute;top:90px; left:200px;z-index: 20;"><divid="lrcArea"></div></div>
<div id="tit">醉红妆 (DJ伟然版) - 孙艺琪</div>
<audio id="aud" src="https://p4.t57.cn:8399/2021/zw/1/FIY.m4a" loop autoplayloop crossorigin="anonymous"></audio>
<canvas id="mplayer" height="200" width="200" style="position: absolute; cursor: pointer;transform: scale(1);z-index: 40;"></canvas>
</div>
<script>
(function() {
(function(mkPlayer) {let defaults = { player_css: 'left: calc(30% 50px); bottom: 0;',playerCode: '',};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;let ballSize = data.size;mplayer.style.cssText += data.player_css;let context = new AudioContext;let source = context.createMediaElementSource(aud);let analyser = context.createAnalyser();source.connect(analyser);analyser.connect(context.destination);let output = new Uint8Array(361);let length = analyser.frequencyBinCount * 44100 / context.sampleRate | 0;let output2 = new Uint8Array(length);let cxt = mplayer.getContext("2d");(function draw() {let ppColor = cxt.createLinearGradient(0,0,mplayer.width-100,mplayer.height);ppColor.addColorStop(0.4, '#FF0000');ppColor.addColorStop(0.2, '#FFc800');ppColor.addColorStop(0.8, '#FFf000');analyser.getByteFrequencyData(output);cxt.clearRect(0, 0, mplayer.width, mplayer.height);for (j = 0; j < output.length; j++) {let value = output / 10;cxt.strokeStyle = value > 20 ? "#FFD700" : "#FFD700";cxt.beginPath();cxt.lineWidth = 1;cxt.moveTo(100, 100);cxt.lineTo(Math.cos((j * 0.5 + 90) / 180 * Math.PI) * (60 + value) + 100, (- Math.sin((j * 0.5 + 90) / 180 * Math.PI) * (60 + value) + 100));cxt.stroke();cxt.beginPath();cxt.lineWidth = 1;cxt.moveTo(100, 100);cxt.lineTo((Math.sin((j * 0.5) / 180 * Math.PI) * (60 + value) + 100), -Math.cos((j * 0.5) / 180 * Math.PI) * (60 + value) + 100);cxt.stroke();}cxt.beginPath();cxt.lineWidth = 1;cxt.arc(100, 100, 60, 0, 2 * Math.PI, false);cxt.fillStyle = ppColor;cxt.stroke();cxt.fill();analyser.getByteTimeDomainData(output2);let height = 100, width = 120;cxt.beginPath();cxt.strokeStyle = "green";for (j = 0; j < width; j++) {cxt.lineTo(j + 40, 100 - (height / 2 * (output2 / 256 - 0.5)));}cxt.stroke();requestAnimationFrame(draw);})();mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();};mkPlayer.HCPlayer = playCode;})(this);
HCPlayer({});
})();
</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;

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

</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伟然版) - 孙艺琪醉红妆 (DJ伟然版) - 孙艺琪
词：崔伟立
曲：崔伟立
（未经许可,不得翻唱或使用）
半个月亮升起在东山岗
清凌凌的小河门前流淌
桥边那是谁家的红姑娘
花一样的脸庞是俏模样
两只鱼儿嬉戏在画中央
火辣辣的爱情心头荡漾
池边采一缕微微荷花香
执子之手伴你在水一方
精心为你画上红红的妆
今夜你便是我最美的郎
止不住的思念在心中藏
那动人的情歌听你轻轻唱
精心为你画上红红的妆
今夜我便是你最美新娘
对饮百杯泼墨情思千行
在有情岁月里对你慢慢讲
两只鱼儿嬉戏在画中央
火辣辣的爱情心头荡漾
池边采一缕微微荷花香
执子之手伴你在水一方
精心为你画上红红的妆
今夜你便是我最美的郎
止不住的思念在心中藏
那动人的情歌听你轻轻唱
精心为你画上红红的妆
今夜我便是你最美新娘
对饮百杯泼墨情思千行
在有情岁月里对你慢慢讲
精心为你画上红红的妆
今夜你便是我最美的郎
止不住的思念在心中藏
那动人的情歌听你轻轻唱
精心为你画上红红的妆
今夜我便是你最美新娘
对饮百杯泼墨情思千行
在有情岁月里对你慢慢讲
在有情岁月里对你慢慢讲

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

红影发表于 2022-12-6 11:26

这个频谱用在帖子里很漂亮，欣赏亚伦老师好帖{:4_187:}

页: [1]

花潮论坛's Archiver

克隆一下HTML5可视频谱【待修改】