vis-test.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>TEST</title>

	<style>
		svg {
			width: 100%;
			margin: 150px 0 -150px 0;
			transform: scaleY(0);
			transform-origin: top;
			transition: 0.2s;
		}
		svg.done {
			transform: scaleY(-1);
		}
	</style>
</head>
<body>

	<svg id="wave">
		<defs>
			<linearGradient id="progress-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
			  <stop offset="40%" style="stop-color:#aaa" />
			  <stop offset="40%" style="stop-color:#eee" />
			</linearGradient>
		  </defs>

		<clipPath id="clip"></clipPath>
		<rect width="100%" height="100%" id="progress" clip-path="url(#clip)" fill="url(#progress-gradient)"></rect>
	</svg>

	<input type="file" onchange="loadFile(this);">
	<script src="src/player/visualizer.js"></script>

</body>
</html>