feat|> add waveAlign config (#59)

* feat|> add waveAlign config

* feat|> waveAlign readme

* feat|> update wfplayer.d.ts

README.md

@@ -154,6 +154,9 @@ var wf = new WFPlayer({
 
     // Waveform Size ratio
     waveSize: 1,
+
+    // Waveform cursor display position, default is center, optional values are: left , center
+    waveAlign: 'center',
 });
 ```
 

docs/assets/js/index.js

@@ -4,6 +4,7 @@ var $open = document.querySelector('.open');
 var $checkboxs = Array.from(document.querySelectorAll('.checkbox'));
 var $pickers = Array.from(document.querySelectorAll('.color-picker'));
 var $range = Array.from(document.querySelectorAll('.range'));
+var $radios = Array.from(document.querySelectorAll('.radio'));
 
 var wf = null;
 $version.innerHTML = 'Beta ' + WFPlayer.version;
@@ -109,3 +110,12 @@ $checkboxs.forEach(function ($el) {
         });
     };
 });
+
+$radios.forEach(function ($el) {
+    var name = $el.getAttribute('name');
+    $el.onchange = function () {
+        wf.setOptions({
+            [name]: $el.value,
+        });
+    };
+});

docs/index.html

@@ -86,6 +86,15 @@
                         <input class="checkbox" type="checkbox" name="scrollable" checked>
                     </div>
                 </div>
+                <div class="row">
+                    <div class="item">
+                        <div class="name">Wave Align: </div>
+                        <input class="radio" type="radio" name="waveAlign" id="waveAlignLeft" value="left">
+                        <label class="value" for="waveAlignLeft">left</label>
+                        <input class="radio" type="radio" name="waveAlign" id="waveAlignCenter"  value="center" checked>
+                        <label class="value" for="waveAlignCenter">center</label>
+                    </div>
+                </div>
                 <div class="row">
                     <div class="item">
                         <div class="name">Duration: </div>
@@ -146,4 +155,4 @@
     </script>
 </body>
 
-</html>
+</html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wfplayer",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "description": "WFPlayer.js is an audio waveform generator",
   "main": "dist/wfplayer.js",
   "types": "types/wfplayer.d.ts",

src/index.js

@@ -56,6 +56,7 @@ export default class WFPlayer extends Emitter {
             waveBorderWidth: 1,
             waveBorderColor: 'rgba(255, 255, 255, 0.1)',
             useAudioContext: false,
+            waveAlign: 'center',
         };
     }
 
@@ -91,6 +92,7 @@ export default class WFPlayer extends Emitter {
             waveBorderWidth: 'number',
             waveBorderColor: 'string',
             useAudioContext: 'boolean',
+            waveAlign: 'string',
         };
     }
 

src/worker.js

@@ -46,12 +46,20 @@ function drawBackground(data) {
 }
 
 function drawGrid(data) {
-    const { width, height, currentTime, gridColor, pixelRatio, scrollable } = data;
+    const { width, height, currentTime, gridColor, pixelRatio, scrollable, waveAlign } = data;
     ctx.fillStyle = gridColor;
     for (let index = 0; index < gridNum + 10; index += density) {
-        const x = scrollable
-            ? gridGap * index - (currentTime - parseInt(currentTime, 10)) * gridGap * 10
-            : gridGap * index;
+        // maybe just use x = gridGap * index, other statement is not useful
+        let x;
+        if (scrollable) {
+            if (waveAlign === 'left') {
+                x = gridGap * index;
+            } else {
+                x = gridGap * index - (currentTime - parseInt(currentTime, 10)) * gridGap * 10;
+            }
+        } else {
+            x = gridGap * index;
+        }
         ctx.fillRect(x, 0, pixelRatio, height);
     }
     for (let index = 0; index < height / gridGap; index += density) {
@@ -60,17 +68,24 @@ function drawGrid(data) {
 }
 
 function drawRuler(data) {
-    const { height, currentTime, rulerColor, pixelRatio, padding, rulerAtTop, scrollable } = data;
+    const { height, currentTime, rulerColor, pixelRatio, padding, rulerAtTop, scrollable, waveAlign } = data;
     const fontSize = 11;
     const fontHeight = 15;
     const fontTop = 30;
     ctx.font = `${fontSize * pixelRatio}px Arial`;
     ctx.fillStyle = rulerColor;
     let second = -1;
     for (let index = 0; index < gridNum + 10; index += 1) {
-        const x = scrollable
-            ? gridGap * index - (currentTime - parseInt(currentTime, 10)) * gridGap * 10
-            : gridGap * index;
+        let x;
+        if (scrollable) {
+            if (waveAlign === 'left') {
+                x = gridGap * index;
+            } else {
+                x = gridGap * index - (currentTime - parseInt(currentTime, 10)) * gridGap * 10;
+            }
+        } else {
+            x = gridGap * index;
+        }
         if ((index - padding) % 10 === 0) {
             second += 1;
             ctx.fillRect(x, rulerAtTop ? 0 : height - fontHeight * pixelRatio, pixelRatio, fontHeight * pixelRatio);
@@ -93,6 +108,11 @@ function drawRuler(data) {
     }
 }
 
+/**
+ * draw wave by data
+ *
+ * @param {Object} data
+ */
 function drawWave(data) {
     const {
         width,
@@ -109,14 +129,25 @@ function drawWave(data) {
         waveBorder,
         waveBorderWidth,
         waveBorderColor,
+        waveAlign,
     } = data;
 
     const middle = height / 2;
     const waveWidth = width - gridGap * padding * 2;
     const startIndex = Math.floor(beginTime * sampleRate);
     const endIndex = Math.floor(clamp((beginTime + duration) * sampleRate, startIndex, Infinity));
     const step = Math.floor((endIndex - startIndex) / waveWidth);
-    const cursorX = scrollable ? width / 2 : padding * gridGap + (currentTime - beginTime) * gridGap * 10;
+    let cursorX;
+    if (scrollable) {
+        // really is not useful, there is no padding between the wave and the canvas edge
+        if (waveAlign === 'left') {
+            cursorX = gridGap * padding;
+        } else {
+            cursorX = width / 2;
+        }
+    } else {
+        cursorX = gridGap * padding + (currentTime - beginTime) * gridGap * 10;
+    }
     let stepIndex = 0;
     let xIndex = 0;
     let min = 1;
@@ -174,10 +205,28 @@ function drawScrollbar(data) {
     ctx.fillRect(scrollbarLeft, scrollbarTop, scrollbarWidth, scrollbarHeight);
 }
 
+/**
+ * draw cursor line by currentTime
+ *
+ * if scrollable is true, and waveAlign is not left, the cursor will be drawn in the middle of the canvas
+ * if scrollable is true, and waveAlign is left, the cursor will be drawn at the left of the canvas
+ * if scrollable is false, the cursor will be drawn at the currentTime position
+ *
+ * @param {Object} data
+ */
 function drawCursor(data) {
-    const { height, width, currentTime, cursorColor, pixelRatio, padding, scrollable } = data;
+    const { height, width, currentTime, cursorColor, pixelRatio, padding, scrollable, waveAlign } = data;
     ctx.fillStyle = cursorColor;
-    const x = scrollable ? width / 2 : padding * gridGap + (currentTime - beginTime) * gridGap * 10;
+    let x;
+    if (scrollable) {
+        if (waveAlign === 'left') {
+            x = padding * gridGap;
+        } else {
+            x = width / 2;
+        }
+    } else {
+        x = padding * gridGap + (currentTime - beginTime) * gridGap * 10;
+    }
     ctx.fillRect(x, 0, pixelRatio, height);
 }
 
@@ -217,9 +266,17 @@ self.onmessage = function onmessage(event) {
         gridNum = data.duration * 10 + data.padding * 2;
         gridGap = data.width / gridNum;
         density = getDensity(data);
-        beginTime = data.scrollable
-            ? data.currentTime - data.duration / 2
-            : Math.floor(data.currentTime / data.duration) * data.duration;
+        // calculate the begin time
+        if (data.scrollable) {
+            // if waveAlign is left, the beginTime is 0, make sure the wave align left
+            if (data.waveAlign === 'left') {
+                beginTime = data.currentTime;
+            } else {
+                beginTime = data.currentTime - data.duration / 2;
+            }
+        } else {
+            beginTime = Math.floor(data.currentTime / data.duration) * data.duration;
+        }
 
         drawBackground(data);
 

types/wfplayer.d.ts

@@ -31,6 +31,7 @@ type Option = {
     waveBorder?: boolean;
     waveBorderWidth?: number;
     waveBorderColor?: string;
+    waveAlign?: 'center' | 'left';
 };
 
 type Config = {