| | <!DOCTYPE html> |
| | <html> |
| | <head><style> |
| | canvas { width: 100%; height: 300px; background-color: #000; } |
| | </style></head> |
| | <body> |
| | <canvas id="visualizer"></canvas> |
| | <audio id="player" src="../audio/output.wav" controls autoplay></audio> |
| | <script> |
| | const canvas = document.getElementById('visualizer'); |
| | const ctx = canvas.getContext('2d'); |
| | const audio = document.getElementById('player'); |
| | const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); |
| | const analyser = audioCtx.createAnalyser(); |
| | const source = audioCtx.createMediaElementSource(audio); |
| | source.connect(analyser); |
| | analyser.connect(audioCtx.destination); |
| | analyser.fftSize = 256; |
| | const bufferLength = analyser.frequencyBinCount; |
| | const dataArray = new Uint8Array(bufferLength); |
| | |
| | function draw() { |
| | requestAnimationFrame(draw); |
| | analyser.getByteFrequencyData(dataArray); |
| | ctx.fillStyle = '#000'; |
| | ctx.fillRect(0, 0, canvas.width, canvas.height); |
| | const barWidth = (canvas.width / bufferLength); |
| | let barHeight; |
| | let x = 0; |
| | for(let i = 0; i < bufferLength; i++) { |
| | barHeight = dataArray[i]; |
| | ctx.fillStyle = `rgb(${barHeight + 100},50,50)`; |
| | ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight); |
| | x += barWidth + 1; |
| | } |
| | } |
| | draw(); |
| | </script> |
| | </body> |
| | </html> |
| |
|
