Merge f189a19 into cbd7711

CHANGES.md

@@ -6,6 +6,8 @@ wavesurfer.js changelog
 
 - Add `wavesurfer.setPlayEnd(position)` to set a point in seconds for
   playback to stop at (#1795)
+- Add `drawingContextAttributes` option and enable canvas `desynchronized`
+  hint (#1642)
 - Add `barMinHeight` option (#1693)
 - Expose progress to the `dblclick` event (#1790)
 - Regions plugin:

src/drawer.canvasentry.js

@@ -58,6 +58,17 @@ export default class CanvasEntry {
          * @type {string}
          */
         this.id = getId(this.constructor.name.toLowerCase() + '_');
+        /**
+         * Canvas 2d context attributes
+         *
+         * @type {object}
+         */
+        this.canvasContextAttributes = {
+            // Boolean that hints the user agent to reduce the latency
+            // by desynchronizing the canvas paint cycle from the event
+            // loop
+            desynchronized: true
+        };
     }
 
     /**
@@ -67,7 +78,7 @@ export default class CanvasEntry {
      */
     initWave(element) {
         this.wave = element;
-        this.waveCtx = this.wave.getContext('2d');
+        this.waveCtx = this.wave.getContext('2d', this.canvasContextAttributes);
     }
 
     /**
@@ -78,7 +89,10 @@ export default class CanvasEntry {
      */
     initProgress(element) {
         this.progress = element;
-        this.progressCtx = this.progress.getContext('2d');
+        this.progressCtx = this.progress.getContext(
+            '2d',
+            this.canvasContextAttributes
+        );
     }
 
     /**

src/drawer.multicanvas.js

@@ -67,6 +67,14 @@ export default class MultiCanvas extends Drawer {
          */
         this.EntryClass = CanvasEntry;
 
+        /**
+         * Canvas 2d context attributes.
+         *
+         * @private
+         * @type {object}
+         */
+        this.canvasContextAttributes = params.drawingContextAttributes;
+
         /**
          * Overlap added between entries to prevent vertical white stripes
          * between `canvas` elements.
@@ -166,6 +174,7 @@ export default class MultiCanvas extends Drawer {
      */
     addCanvas() {
         const entry = new this.EntryClass();
+        entry.canvasContextAttributes = this.canvasContextAttributes;
         entry.hasProgressCanvas = this.hasProgressCanvas;
         entry.halfPixel = this.halfPixel;
         const leftOffset = this.maxCanvasElementWidth * this.canvases.length;

src/wavesurfer.js

@@ -57,6 +57,8 @@ import MediaElementWebAudio from './mediaelement-webaudio';
  * @property {string} cursorColor='#333' The fill color of the cursor indicating
  * the playhead position.
  * @property {number} cursorWidth=1 Measured in pixels.
+ * @property {object} drawingContextAttributes={desynchronized: true} Drawing context
+ * attributes.
  * @property {number} duration=null Optional audio length so pre-rendered peaks
  * can be display immediately for example.
  * @property {boolean} fillParent=true Whether to fill the entire container or
@@ -231,6 +233,9 @@ export default class WaveSurfer extends util.Observer {
         cursorColor: '#333',
         cursorWidth: 1,
         dragSelection: true,
+        drawingContextAttributes: {
+            desynchronized: true
+        },
         duration: null,
         fillParent: true,
         forceDecode: false,