Been following this tutorial by Franks Laboratory https://www.youtube.com/watch?v=VXWvfrmpapI&t=2143s, I've done it a few times and successfully got the visualiser to work once. Don't have the knowledge to figure it out myself could someone try help with what's wrong... Using visual studio code on Mac, with the latest version of chrome to load the visualiser. Beats me why there's no bars showing with the audio as all the code is the same as his, the one time I got it to work it was because I tweaked it but I can't remember how :,).
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Sounds</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<canvas id="canvas1"></canvas>
<audio src="Hall.mp3" id="audio1" controls></audio>
</div>
<script src="script.js"></script>
</body>
</html>
Java:
const container = document.getElementById('container');
const canvas = document.getElementById('canvas1');
canvas.width = window.innerWidth;
canvas.height = canvas.innerHeight;
const ctx = canvas.getContext('2d');
let audioSource;
let analyser;
container.addEventListener('click', function(){
let audio1 = new Audio();
audio1.src = 'Hall.mp3';
const audioContext = new AudioContext();
audio1.play();
audioSource = audioContext.createMediaElementSource(audio1);
const analyser = audioContext.createAnalyser();
audioSource.connect(analyser);
analyser.connect(audioContext.destination);
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
const barWidth = canvas.width/bufferLength;
let barHeight;
let x;
function animate(){
x = 0;
ctx.clearRect(0, 0, canvas.wdth, canvas.height);
analyser.getByteFrequencyData(dataArray);
for (let i = 0; i < bufferLength; i++){
barHeight = dataArray[i];
ctx.fillStyle = 'white';
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
x += barWidth;
}
requestAnimationFrame(animate);
};
animate();
});
Your code is setting the canvas to a
heightof0.canvas.innerHeightisundefinedand JavaScript turns that into0when assigning it tocanvas.height.Please also note that you need to click on the container and not on the audio element to kick off the animation. The audio element in the DOM is not wired up. Your JavaScript code creates a brand new audio element.
There is also a typo in the line which attempts to clear the canvas. There is an "i" missing in "width".