visualizer controls

static/pyrite.js

@@ -1,14 +1,15 @@
 var player;
-var canvasCtx;
-var audioCtx;
+var audio_ctx;
 var analyser;
 var audio_data;
+var canvas_ctx;
 var draw_loop;
 var vol_prev;
 
 function init() {
 	player = document.querySelector('#player');
-	canvasCtx = document.querySelector('#visualizer').getContext('2d');
+	init_analyzer();
+	init_canvas();
 
 	player.addEventListener('ended', nextTrack);
 	player.addEventListener('loadedmetadata', display_duration);
@@ -37,8 +38,6 @@ function init() {
 			document.querySelector('#vol-off-btn').style.display = 'none';
 		}
 	});
-
-	//init_analyzer();
 }
 
 async function get_rand_track() {
@@ -65,8 +64,8 @@ async function playTrack() {
 	player.play(); 
 	navigator.mediaSession.playbackState = "playing";
 
-	if (!audioCtx) {
-		init_analyzer();
+	if (document.querySelector("#visualizer-select").value === 'bar_graph') {
+		bar_graph();
 	}
 
 	document.querySelector("#play-btn").style.display = "none";
@@ -116,8 +115,6 @@ function update_position() {
 		position: Math.floor(player.currentTime)
 	});
 
-	//analyser.getByteTimeDomainData(audio_data);
-
 	document.querySelector('#seek-slider').value = Math.floor(player.currentTime);
 	display_current_time();
 }
@@ -160,22 +157,38 @@ function volume_restore() {
 	document.querySelector('#vol-off-btn').style.display = 'none';
 }
 
+function select_visualizer(event) {
+	if (event.target.value == 'bar_graph') {
+		bar_graph();
+	} else if (event.target.value == 'disabled') {
+		cancelAnimationFrame(draw_loop);
+		let canvas = document.querySelector('#visualizer');
+		canvas_ctx.clearRect(0, 0, canvas.width, canvas.height);
+	}
+}
+
 function init_analyzer() {
-	audioCtx = new AudioContext();
-	analyser = audioCtx.createAnalyser();
-	let source = audioCtx.createMediaElementSource(player);
+	audio_ctx = new AudioContext();
+	analyser = audio_ctx.createAnalyser();
+	let source = audio_ctx.createMediaElementSource(player);
 
 	source.connect(analyser);
-	source.connect(audioCtx.destination);
+	source.connect(audio_ctx.destination);
+}
 
+function init_canvas() {
+	let canvas = document.querySelector('#visualizer');
+	canvas_ctx = canvas.getContext('2d');
+	canvas_ctx.clearRect(0, 0, canvas.width, canvas.height);
+}
+
+function bar_graph() {
 	analyser.fftSize = 256;
 	analyser.minDecibels = -90;
 	analyser.maxDecibels = -10;
 	analyser.smoothingTimeConstant = 0.85;
 	audio_data = new Uint8Array(analyser.frequencyBinCount);
 
-	let canvas = document.querySelector('#visualizer');
-	canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
 	draw();
 }
 
@@ -185,8 +198,8 @@ function draw() {
 	analyser.getByteTimeDomainData(audio_data);
 	let canvas = document.querySelector('#visualizer');
 
-	canvasCtx.fillStyle = "rgb(0 0 0)";
-	canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+	canvas_ctx.fillStyle = "rgb(0 0 0)";
+	canvas_ctx.fillRect(0, 0, canvas.width, canvas.height);
 
 	const barWidth = (canvas.width / analyser.frequencyBinCount) * 2.5;
 	let barHeight;
@@ -195,8 +208,8 @@ function draw() {
 	for (let i = 0; i < analyser.frequencyBinCount; i++) {
 		barHeight = audio_data[i];
 
-		canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
-		canvasCtx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
+		canvas_ctx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
+		canvas_ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
 
 		x += barWidth + 1;
 	}

templates/index.html

@@ -36,7 +36,7 @@
 					</div>
 					<div>
 						<label for="visualizer-select">Visualizer:</label>
-						<select id="visualizer-select">
+						<select id="visualizer-select" onchange="select_visualizer(event)">
 							<option value="disabled" selected>Disabled</option>
 							<option value="bar_graph">Bar Graph</option>
 						</select>