Convert color values from array to lineargradient (#2797)

* added convertColorValues private method

* Added snapshot test for color gradient

* removed undefined from function parameter types

Author: jgentes

cypress/e2e/options.cy.js

@@ -99,6 +99,33 @@ describe('WaveSurfer', () => {
     })
   })
 
+  it('should use gradient color options', () => {
+    cy.window().then((win) => {
+      return new Promise((resolve) => {
+        win.wavesurfer = win.WaveSurfer.create({
+          container: id,
+          url: '../../examples/audio/demo.wav',
+          waveColor: [
+            "rgb(200, 165, 49)",
+            "rgb(211, 194, 138)",
+            "rgb(205, 124, 49)",
+            "rgb(205, 98, 49)",
+          ],
+          progressColor: 'rgba(0, 0, 0, 0.25)',
+          cursorColor: 'blue',
+        })
+
+        win.wavesurfer.once('ready', () => {
+          win.wavesurfer.setTime(10)
+          cy.wait(100)
+          cy.snap
+          cy.get(id).matchImageSnapshot('colors-gradient')
+          resolve()
+        })
+      })
+    })
+  })
+
   it('should use cursor options', () => {
     cy.window().then((win) => {
       return new Promise((resolve) => {

cypress/snapshots/colors-gradient.snap.png

@@ -221,6 +221,25 @@ class Renderer extends EventEmitter<RendererEvents> {
     })
   }
 
+  // Convert array of color values to linear gradient
+	private convertColorValues(color: string | string[] = "") {
+		if (!Array.isArray(color)) return color;
+    if (color.length < 2) return color.length === 1 ? color[0] : "";
+    
+    const canvasElement = this.canvasWrapper.children[0] as HTMLCanvasElement;
+		const gradient = canvasElement.getContext('2d')?.createLinearGradient(0, 0, 0, canvasElement.height) || "";
+
+		if (gradient) {
+			const colorStopPercentage = 1 / (color.length - 1);
+			color.forEach((color, index) => {
+				const offset = index * colorStopPercentage;
+				gradient.addColorStop(offset, color);
+			});
+		}
+
+		return gradient;
+	}
+
   private async renderPeaks(audioData: AudioBuffer, width: number, height: number, pixelRatio: number) {
     const barWidth =
       this.options.barWidth != null && !isNaN(this.options.barWidth) ? this.options.barWidth * pixelRatio : 1
@@ -260,7 +279,7 @@ class Renderer extends EventEmitter<RendererEvents> {
       }) as CanvasRenderingContext2D
 
       ctx.beginPath()
-      ctx.fillStyle = this.options.waveColor ?? ''
+      ctx.fillStyle = this.convertColorValues(this.options.waveColor)
 
       // Firefox shim until 2023.04.11
       if (!ctx.roundRect) ctx.roundRect = ctx.fillRect