Skip to content

Commit

Permalink
Next: Minor bugfixes and ports of changes from master (#966)
Browse files Browse the repository at this point in the history 
* fixed wrong var reference causing the bottom half of the waves to not draw

* replaced loops of this.canvases with correct for loop or forEach where possible

* turned unnecessary let into const in multicanvas

* Only call media.load() if it exists (#875)

* When running code that uses Wavesurfer under PhantomJS (even if not explicitly testing the Wavesurfer code), the JS interpreter crashes because PhantomJS DOM `<audio>` elements don't have a `load()` method. This change skips that one line if the method doesn't exist.

* Apply correct normalize absmax calculation to drawBars() (#916)

* fix draw wrong position while playing backward seeking (#918)

* fix draw wrong position while playing backward seeking

* fix spelling mistake

* add getPlaybackRate (#936)

* added es6 method short notation for #f185d97c825a92bfb69be80091587a9a19f66594

* Updated render function for drawPeaks/getPeaks (#959)

* Updated the render function to call the new version of the getPeaks and drawPeaks calls which now require start and end parameters.  Fixes flat waveform drawing in minimap plugin.

* changed vars to const where possible in ported bugfix commits from master branch

* fixed split channel call to drawWave and drawPeaks
  • Loading branch information
@mspae @thijstriemstra
mspae authored and thijstriemstra committed Feb 6, 2017
1 parent aef2c58 commit bb04a60
Show file tree
Hide file tree
Showing 6 changed files with 40 additions and 40 deletions.
36 changes: 15 additions & 21 deletions src/drawer.multicanvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ export default util.extend({}, drawer, {
updateSize() {
const totalWidth = Math.round(this.width / this.params.pixelRatio);
const requiredCanvases = Math.ceil(totalWidth / this.maxCanvasElementWidth);
let i;

while (this.canvases.length < requiredCanvases) {
this.addCanvas();
Expand All @@ -45,17 +44,17 @@ export default util.extend({}, drawer, {
this.removeCanvas();
}

for (i in this.canvases) {
this.canvases.forEach((entry, i) => {
// Add some overlap to prevent vertical white stripes, keep the width even for simplicity.
let canvasWidth = this.maxCanvasWidth + 2 * Math.ceil(this.params.pixelRatio / 2);

if (i == this.canvases.length - 1) {
canvasWidth = this.width - (this.maxCanvasWidth * (this.canvases.length - 1));
}

this.updateDimensions(this.canvases[i], canvasWidth, this.height);
this.clearWaveForEntry(this.canvases[i]);
}
this.updateDimensions(entry, canvasWidth, this.height);
this.clearWaveForEntry(entry);
});
},

addCanvas() {
Expand Down Expand Up @@ -118,10 +117,7 @@ export default util.extend({}, drawer, {
},

clearWave() {
let i;
for (i in this.canvases) {
this.clearWaveForEntry(this.canvases[i]);
}
this.canvases.forEach(entry => this.clearWaveForEntry(entry));
},

clearWaveForEntry(entry) {
Expand All @@ -137,7 +133,7 @@ export default util.extend({}, drawer, {
const channels = peaks;
if (this.params.splitChannels) {
this.setHeight(channels.length * this.params.height * this.params.pixelRatio);
channels.forEach(this.drawBars, this);
channels.forEach((channelPeaks, i) => this.drawBars(channelPeaks, i, start, end));
return;
}
peaks = channels[0];
Expand All @@ -161,7 +157,9 @@ export default util.extend({}, drawer, {

let absmax = 1;
if (this.params.normalize) {
absmax = util.max(peaks);
const max = util.max(peaks);
const min = util.min(peaks);
absmax = -min > max ? -min : max;
}

const scale = length / width;
Expand All @@ -180,7 +178,7 @@ export default util.extend({}, drawer, {
const channels = peaks;
if (this.params.splitChannels) {
this.setHeight(channels.length * this.params.height * this.params.pixelRatio);
channels.forEach(this.drawWave, this);
channels.forEach((channelPeaks, i) => this.drawWave(channelPeaks, i, start, end));
return;
}
peaks = channels[0];
Expand All @@ -190,9 +188,9 @@ export default util.extend({}, drawer, {
const hasMinValues = [].some.call(peaks, val => val < 0);
if (!hasMinValues) {
const reflectedPeaks = [];
const len = peaks.length;
let i;
let len;
for (i = 0, len = peaks.length; i < len; i++) {
for (i = 0; i < len; i++) {
reflectedPeaks[2 * i] = peaks[i];
reflectedPeaks[2 * i + 1] = -peaks[i];
}
Expand All @@ -218,15 +216,11 @@ export default util.extend({}, drawer, {
},

drawLine(peaks, absmax, halfH, offsetY, start, end) {
let i;
for (i in this.canvases) {
const entry = this.canvases[i];

this.canvases.forEach(entry => {
this.setFillStyles(entry);

this.drawLineToContext(entry, entry.waveCtx, peaks, absmax, halfH, offsetY, start, end);
this.drawLineToContext(entry, entry.progressCtx, peaks, absmax, halfH, offsetY, start, end);
}
});
},

drawLineToContext(entry, ctx, peaks, absmax, halfH, offsetY, start, end) {
Expand Down Expand Up @@ -261,7 +255,7 @@ export default util.extend({}, drawer, {
for (j = canvasEnd - 1; j >= canvasStart; j--) {
const peak = peaks[2 * j + 1] || 0;
const h = Math.round(peak / absmax * halfH);
ctx.lineTo((i - first) * scale + this.halfPixel, halfH - h + offsetY);
ctx.lineTo((j - first) * scale + this.halfPixel, halfH - h + offsetY);
}

ctx.closePath();
Expand Down
4 changes: 3 additions & 1 deletion src/mediaelement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,9 @@ export default util.extend({}, webaudio, {
_load(media, peaks) {
// load must be called manually on iOS, otherwise peaks won't draw
// until a user interaction triggers load --> 'ready' event
media.load();
if (typeof media.load == 'function') {
media.load();
}

media.addEventListener('error', () => {
this.fireEvent('error', 'Error loading media element');
Expand Down
4 changes: 2 additions & 2 deletions src/plugin/minimap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,8 +217,8 @@ export default function(params = {}) {

render() {
const len = this.getWidth();
const peaks = this.wavesurfer.backend.getPeaks(len);
this.drawPeaks(peaks, len);
const peaks = this.wavesurfer.backend.getPeaks(len, 0, len);
this.drawPeaks(peaks, len, 0, len);

if (this.params.showOverview) {
//get proportional width of overview region considering the respective
Expand Down
20 changes: 8 additions & 12 deletions src/plugin/timeline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,23 +248,19 @@ export default function(params = {}) {
},

setFillStyles(fillStyle) {
let i;
for (i in this.canvases) {
this.canvases[i].getContext('2d').fillStyle = fillStyle;
}
this.canvases.forEach(canvas => {
canvas.getContext('2d').fillStyle = fillStyle;
});
},

setFonts(font) {
let i;
for (i in this.canvases) {
this.canvases[i].getContext('2d').font = font;
}
this.canvases.forEach(canvas => {
canvas.getContext('2d').font = font;
});
},

fillRect(x, y, width, height) {
let i;
for (i in this.canvases) {
const canvas = this.canvases[i];
this.canvases.forEach((canvas, i) => {
const leftOffset = i * this.maxCanvasWidth;

const intersection = {
Expand All @@ -282,7 +278,7 @@ export default function(params = {}) {
intersection.y2 - intersection.y1
);
}
}
});
},

fillText(text, x, y) {
Expand Down
9 changes: 5 additions & 4 deletions src/wavesurfer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,16 +336,17 @@ const WaveSurfer = util.extend({}, util.observer, { util }, {
this.fireEvent('interaction', () => this.seekTo(progress));

const paused = this.backend.isPaused();
// avoid draw wrong position while playing backward seeking
if (!paused) {
this.backend.pause();
}
// avoid small scrolls while paused seeking
const oldScrollParent = this.params.scrollParent;
if (paused) {
this.params.scrollParent = false;
}
this.params.scrollParent = false;
this.backend.seekTo(progress * this.getDuration());
this.drawer.progress(this.backend.getPlayedPercents());

if (!paused) {
this.backend.pause();
this.backend.play();
}
this.params.scrollParent = oldScrollParent;
Expand Down
7 changes: 7 additions & 0 deletions src/webaudio.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -401,6 +401,13 @@ const WebAudio = util.extend({}, util.observer, {
return this.state.getCurrentTime.call(this);
},

/**
* Returns the current playback rate.
*/
getPlaybackRate() {
return this.playbackRate;
},

/**
* Set the audio source playback rate.
*/
Expand Down

0 comments on commit bb04a60

Please sign in to comment.