Added playback of selection only.

Author: jonongjs

css/app.css

@@ -7,3 +7,11 @@ body { background-color: #FFFFFF; }
 #toolbar { float: left; }
 
 canvas { display: none; }
+
+.fa-sub {
+  position: relative;
+  left: -.6em;
+  width: .2em;
+  vertical-align: -.25em;
+  text-shadow: 0 0 1px black;
+}

index.html

@@ -34,20 +34,26 @@
 						<i class="fa fa-fw fa-arrows"></i>
 						</div>
 					</label>
-					<label class="btn btn-primary" ng-model="opModel" btn-radio="'scaleh'">
+					<label class="btn btn-primary" ng-model="opModel" btn-radio="'scaleh'" disabled="true">
 						<div tooltip-placement="right" tooltip="Scale selection horizontally">
 						<i class="fa fa-fw fa-arrows-h"></i>
 						</div>
 					</label>
-					<label class="btn btn-primary" ng-model="opModel" btn-radio="'scalev'">
+					<label class="btn btn-primary" ng-model="opModel" btn-radio="'scalev'" disabled="true">
 						<div tooltip-placement="right" tooltip="Scale selection vertically">
 						<i class="fa fa-fw fa-arrows-v"></i>
 						</div>
 					</label>
 				</div>
-				<button ng-class="{'btn':true, 'btn-success':!isPlaying, 'btn-danger':isPlaying}" tooltip="Play" playback>
-					<i ng-class="{'fa':true, 'fa-play':!isPlaying, 'fa-stop':isPlaying}"></i>
-				</button>
+				<div class="btn-group">
+					<button ng-class="{'btn':true, 'btn-success':!isPlaying, 'btn-danger':isPlaying}" tooltip="Play" tooltip-placement="bottom" playback>
+						<i ng-class="{'fa fa-lg':true, 'fa-play':!isPlaying, 'fa-stop':isPlaying}"></i>
+					</button>
+					<button ng-class="{'btn':true, 'btn-success':!isPlaying, 'btn-danger':isPlaying}" tooltip="Play selection" tooltip-placement="bottom" playback data-use-selection="true">
+						<i ng-class="{'fa fa-lg ':true, 'fa-play':!isPlaying, 'fa-stop':isPlaying}"></i>
+						<i class="fa fa-edit fa-sub"></i>
+					</button>
+				</div>
 				<div sound-magic>
 					<svg partial-plot>
 					</svg>

js/PartialPlotDirective.js

@@ -1,6 +1,8 @@
 app.directive('partialPlot', function($window) {
 	return function(scope, element, attrs) {
 
+		var svg;
+
 		var isPartialSelected = function(partial, box) {
 			// Check if one of the points lies in the selection box
 			return _(partial)
@@ -18,7 +20,7 @@ app.directive('partialPlot', function($window) {
 			var w = 960 - margin.left - margin.right;
 			var h = 500 - margin.top - margin.bottom;
 
-			var svg = d3.select(canvas)
+			svg = d3.select(canvas)
 						.attr('width', w + margin.left + margin.right)
 						.attr('height', h + margin.top + margin.bottom)
 						.append('g')
@@ -173,5 +175,9 @@ app.directive('partialPlot', function($window) {
 			var spectrogram = scope.spectrogram;
 			plotPartials(element[0], partials, sampleRate, spectrogram);
 		};
+
+		scope.getSelection = function() {
+			return svg.selectAll('.selected').data();
+		};
 	};
 });

js/PlaybackDirective.js

@@ -1,6 +1,7 @@
 app.directive('playback', function($window) {
 	return function(scope, element, attrs) {
 		var btn = element[0];
+		var useSelection = attrs.useSelection || false;
 
 		scope.isPlaying = false;
 
@@ -15,7 +16,8 @@ app.directive('playback', function($window) {
 		};
 
 		var startPlayback = function() {
-			var buffer = scope.synthesize();
+			var partials = useSelection ? scope.getSelection() : scope.partials;
+			var buffer = scope.synthesize(partials);
 
 			var len = buffer.length;
 			var webAudioBuf = scope.audioContext.createBuffer(1, len, scope.sampleRate);

js/SoundMagicDirective.js

@@ -118,8 +118,8 @@ app.directive('soundMagic', function($window) {
 
 					// Create playback parameters
 					scope.sampleRate = sampleRate;
-					scope.synthesize = function() {
-						return mqAudio.synthesize(scope.partials, fftsize, sampleRate);
+					scope.synthesize = function(partials) {
+						return mqAudio.synthesize(partials, fftsize, sampleRate);
 					};
 
 					if (processedCallback) {