Spaces:
Sleeping
Sleeping
| <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> | |