All files / dist/visualizations bar.js

0% Statements 0/46
0% Branches 0/4
0% Functions 0/7
0% Lines 0/46
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172                                                                                                                                                                                                                                                                                                                                                       
/**
 * Simple visualization that shows the waveforms as a bar graph
 */
function BarVisualization(){
	/*
		Define the ID, name, and initialize the container. These are a part
		of the visualization template and are necessary.
	*/
	this.id = 'bar_visualization';
	this.name = 'Bar Visualization';
	this.container = '';
 
	/**
	 * Define the preferences for the visualization
	 */
	this.preferences = {
		bar_color: '#ff0000',
		width: 500,
		height: 200,
		inherit: true,
		spacer_width: 10,
		bar_width: 5,
		offset: 100,
		cutoff: 23
	}
 
	/*
		Intiialize the analyser used to generate the visualization.
	*/
	this.analyser = '';
 
	/*
		Initialize the local canvas height, canvas width, context, canvas
		and request animation variables.
	*/
	this.canvasHeight = '';
	this.canvasWidth = '';
	this.ctx = '';
	this.canvas = '';
	this.requestAnimation = '';
 
	/**
	 * Get the ID of the visualization.
	 */
	this.getID = function(){
		return this.id;
	}
 
	/**
	 * Get the name of the visualization.
	 */
	this.getName = function(){
		return this.name;
	}
 
	/**
	 * Set the preferences for the visualization.
	 *
	 * @param {object} userPreferences - The user preferences for the visualization.
	 */
	this.setPreferences = function( userPreferences ){
		for( var key in this.preferences ){
			if( userPreferences[ key ] != undefined) {
				this.preferences[key] = userPreferences[key];
			}
		}
	}
 
	/**
	 * Start the visualization.
	 *
	 * @param {Node} element - The element that will contain the visualization.
	 */
	this.startVisualization = function( element ){
		/*
			Set the analyser to the Amplitude analyser.
		*/
		this.analyser = Amplitude.getAnalyser();
 
		/*
			Set the container to the element passed in.
		*/
		this.container = element;
 
		/*
			Build a canvas element we can draw on for the visualization.
		*/
		this.canvas = document.createElement('canvas');
 
		/*
			If the user wants the size of the canvas to be the size of the container,
			set the width and height of the visualization to the width and height
			of the container.
		*/
		if( this.preferences.inherit ){
			this.preferences.width = this.container.offsetWidth;
			this.preferences.height = this.container.offsetHeight;
		}
 
		/*
			Set the width and height of the canvas element in the container.
		*/
		this.canvas.setAttribute('width', this.preferences.width);
		this.canvas.setAttribute('height', this.preferences.height);
 
		/*
			Get the 2D context of the canvas and append the canvas to the container.
		*/
		this.ctx = this.canvas.getContext('2d');
		this.container.appendChild( this.canvas );
 
		/*
			Set the local canvas height and canvas width variables to the width
			and height of the canvas. We will use these later.
		*/
		this.canvasHeight = this.canvas.height;
		this.canvasWidth = this.canvas.width;
 
		/*
			Kick off the visualization.
		*/
		this.rafCallback();
	}
 
	/**
	 * Stops the visualization and clears the container.
	 */
	this.stopVisualization = function(){
		window.cancelAnimationFrame( this.requestAnimation );
		this.container.innerHTML = '';
	}
 
	/**
	 * The callback that draws the visualization based on the frequency of the song.
	 */
	this.rafCallback = function( ){
		/*
			Builds an animation frame that updates the visualization to what is
			in the frequency.
		*/
		this.requestAnimation = window.requestAnimationFrame( this.rafCallback.bind(this), this.canvas );
 
		/*
			Get the frequency data from the analyser.
		*/
		let freqByteData = new Uint8Array( this.analyser.frequencyBinCount );
		this.analyser.getByteFrequencyData( freqByteData );
 
		/*
			Compute how many bars we need to have
		*/
		let numberOfBars = Math.round( this.canvasWidth / this.preferences.spacer_width );
 
		/*
			Build the rectangle for each of the elements in the visualization.
		*/
		this.ctx.clearRect( 0, 0, this.canvasWidth, this.canvasHeight );
		this.ctx.fillStyle = this.preferences.bar_color;
		this.ctx.lineCap = 'round';
 
		/*
			Iterate over how many bars we need and draw the height based
			off of the magnitude of the wave we are displaying
		*/
		for( let i = 0; i < numberOfBars; i++ ){
			let magnitude = freqByteData[ i + this.preferences.offset ];
 
			this.ctx.fillRect( i * this.preferences.spacer_width, this.canvasHeight, this.preferences.bar_width, -magnitude );
		}
	}
}