diff --git a/assets/main.css b/assets/main.css
index e7beb4e..37cdba9 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -158,7 +158,6 @@ body {
}
#editor .tracks>div, #editor .timeline>div {
- height: 50px;
color: #fff;
background: #7a9b76;
}
diff --git a/sampler/main.js b/sampler/main.js
index ee16aa9..ba06730 100644
--- a/sampler/main.js
+++ b/sampler/main.js
@@ -1,6 +1,8 @@
angular.module('mainApp').controller('MainLineCtrl', ($rootScope, $scope, $http, $state, $compile, $timeout, MainLinePlayer) => {
const secLength = 80;
+ const maxHeight = 60;
+ const minHeight = 10;
const minimizedSecLength = secLength / 8;
let trackIds = 0;
@@ -168,7 +170,7 @@ angular.module('mainApp').controller('MainLineCtrl', ($rootScope, $scope, $http,
// Add a unique id;
track.id = 'track' + (trackIds++);
const mainTrack = $('#editor-panel .tracks');
- mainTrack.append($compile(`
+ mainTrack.append($compile(`
${track.name}
`);
+ $('#editor-panel .timeline').append(`
`);
}
function _addTrackElems(track) {
@@ -192,14 +194,18 @@ angular.module('mainApp').controller('MainLineCtrl', ($rootScope, $scope, $http,
const segments = track.segments;
const maxWidthInPx = +((track.duration * secLength).toFixed(2));
segments.forEach((seg, index) => {
+ if (!seg.amp) {
+ seg.amp = 1;
+ }
seg.startInPx = +((seg.start * secLength).toFixed(2));
seg.endInPx = +((seg.end * secLength).toFixed(2));
seg.offsetInPx = +((seg.offset * secLength).toFixed(2));
+ seg.heightInPx = +((seg.amp * maxHeight).toFixed(2));
// DODO : height of tracker on change of height.
const elem = $(`
+ style="min-width: ${minimizedSecLength}px; max-width: ${maxWidthInPx}px; width: ${seg.endInPx - seg.startInPx}px;min-height: ${minHeight}px;height: ${seg.heightInPx}px;">
-
+
${seg.start.toFixed(2)} - ${seg.end.toFixed(2)}
`);
@@ -207,7 +213,7 @@ angular.module('mainApp').controller('MainLineCtrl', ($rootScope, $scope, $http,
$(elem).css('left', seg.offsetInPx + 'px');
- _dummy($(elem).find('canvas')[0], track.audioBuffer);
+ _renderWaveForm($(elem).find('canvas')[0], track.audioBuffer);
// return;
@@ -227,7 +233,7 @@ angular.module('mainApp').controller('MainLineCtrl', ($rootScope, $scope, $http,
});
$(elem).resizable({
containment: `#track-path-${track.id}`,
- handles: "e, w",
+ handles: "e, w, n",
// grid: [minimizedSecLength, 0],
maxWidth: maxWidthInPx,
resize: function (event, ui) {
@@ -348,8 +354,9 @@ angular.module('mainApp').controller('MainLineCtrl', ($rootScope, $scope, $http,
}
}
console.log('old', seg.left, seg.width)
- seg.left = trackerElem[0].offsetLeft;//trackerElem.position().left;
+ seg.left = trackerElem[0].offsetLeft;
seg.width = trackerElem.outerWidth();
+
console.log('new ', seg.left, seg.width);
//Upadte pixels
@@ -360,6 +367,14 @@ angular.module('mainApp').controller('MainLineCtrl', ($rootScope, $scope, $http,
trackerElem.find('.start').html('' + seg.start.toFixed(2));
trackerElem.find('.end').html('' + seg.end.toFixed(2));
trackerElem.find('canvas').css('left', `-${seg.startInPx}px`);
+
+ // Check for amplitude change
+ const oldAmp = seg.amp;
+ seg.amp = +((trackerElem[0].clientHeight / maxHeight).toFixed(2));
+ if (oldAmp !== seg.amp) {
+ trackerElem.find('canvas')[0].height = trackerElem[0].clientHeight;
+ _renderWaveForm(trackerElem.find('canvas')[0], track.audioBuffer);
+ }
}
});
@@ -468,7 +483,7 @@ angular.module('mainApp').controller('MainLineCtrl', ($rootScope, $scope, $http,
});
}
- function _dummy(canvas, buffer) {
+ function _renderWaveForm(canvas, buffer) {
var leftChannel = buffer.getChannelData(0),
width = canvas.width,
height = canvas.height,
@@ -477,6 +492,7 @@ angular.module('mainApp').controller('MainLineCtrl', ($rootScope, $scope, $http,
var maxSample = buffer.duration * width;
var step = Math.ceil(leftChannel.length / maxSample)
+ ctx.clearRect(0, 0, width, height);
ctx.globalAlpha = 0.06;
ctx.strokeStyle = '#800101';
diff --git a/sampler/player.js b/sampler/player.js
index e39cda6..21b206b 100644
--- a/sampler/player.js
+++ b/sampler/player.js
@@ -6,8 +6,12 @@ class BufferTrackLoader {
this.audioBuffer.buffer = this.buffer;
}
- setup(offset = 0, start = 0, end = this.buffer.duration) {
- this.audioBuffer.connect(this.context.destination);
+ setup(amp = 1, offset = 0, start = 0, end = this.buffer.duration) {
+ this.gain = this.context.createGain();
+ this.gain.gain.value = amp;
+
+ this.audioBuffer.connect(this.gain);
+ this.gain.connect(this.context.destination);
this.audioBuffer.start(offset, start, (end - start));
}
}
@@ -53,7 +57,7 @@ angular.module('mainApp').factory('MainLinePlayer', ($rootScope) => {
}
track.segments.forEach(seg => {
console.log('Playing seg', seg);
- new BufferTrackLoader(audioContext, track.audioBuffer).setup(seg.offset, seg.start, seg.end);
+ new BufferTrackLoader(audioContext, track.audioBuffer).setup(seg.amp, seg.offset, seg.start, seg.end);
});
});
_loadTrackLine();