DIR : /home/kozerus/public_html/ruffle/ko_builder0.html

/home/kozerus/public_html/ruffle

<!DOCTYPE html>
<html>
<head>
	<title>Audio Visualization</title>
	<style> canvas { border: 1px solid black; } </style>
	</head>

<body bgcolor=linen>
	<audio id="myAudio" src="./ko_builder/takemeou.mp3" controls></audio>
	<canvas id="myCanvas"></canvas>

	<script>
		const audio = document.getElementById('myAudio');
		const canvas = document.getElementById('myCanvas');
		const ctx = canvas.getContext('2d');

		const audioContext = new AudioContext();
		const source = audioContext.createMediaElementSource(audio);
		const analyser = audioContext.createAnalyser();

		source.connect(analyser);
		analyser.connect(audioContext.destination); // Connect to speakers

		analyser.fftSize = 256;
		const bufferLength = analyser.frequencyBinCount;
		const dataArray = new Uint8Array(bufferLength);

		function draw() {
			requestAnimationFrame(draw);
			analyser.getByteTimeDomainData(dataArray);
			ctx.clearRect(0, 0, canvas.width, canvas.height);

			ctx.lineWidth = 2;
			ctx.strokeStyle = 'rgb(0, 0, 0)';

			ctx.beginPath();

			const sliceWidth = canvas.width * 1.0 / bufferLength;
			let x = 0;
			for (let i = 0; i < bufferLength; i++) {
				const v = dataArray[i] / 128.0;
				const 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();
			}

		draw();
		</script>
	</body>
	</html>

koh5_pano

Drag mouse to navigate.

Navigation

Left/Right Mouse drag: Changes camera heading.
Up/Sown Mouse drag: Changes camera pitch.
Scroll wheel: Changes camera field of view.
I-Key: Displays Info panel with canvas size, image size and FPS.

17.Aug.2010, Martin Wengenmayer