js可视化音乐的简单案例
时间: 2023-10-20 11:15:38 浏览: 69
以下是一个简单的使用 JavaScript 可视化音乐的案例:
```html
<!DOCTYPE html>
<html>
<head>
<title>音乐可视化</title>
<style>
canvas {
background-color: #000;
}
</style>
</head>
<body>
<audio id="audio" controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
<canvas id="canvas"></canvas>
<script>
// 获取 canvas 元素
var canvas = document.getElementById("canvas");
// 设置 canvas 的宽和高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 获取 canvas 的上下文
var ctx = canvas.getContext("2d");
// 获取音频元素
var audio = document.getElementById("audio");
// 创建音频上下文
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// 创建音频源节点
var source = audioCtx.createMediaElementSource(audio);
// 创建分析器节点
var analyser = audioCtx.createAnalyser();
// 连接节点
source.connect(analyser);
analyser.connect(audioCtx.destination);
// 设置分析器的参数
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
// 绘制可视化效果
function draw() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 获取音频数据
analyser.getByteFrequencyData(dataArray);
// 设置绘制样式
ctx.fillStyle = "#fff";
ctx.lineWidth = 2;
ctx.strokeStyle = "#fff";
ctx.beginPath();
var sliceWidth = canvas.width * 1.0 / bufferLength;
var x = 0;
for (var i = 0; i < bufferLength; i++) {
var v = dataArray[i] / 128.0;
var y = v * canvas.height / 2;
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
x += sliceWidth;
}
ctx.lineTo(canvas.width, canvas.height / 2);
ctx.stroke();
requestAnimationFrame(draw);
}
// 开始绘制
draw();
</script>
</body>
</html>
```
以上代码实现了一个简单的音乐可视化效果。用户可以在页面上播放音乐,并且通过 canvas 元素将音频数据可视化为波形图。在代码中,使用了 Web Audio API 中的 AnalyserNode 节点来获取音频数据,并且使用 canvas 绘制波形图。