前端:音频可视化（H5+js版本）

一、效果展示

HTML5+JS实现一个简单的音频可视化

二、代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>音频可视化</title><style></style></head><body><divstyle="display: flex;justify-content: center;align-items: center;flex-direction: column;"><divclass="musicBox"style="position: relative; width: 500px; height: 500px"><canvasid="audioCanvas"width="500"height="500"style="position: absolute; left: 0; top: 0"></canvas><svgt="1716202136861"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="4458"width="68"height="68"style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);"><pathd="M701.6 196.53m-15 0a15 15 0 1 0 30 0 15 15 0 1 0-30 0Z"fill="#E159D3"p-id="4459"></path><pathd="M956.29 310.21a482.39 482.39 0 1 0-847.9 452v120.36c0 71.4 58.42 130.76 129.82 130.1a127.79 127.79 0 0 0 100.44-49.85 120.4 120.4 0 0 0 21-103.43c-5.58-21.49-11.71-59-11.71-71.71S354 737.47 359.62 716a120.4 120.4 0 0 0-21-103.43 128.55 128.55 0 0 0-209.75 9.13c-20.91-64.82-25.25-135-11.25-205.6 28.7-144.71 172.14-286.19 317.16-313.27C690.37 55.1 914.24 250.88 914.24 498a402.4 402.4 0 0 1-19.36 123.71 128.55 128.55 0 0 0-209.74-9.13 120.4 120.4 0 0 0-21 103.43c5.58 21.49 11.71 59 11.71 71.71s-6.13 50.22-11.71 71.71a120.4 120.4 0 0 0 21 103.43 127.8 127.8 0 0 0 101.67 49.85 128.59 128.59 0 0 0 128.58-128.62V762.25a483 483 0 0 0 40.9-452z m-767.9 381.87c0-26.24 20.49-48.33 46.71-49.34a48.41 48.41 0 0 1 40.41 18.85 39.94 39.94 0 0 1 6.78 34.34c-5.84 22.48-14.29 68.12-14.29 91.85s8.45 69.37 14.29 91.85a39.94 39.94 0 0 1-6.78 34.37A48.38 48.38 0 0 1 237 932.86a48.64 48.64 0 0 1-48.64-48.64z m647 191.4c0 26.24-20.49 48.33-46.71 49.34a48.41 48.41 0 0 1-40.4-18.82 39.94 39.94 0 0 1-6.78-34.34c5.84-22.48 14.29-68.12 14.29-91.85s-8.45-69.37-14.29-91.85a39.94 39.94 0 0 1 6.78-34.34 48.41 48.41 0 0 1 40.41-18.85c26.22 1 46.71 23.1 46.71 49.34z"fill="#E159D3"p-id="4460"></path><pathd="M651.51 154.09a371.39 371.39 0 0 0-419.35 100.28 373.69 373.69 0 0 0-30.07 39.56 15 15 0 1 0 25 16.52A341.48 341.48 0 0 1 512 157a339.17 339.17 0 0 1 128.23 24.93 15 15 0 1 0 11.29-27.79z"fill="#E159D3"p-id="4461"></path><pathd="M456.91 668.17c-20.66 1.25-37.52 19.95-37.52 40.65v157.92c0 20.7 16.85 39.4 37.52 40.65a40 40 0 0 0 42.48-39.93V708.1a40 40 0 0 0-42.48-39.93zM563.91 698.12c-20.66 1.25-37.52 19.95-37.52 40.65v98c0 20.7 16.85 39.4 37.52 40.65a40 40 0 0 0 42.48-39.93V738a40 40 0 0 0-42.48-39.88z"fill="#48BCFF"p-id="4462"></path></svg></div><audio id="audio" src="./audio/游戏城大冒险.mp3" controls></audio></div></body><script>//需要可视化的数据let audioArr;//我们需要一个音乐播放器和一个canvas进行显示const audioElement = document.getElementById("audio");const canvas = document.getElementById("audioCanvas");//canvas的一些基本设置const ctx = canvas.getContext("2d");const centerX = canvas.width / 2;const centerY = canvas.height / 2;const radius = 50; // 圆的半径//初始化let isInit = false;let analyser = null;// 当音乐播放audioElement.onplay = () => {if (!isInit) {isInit = true;}const audioContext = new AudioContext(); // 创建音频上下文const audioSrc = audioContext.createMediaElementSource(audioElement); // 创建音频源analyser = audioContext.createAnalyser(); // 创建分析器analyser.fftSize = 128; // 设置傅里叶变换的大小,影响线条密度audioArr = new Uint8Array(analyser.frequencyBinCount); // 创建一个无符号字节数组存储频率数据，该API参考ES6文档audioSrc.connect(analyser); // 连接音频源和分析器analyser.connect(audioContext.destination); // 连接分析器和音频目的地//动画开始animate();};// 绘制圆形const drawGradientCircle = () => {ctx.beginPath();// 创建一个从中心点向外的径向渐变const grd = ctx.createLinearGradient(centerX - radius,centerY - radius,centerX + radius,centerY + radius);grd.addColorStop("0", "purple");grd.addColorStop("0.3", "magenta");grd.addColorStop("0.5", "blue");grd.addColorStop("0.6", "green");grd.addColorStop("0.8", "yellow");grd.addColorStop(1, "red");ctx.strokeStyle = grd;ctx.arc(centerX, centerY, radius - 2, 0, Math.PI * 2); // 绘制一个完整的圆ctx.stroke(); // 画圆复制代码};//绘制线条const drawLinesFromCircle = () => {ctx.lineWidth = 2;//使用音频的频率数据绘制线条//为了美观，我们绘制两条线，一条是频率数据，另一条是对称的//也可以去使用其它的方式绘制线条audioArr.forEach((value, index) => {const baseAngle = (index / audioArr.length) * Math.PI * 2; // 基础角度const angle1 = baseAngle; // 第一条线的角度const angle2 = baseAngle + Math.PI; // 对称线的角度，相差π(180度)// 绘制第一条线{const endX1 = centerX + radius * Math.cos(angle1);const endY1 = centerY + radius * Math.sin(angle1);const startX1 = centerX + (radius + value * 0.4) * Math.cos(angle1); // 使用value控制长度const startY1 = centerY + (radius + value * 0.4) * Math.sin(angle1);ctx.beginPath();ctx.moveTo(startX1, startY1);ctx.lineTo(endX1, endY1);ctx.strokeStyle = `hsl(${index * 3.6}, 100%, 50%)`;ctx.stroke();}// 绘制对称的第二条线{const endX2 = centerX + radius * Math.cos(angle2);const endY2 = centerY + radius * Math.sin(angle2);const startX2 = centerX + (radius + value * 0.4) * Math.cos(angle2);const startY2 = centerY + (radius + value * 0.4) * Math.sin(angle2);ctx.beginPath();ctx.moveTo(startX2, startY2);ctx.lineTo(endX2, endY2);ctx.strokeStyle = `hsl(${(index + audioArr.length / 2) * 3.6}, 100%, 50%)`; // 调整颜色以保持对称性且有所区别ctx.stroke();}});};//播放动画const animate = () => {ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布if (!isInit) return;analyser.getByteFrequencyData(audioArr); // 获取频率数据drawGradientCircle(); // 绘制圆形drawLinesFromCircle(); // 绘制伸展的线条requestAnimationFrame(animate); // 重复绘制以创建动画效果};</script>
</html>