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();