代码共享 可视频谱 大修改
本帖最后由 亚伦影音工作室 于 2024-2-13 15:13 编辑 <br /><br /><style>#papa { margin: 20px -300px; width: 1200px; height: 600px; background: gray url('https://pic.imgdb.cn/item/638ac14816f2c2beb1383e6b.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#canv { margin: 0px auto 0; display: block; position: absolute; bottom:0px; left: 0px; cursor: pointer; }
</style>
<div id="papa">
<divclass="items "style="text-align: center;position: absolute;top:0px; left:200px;z-index: 4;"><divid="lrcArea"></div></div>
<div style="position: absolute; left:460px; top: 180px; width:300px; opacity: .95;">
<imgsrc="https://pic.imgdb.cn/item/62c78fb4f54cd3f93783b4d5.gif" alt="" /></div>
<div style="position: absolute; left:360px; top: -10px; width:100%; height: 100%; opacity: .85;">
<imgsrc="https://pic.imgdb.cn/item/62720a52094754312988cb03.gif" alt="" /></div>
<div id="audio">
<audio id="aud" src="https://p4.t57.cn:8399/2020/zw/12/DEF.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(https://pic.imgdb.cn/item/654c82b7c458853aefcb569f.png)0 0/100% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/85610539639d79f16fe482dabb62d19e.jpeg)-150px 0px/160% 100%; "></div>
<canvas id="canv" width="1200" height="300"></canvas>
</div>
<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,300,400,0);
ppColor.addColorStop(0, 'hsla(900,100%,44%,.85)');
ppColor.addColorStop(0.3, 'hsla(30,100%,50%,.75)');
ppColor.addColorStop(1, 'hsla(2,100%,60%,.65)');
let ppNum = 100;
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:500px; left:820px;z-index: 250;
bottom: 0;
opacity: 0.2;
transition: all 2s;
transform:scale(0.7);}
#audio:hover{
opacity: 1;
}
</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:400px;height:400px;position: absolute;top:60px; left:50px;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伟然版)
词：崔伟立
曲：崔伟立
编曲：冯丹
吉他：孙越
笛子：丁晓逵
演唱：孙艺琪
混音：苏洲
制作人：崔伟立
（参考马黑/红影代码改编）
人生就像那无边的海儿
岁月珍藏两小无猜儿
谁手中握着那缘分的签儿
月老牵引红红的线儿
每天为你做可口的菜儿
你为生活打拼在外儿
走过了多少那坎坷的弯儿
踏进幸福的门槛儿
少来的夫妻老来的伴儿
一生一世围着你打转儿
走过了多少的风风雨雨
永远把你放在心尖儿
少来的夫妻老来的伴儿
一生一世在你的身边儿
你和我就像那珍珠一串儿
不离不散永远在一块儿
每天为你做可口的菜儿
你为生活打拼在外儿
走过了多少那坎坷的弯儿
踏进幸福的门槛儿
少来的夫妻老来的伴儿
一生一世围着你打转儿
走过了多少的风风雨雨
永远把你放在心尖儿
少来的夫妻老来的伴儿
一生一世在你的身边儿
你和我就像那珍珠一串儿
不离不散永远在一块儿
少来的夫妻老来的伴儿
一生一世围着你打转儿
走过了多少的风风雨雨
永远把你放在心尖儿
少来的夫妻老来的伴儿
一生一世在你的身边儿
你和我就像那珍珠一串儿
不离不散永远在一块儿
不离不散永远在一块儿
</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>
这个没法评分呢，亚伦老师把帖子往上提一点？ 这转动光盘加得漂亮，不过我的这个背景不太适合这首歌曲呢，也许换个背景会更好点吧。欣赏亚伦老师好帖{:4_187:} 红影 发表于 2022-12-4 16:19
这个没法评分呢，亚伦老师把帖子往上提一点？
可不是提一点可以解决的
起个网名好难 发表于 2022-12-4 18:38
可不是提一点可以解决的
是代码里的问题么？你这个是怎么看的，怎么能知道帖子的占位是这么大的呢？ 红影 发表于 2022-12-4 19:10
是代码里的问题么？你这个是怎么看的，怎么能知道帖子的占位是这么大的呢？
移动鼠标到画面的下边，右键 -> 检查 就可以看到各个标签的设置情况
注意图片中两个红圈处
那放置同步歌词的高度不是一般的大，960！ 效果完美。评不了分，检查一下 起个网名好难 发表于 2022-12-4 19:29
移动鼠标到画面的下边，右键 -> 检查 就可以看到各个标签的设置情况
哦哦，我从来想不起来去看这个{:4_173:}谢谢指导{:4_187:} 马黑黑 发表于 2022-12-4 19:48
效果完美。评不了分，检查一下
谢谢老师 ！播放器歌词的高度问题，加个边框收拢一下即可！ 红影 发表于 2022-12-4 20:35
哦哦，我从来想不起来去看这个谢谢指导
最外层加个 overflow:hidden; 或许就解决了。 起个网名好难 发表于 2022-12-4 21:31
最外层加个 overflow:hidden; 或许就解决了。
裁剪代码，我试试！ 起个网名好难 发表于 2022-12-4 21:31
最外层加个 overflow:hidden; 或许就解决了。
饿呢，这样可以防止内部的东西溢出。 红影 发表于 2022-12-4 22:21
饿呢，这样可以防止内部的东西溢出。
这是无可奈何的办法，安排内部标签时就应该考虑它的位置及合适的尺寸。 这个频谱应该蛮漂亮的，就是加这个播放器不美观了，我曾经也是做过H5的频谱，为了想漂亮一点我设置播放器10.结果还是感觉不够完美 起个网名好难 发表于 2022-12-4 22:29
这是无可奈何的办法，安排内部标签时就应该考虑它的位置及合适的尺寸。
嗯，是在不行这也是个补救的办法。
页:
[1]