Adding support for Backend waveform generator

prateekjadhwani · Aug 1, 2015 · 3861fea · 3861fea
1 parent 9064304
commit 3861fea
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,12 @@ You can install `podcast-player` with the help of bower.
 bower install podcast-player --save
 ```
 
+### Dependency Installation for the Backend Waveform Generator
+
+If the podcast file is more than 10MB, parsing that file on the client end might not be the best choice. This may also make the player to crash. Hence we are bundelling a waveform generator file called `server.js` along with it.
+
+The `server.js` file uses the [node-waveform](https://github.com/andrewrk/node-waveform) library. You might want to look into the [installation instructions](https://github.com/andrewrk/node-waveform#installation) for that.
+
 ## How to use
 
 Simply use the following HTML tag.
@@ -21,9 +27,12 @@ Simply use the following HTML tag.
   src="Project_5am_-_01_-_June_8th_-There_is_another_waycourage.mp3"
   name="June 8th -There is another way...(courage)"
   episode="12"
-  coverart="cover_290x290.png"></podcast-player>
+  coverart="cover_290x290.png"
+  datapoints={{data}}></podcast-player>
 ```
 
+where `data` variable can have the datapoints for waveform generated from `server.js` file.
+
 Look in the [demo file](https://github.com/prateekjadhwani/podcast-player/blob/master/demo.html) for more details
 
 
@@ -36,12 +45,24 @@ Look in the [demo file](https://github.com/prateekjadhwani/podcast-player/blob/m
 | name | The title of the Podcast | String | `June 8th -There is another way...(courage)` |
 | episode | The episode number of the file | String | `12` or `June 8th - 01` |
 | coverart | Link to the cover art image | String | `cover_290x290.png` |
+| datapoints | The data points for waveform | Array | `[0.1846,0.1711,0.9596,0.6668,...]` |
 
 ### Performance related information
 
-- Using large `.mp3` files may cause the wavesurfer library to take large time to parse the file into waveform. Our suggestion would be to use `.wav` files that are under 2-3 MBs.
+- ~~Using large `.mp3` files may cause the wavesurfer library to take large time to parse the file into waveform. Our suggestion would be to use `.wav` files that are under 2-3 MBs.~~ We solved this problem by providing a file `server.js` that could parse the waveform at the backend itself, thus saving the client from doing all the waveform related processing.
+
+### Generating Waveform
+
+You will need to go to the folder where it has `server.js` file and run the following command in terminal.
+
+```shell
+node server.js filename.mp3 outputfile.json
+```
+
+Where `filename.mp3` can be any file. And `outputfile.json` is the file where you can get the waveform data points.
 
 ### Credits
 
-- Music used for the demo - [WAV-SOUNDS](http://www.wav-sounds.com/)
+- Music used for the demo - [WAV-SOUNDS](http://www.wav-sounds.com/) and [Noise addicts](http://www.noiseaddicts.com/)
 - Wave form visualizer - [wavesurfer.js](http://www.wavesurfer.fm/)
+- Wave form generator - [node-waveform](https://github.com/andrewrk/node-waveform)
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "podcast-player",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "authors": [
     "Prateek Jadhwani <[email protected]>",
     "Andrew Bone <[email protected]>"

diff --git a/demo.html b/demo.html
@@ -26,21 +26,41 @@
 	</head>
 	<body>
 
-		<podcast-player id="somewhere"
-			wavecolor="#F3AEF3"
-			progresscolor="#2A3F55"
-			src="examples/rappin.wav"
-			name="Thaaa Rap Song Demo"
-			episode="10"
-			coverart="examples/cover_290x290.jpg"></podcast-player>
-
-		<podcast-player id="bottom"
-			wavecolor="#ffffff"
-			progresscolor="#CFD8DC"
-			src="examples/startrek.wav"
-			name="StarTrek"
-			episode="10"
-			coverart="examples/cover_290x290.jpg"></podcast-player>
+		<template is="dom-bind" id="Demo">
+			<!--
+				An example of how you can stream audio, and if the file is huge,
+				i.e. larger than 10MBs you might wanna provide the data points
+				after making it go through the server.js file
+				Note : Large file parsing will crash the player!!! You can fix this by
+				providing the data points in the attribute as shows below.
+			-->
+			<podcast-player id="somewhere"
+				wavecolor="#F3AEF3"
+				progresscolor="#2A3F55"
+				src="http://www.noiseaddicts.com/samples_1w72b820/3910.mp3"
+				name="Albert Schweitzer - Classic Radio Shows"
+				episode="12"
+				coverart="http://usercontent2.hubimg.com/9269181_100.jpg"
+				datapoints="{{data}}"></podcast-player>
 
+			<!--
+				Small files dont need data points as these can be
+				parsed on the client side
+			-->
+			<podcast-player id="bottom"
+				wavecolor="#ffffff"
+				progresscolor="#CFD8DC"
+				src="examples/startrek.wav"
+				name="StarTrek"
+				episode="10"
+				coverart="examples/cover_290x290.jpg"></podcast-player>
+		</template>
+		<script>
+			/*
+			 * This is the data point obtained from server.js file
+			 * You can find how to use the server.js file in Readme file
+			 */
+			Demo.data = [0.5668,0.5180,0.4628,0.4459,0.4684,0.4408,0.8387,0.6290,0.6327,0.4951,0.4072,0.4428,0.4502,0.3912,0.3914,0.3985,0.3807,0.6787,0.4896,0.5138,0.6579,0.6006,0.4823,1.0000,0.5054,0.5721,0.9027,0.4878,0.6177,0.8525,0.7385,0.7951,0.6723,0.7317,0.6659,0.7763,0.8075,0.5057,0.4360,0.4640,0.6662,0.6127,0.6699,0.5013,0.4476,0.7001,0.5401,0.8216,0.5611,0.8079,0.6710,0.3779,0.6637,0.5472,0.5427,0.5657,0.5435,0.4948,0.7204,0.5409,0.7581,0.5010,0.6405,0.5542,0.6216,0.6270,0.5453,0.5638,0.5201,0.6403,0.6385,0.7809,0.6504,0.7086,0.8654,0.8599,0.5723,0.5246,0.5168,0.4281,0.6264,0.5786,0.5900,0.5024,0.5487,0.5999,0.5140,0.4909,0.6435,0.5813,0.6554,0.6247,0.6580,0.7936,0.6716,0.6236,0.8542,0.5877,0.6059,0.7068,0.8383,0.6479,0.4498,0.7689,0.7026,0.4614,0.6115,0.6559,0.4151,0.6942,0.5393,0.5757,0.6785,0.6799,0.5890,0.6199,0.5701,0.7534,0.8453,0.5131,0.5105,0.8930,0.7270,0.4905,0.6425,0.4890,0.4856,0.7003,0.6561,0.8379,0.6476,0.7631,0.6203,0.5970,0.6063,0.8149,0.5331,0.5538,0.6817,0.5068,0.6436,0.6627,0.5727,0.7243,0.4729,0.4610,0.4667,0.5415,0.5910,0.5791,0.6438,0.5863,0.6614,0.7341,0.6591,0.5004,0.7524,0.7255,0.4924,0.7118,0.7100,0.6142,0.7873,0.5430,0.4827,0.6663,0.6387,0.5213,0.6969,0.5887,0.7326,0.6597,0.4816,0.4943,0.7287,0.5920,0.6243,0.6474,0.6873,0.6065,0.5134,0.5211,0.5908,0.6137,0.7158,0.5804,0.6147,0.6534,0.5376,0.5752,0.6433,0.5542,0.4674,0.6913,0.5066,0.5792,0.5517,0.6449,0.6932,0.4913,0.5979,0.4430,0.6124,0.4931,0.5755,0.4869,0.5621,0.6471,0.4897,0.6540,0.7402,0.4726,0.4780,0.4786,0.5632,0.6854,0.5498,0.7000,0.4037,0.4764,0.8035,0.5582,0.5415,0.4558,0.5518,0.4084,0.6111,0.6026,0.5436,0.7002,0.5711,0.4733,0.6202,0.4534,0.5764,0.6740,0.5115,0.4884,0.5081,0.5309,0.5076,0.6276,0.6847,0.4422,0.6571,0.5913,0.4684,0.5011,0.5604,0.7748,0.7468,0.7933,0.6558,0.4291,0.5520,0.6202,0.5173,0.5731,0.4936,0.6455,0.4367,0.6132,0.5581,0.5827,0.6119,0.6872,0.5042,0.8119,0.4848,0.8942,0.6680,0.5278,0.6545,0.6424,0.4907,0.7924,0.5349,0.7241,0.6326,0.7073,0.6453,0.6111,0.6926,0.7574,0.6991,0.6012,0.5906,0.6303,0.5760,0.5955,0.6216,0.6417,0.4700,0.6849,0.5558,0.5706,0.4264,0.8493,0.6301,0.8375,0.5722,0.5655,0.6129,0.5742,0.7811,0.5990,0.7100,0.5455,0.4632,0.7020,0.7866,0.5652,0.5704,0.6535,1.0000,0.7419,0.9074,0.6613,0.5943,0.6181,0.4711,0.5771,0.6005,0.5873,0.8402,0.5975,0.8071,0.5398,0.4789,0.6791,0.5232,0.6793,0.4607,0.6582,0.7158,0.4606,0.5403,0.5541,0.4774,0.6173,0.4065,0.7091,0.5331,0.6426,0.7057,0.5870,0.8360,0.6203,0.4971,0.6986,0.6423,0.5945,0.6208,0.6968,0.4519,0.4690,0.5189,0.7656,0.7804,0.7193,0.4541,0.8627,0.6918,0.4741,0.7429,0.7487,0.7737,0.5951,0.6056,0.4996,0.7526,0.5058,0.5572,0.6649,0.5282,0.7274,0.5165,0.6083,0.5556,0.4922,0.5951,0.5656,0.5321,0.6889,0.7693,0.8256,0.5720,0.4394,0.6749,0.7839,0.7209,0.5382,0.6861,0.4352,0.4415,0.6177,0.6116,0.4799,0.5648,0.5589,0.5644,0.6568,0.6280,0.5212,0.5178,0.5212,0.7063,0.6491,0.6584,0.4926,0.4568,0.6357,0.6383,0.5867,0.5724,0.7623,0.5800,0.5167,0.8033,0.6129,0.5657,0.6550,0.4698,0.5408,0.5206,0.4930,0.6401,0.6226,0.7808,0.5155,0.6334,0.5903,0.7219,0.8033,0.5213,0.4675,0.5741,0.4586,0.9091,0.6985,0.5545,0.6388,0.6491,0.5108,0.5482,0.5639,0.6161,0.5599,0.5367,0.7184,0.6474,0.5646,0.6033,0.6560,0.4591,0.7835,0.5720,0.5534,0.7334,0.5598,0.5003,0.4740,0.6433,0.4830,0.6384,0.6632,0.6456,0.5239,0.5287,0.6670,0.6814,0.6595,0.5337,0.6539,0.6310,0.5209,0.4185,0.6086,0.8373,0.7022,0.5706,0.6836,0.5809,0.4550,0.5662,0.6843,0.6004,0.6699,0.5586,0.8284,0.4613,0.7974,0.5764,0.6751,0.4932,0.7151,0.4786,0.6234,0.6132,0.4794,0.5154,0.5763,0.5875,0.5136,0.5722,0.4936,0.6893,0.4739,0.4914,0.4775,0.5821,0.4939,0.6606,0.4692,0.4797,0.5230,0.8090,0.5157,0.4126,0.5137,0.9046,0.7549,0.5061,0.5934,0.5443,0.5602,0.5665,0.4779,0.6099,0.6868,0.4888,0.6409,0.4657,0.4992,0.5133,0.4937,0.8129,0.5453,0.7278,0.4531,0.5427,0.5714,0.5149,0.4832,0.5074,0.4492,0.4929,0.4042,0.5195,0.5325,0.4386,0.4671,0.5283,0.4279,0.7785,0.6826,0.4735,0.8960,0.6561,0.8660,0.6574,0.4923,0.6220,0.6533,0.6144,0.6984,0.6006,0.5944,0.5922,0.7882,0.5125,0.5654,0.4527,0.4834,0.5076,0.4962,0.4455,0.5315,0.4505,0.5421,0.6325,0.5365,0.8689,0.5245,0.5943,0.5329,0.7967,0.4914,0.4803,0.5606,0.5537,0.9113,0.8514,0.8818,0.7038,0.6416,0.6343,0.6842,0.7974,0.7572,0.6322,0.5390,0.5537,0.4409,0.5155,0.6642,0.4654,0.5248,0.7063,0.6709,0.5126,0.4003,0.5652,0.4110,0.4770,0.5998,0.6603,0.5810,0.6087,0.4346,0.8496,0.7529,0.4515,0.6376,0.7724,0.4370,0.7458,0.5604,0.7275,0.7978,0.6653,0.7011,0.8131,0.5204,0.4136,0.5666,0.4625,0.4446,0.5141,0.7269,0.5249,0.3987,0.6801,0.4727,0.5217,0.5466,0.4509,0.5080,0.9281,0.5521,0.8007,0.7362,0.5929,0.7764,0.5866,0.6326,0.4420,0.4946,0.7635,0.3328,0.4216,0.4734,0.5528,0.7406,0.5653,0.4481,0.4730,0.9468,0.5701,0.7226,0.4571,0.6149,0.6861,0.7183,0.8986,0.5656,0.9708,0.9377,0.5331,0.8116,0.7212,0.5398,0.6165,0.6225,0.5452,0.5254,0.5584,0.7157,0.6309,0.7641,0.6377,0.8611,0.5383,0.8125,0.6064,0.9250,0.5345,0.7692,0.6073,0.8338,0.6347,0.8192,0.6415,0.6371,1.0000,0.8588,0.7049,0.6980,0.5823,0.7723,0.6214,0.6823,0.8705,0.9891,0.5934,0.6013,0.5801,0.7604,0.7223,1.0000,0.6681,0.6058,0.4750,0.7863,0.6075,0.6789,0.6757,0.6605,0.7495,0.5196,0.8627,0.5344,0.6067,0.7171,0.6880,0.7776,1.0000,0.5459,0.5459,0.8219,0.6813,0.7684,0.4988,0.5831,0.7853,0.5510,0.7470,0.6317,0.7326,0.8549,0.6247,0.6370,0.5065,0.7878,0.6714,0.5065,0.5239,0.6331,0.9861,0.6782,0.8379,0.4758,0.7223,0.6217,0.5545,0.6409,0.9074,0.5234,0.6015,0.5177,0.5797,0.5328,0.7725,0.6486,0.5353,0.4759,0.6919,0.6889,0.6836,0.6480,0.5634,0.6093,0.5828,0.7114,0.6339,0.5684,0.5511,0.6049,0.6367,0.6366,0.5246,0.5034,0.6532,0.5210,0.5321,0.5258,0.7648,0.7832,0.4910,0.5771];
+		</script>
 	</body>
 </html>
diff --git a/podcast-player.html b/podcast-player.html
@@ -32,7 +32,8 @@
 				on-error="handlePlayerError"
 				src="{{src}}"
 				wavecolor="{{wavecolor}}"
-				progresscolor="{{progresscolor}}"></song-file-player>
+				progresscolor="{{progresscolor}}"
+				datapoints="{{datapoints}}"></song-file-player>
 		</neon-animated-pages>
 		<script id="wavesurferscript" type="text/javascript" src="wavesurfer.min.js" ></script>
 	</template>
@@ -79,6 +80,10 @@
 					type: Number,
 					value: 0
 				},
+				datapoints: {
+					type: Array,
+					value: []
+				},
 				initPlayer: false
 			},
 			listeners: {
@@ -90,7 +95,6 @@
 				if(this.initPlayer) {
 					Polymer.dom(this.root).querySelector("song-file-player").play();
 				} else {
-					this.freeOtherPlayerMemory();
 					Polymer.dom(this.root).querySelector("song-file-player").initWaveSurfer();
 					this.initPlayer = true;
 				}
@@ -107,17 +111,6 @@
 			},
 			handlePlayerError: function(e) {
 				this.initPlayer = false;
-			},
-			freeUpMemory: function() {
-				Polymer.dom(this.root).querySelector("song-file-player").freeUpMemory();
-			},
-			freeOtherPlayerMemory : function() {
-				var otherPlayers = document.querySelectorAll("podcast-player");
-				for(i = 0 ; i < otherPlayers.length; i++) {
-					if(otherPlayers[i].initPlayer) {
-						otherPlayers[i].freeUpMemory();
-					}
-				};
 			}
 		});
 	})();

diff --git a/server.js b/server.js
@@ -0,0 +1,12 @@
+var waveform = require('waveform');
+
+// waveform generator library - https://github.com/andrewrk/node-waveform
+waveform(process.argv[2], {
+	// waveform.js options
+  waveformjs: process.argv[3],  // path to output-file or - for stdout
+  'wjs-width': 800,             // width in samples
+  'wjs-precision': 4,           // how many digits of precision
+  'wjs-plain': false
+	}, function(err, stdout) {
+  console.log(err);
+});
diff --git a/song-file-player.html b/song-file-player.html
@@ -155,6 +155,10 @@
 					type: Boolean,
 					value: false
 				},
+				datapoints: {
+					type: Array,
+					value: []
+				},
 				sharedElements: {
 					value: function() {
 						return {
@@ -223,14 +227,16 @@
 						self.$.error.show();
 					}, 2000);
 					setTimeout( function () {
-						self.wavesurfer.destroy();
-						self.isInitialized = false;
 						self.togglePlay();
 						self.fire('error');
 					}, 5000);
 				});
 
-				this.wavesurfer.load(this.src);
+				if(this.datapoints.length == 0) {
+					this.wavesurfer.load(this.src);
+				} else {
+					this.wavesurfer.load(this.src, this.datapoints);
+				}
 
 				this.wavesurfer.on('finish', function () {
 					self.togglePlay();