Boom沙卡拉卡 （学习黑黑音频可视效果）
<style>
#papa { margin: 120px 0 0 calc(50% - 681px); width: 1200px; height: 675px; background: gray url('https://pic.imgdb.cn/item/638ac14816f2c2beb1383e6b.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#canv { margin: 50px auto 0; display: block; position: absolute; bottom:0px; left: 0px; cursor: pointer; }</style>
<div id="papa">
<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>
<audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1669989505815004.mp3" autoplay loop crossOrigin="anonymous"></audio>
<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(190,100%,44%,.85)');
ppColor.addColorStop(0.3, 'hsla(30,100%,50%,.75)');
ppColor.addColorStop(1, 'hsla(295,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> 频谱的配色配不好，还是黑黑原来的配色好看。就这样吧，当是个尝试{:4_173:} 红影 发表于 2022-12-3 12:07
频谱的配色配不好，还是黑黑原来的配色好看。就这样吧，当是个尝试
可以的，很不错 这首歌开始以为外语，听了半天不是的。被他吐字这么不清，让我听错了{:4_173:} Boom沙卡拉卡歌手:Hertz赫兹
Like Boom 啥卡拉卡一起开个Party
Voom 加大马力 副驾装满money
Boom 啥卡拉卡一起开个Party
Voom Verse响起 让你感到Crazy
在我家的几百平米House 带我最好的 Homie 开个Party
就是这个样子 不停在尝试 放肆的方式
Bounce ，
不管背后 谁对你DIss 瘦子还是胖子 扣你的帽子 捅你的刀子 敢造次 告辞 送你上 报纸
VOOM ~每天都要保持好的心情，
VOOM ~不开心 那就按个暂停
在蓄力我的快乐源泉 最后换个发型
从头开始 从来不是因为爱情。
派对不会感到乏 味音乐将你麻 醉
嘴巴就是装
备被我调大分贝 专辑特别前卫 听完我都不想睡。
带上身边迷妹在家开个演唱会在开瓶
香槟.牙上镶金.我的Homie他们都是年少多金 hold on
哈哈 深夜Party还在滴答今年的我 刚满十八 skr skr
啥卡拉卡
啥卡拉卡
啥卡拉卡
Like Boom 啥卡拉卡一起开个Party
Voom 加大马力 副驾装满money
Boom 啥卡拉卡一起开个Party
Voom Verse响起 让你感到Crazy
Big House堪比Disney （迪士尼）
快点倒满happy Whisky（威士忌）
放你最 爱的 857
DJ drop the Beat 让你脑袋漂个移
放轻松那 生活压力把你压 扁了头
冷暖自知 他们只会问你发 什么愁
种瓜得瓜 的瓜因为 种的瓜 还没熟
VOSE嘴巴随便rap ·~~~ everybody know
在这个party随便 秀让 吴亦 凡唱 6
在你头上暴扣 wow
我对开心和money从来不需要斟酌如 何把音乐玩到出 格再到出国 he
看我每天开着超跑 踩下的油门 就是甩掉烦恼
猜不透我韵脚 当我开着游轮 你才开始起跑
Wow 他们都想 做到 我的副驾
wow啥卡拉卡每天都像度假 啥卡拉卡 亲爱的，好漂亮{:4_178:} 马黑黑 发表于 2022-12-3 12:09
可以的，很不错
试过更鲜艳的，觉得也不好，最后就这样了{:4_189:} 小辣椒 发表于 2022-12-3 13:25
亲爱的，好漂亮
我也是感觉漂亮{:4_173:} 红影 发表于 2022-12-3 14:05
试过更鲜艳的，觉得也不好，最后就这样了
有层次感就好 好时尚啊，影子朋友。 很漂亮的频谱，欣赏问好！{:4_187:} 马黑黑 发表于 2022-12-3 14:12
有层次感就好
发现这个频谱怎么配都好看呢{:4_173:} 梦油 发表于 2022-12-3 14:55
好时尚啊，影子朋友。
呵呵，只是找个图图，然后套用一下代码呀{:4_173:} 梦缘 发表于 2022-12-3 16:13
很漂亮的频谱，欣赏问好！
多谢梦缘鼓励，晚上好{:4_187:} 红影 发表于 2022-12-3 20:32
呵呵，只是找个图图，然后套用一下代码呀
你真行！{:4_199:} 红影 发表于 2022-12-3 20:31
发现这个频谱怎么配都好看呢
爱屋及乌的心理？ 梦油 发表于 2022-12-3 20:51
你真行！
谢谢梦油鼓励{:4_187:} 马黑黑 发表于 2022-12-3 22:28
爱屋及乌的心理？
试了好几种配色，出来的觉得都好看，这个效果本来就好看{:4_173:} 红影 发表于 2022-12-3 22:44
试了好几种配色，出来的觉得都好看，这个效果本来就好看
额，可能是新鲜感造成的 马黑黑 发表于 2022-12-3 22:50
额，可能是新鲜感造成的
一边试一边看各种效果，其乐无穷{:4_173:}