一、效果展示
HTML5+JS实现一个简单的音频可视化
二、代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>音频可视化</title>
<style></style>
</head>
<body>
<div
style="
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
"
>
<div
class="musicBox"
style="position: relative; width: 500px; height: 500px"
>
<canvas
id="audioCanvas"
width="500"
height="500"
style="position: absolute; left: 0; top: 0"
></canvas
><svg
t="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%);
"
>
<path
d="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>
<path
d="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>
<path
d="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>
<path
d="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>