前端显示波形图的完整代码不使用库
时间: 2024-01-25 21:04:20 浏览: 22
如果不使用 WaveSurfer.js 库,我们可以使用 HTML5 的 Canvas 元素绘制波形图。以下是一个使用 HTML5 Canvas 元素绘制波形图的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Waveform Example</title>
<style>
#waveform {
width: 100%;
height: 200px;
}
</style>
</head>
<body>
<canvas id="waveform"></canvas>
<script>
var audioContext = new AudioContext();
var audioElement = new Audio('demo.mp3');
var audioSource = audioContext.createMediaElementSource(audioElement);
var canvas = document.getElementById('waveform');
var canvasContext = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var dataLength = canvasWidth;
var dataArray = new Uint8Array(dataLength);
audioElement.addEventListener('canplaythrough', function () {
audioElement.play();
}); // 等待音频加载完成后自动播放
function drawWaveform() {
requestAnimationFrame(drawWaveform); // 循环绘制波形图
canvasContext.clearRect(0, 0, canvasWidth, canvasHeight);
canvasContext.beginPath();
canvasContext.moveTo(0, canvasHeight / 2);
audioSource.connect(audioContext.destination);
var bufferLength = audioSource.context.sampleRate / 10;
var analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
var buffer = new Float32Array(bufferLength);
analyser.getFloatTimeDomainData(buffer);
for (var i = 0; i < dataLength; i++) {
var x = i;
var y = (0.5 - buffer[i % bufferLength] / 2) * canvasHeight;
if (i == 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
}
canvasContext.strokeStyle = 'violet';
canvasContext.stroke();
}
drawWaveform();
</script>
</body>
</html>
```
在上面的代码中,我们首先创建了一个 AudioContext 对象用于处理音频数据,然后通过 Audio 元素加载了一个示例音频文件,并使用 createMediaElementSource 方法将该元素作为音频源。然后我们创建了一个 Canvas 元素,获取了其上下文对象,并定义了画布的宽度和高度。接着,我们循环绘制波形图,使用 createAnalyser 方法创建一个 AnalyserNode 对象对音频数据进行分析,获取原始音频数据并通过 Float32Array 数组存储,然后在 Canvas 上绘制波形图。需要注意的是,由于浏览器的安全限制,我们只能在用户操作后才能开始播放音频,这里我们使用了 `canplaythrough` 事件来等待音频加载完成后自动播放。