Feat: render pre-decoded waveform w/o audio (katspaugh#3283)

.gitignore

@@ -6,4 +6,5 @@ yarn-error.log
 cypress/screenshots
 cypress/downloads
 cypress/videos
+cypress/**/__diff_output__/
 .env

cypress/e2e/options.cy.js

@@ -4,7 +4,7 @@ const otherId = `#otherWaveform`
 describe('WaveSurfer options tests', () => {
   beforeEach(() => {
     cy.visit('cypress/e2e/index.html')
-
+    cy.viewport(600, 600)
     cy.window().its('WaveSurfer').should('exist')
   })
 
@@ -530,6 +530,23 @@ describe('WaveSurfer options tests', () => {
     })
   })
 
+  it('should render pre-decoded waveform w/o audio', (done) => {
+    cy.window().then((win) => {
+      const wavesurfer = win.WaveSurfer.create({
+        container: id,
+        peaks: new Array(512).fill(0.5).map((v, i) => v * Math.sin(i / 16)),
+        duration: 12.5,
+      })
+
+      expect(wavesurfer.getDuration().toFixed(2)).to.equal('12.50')
+
+      wavesurfer.once('redraw', () => {
+        cy.get(id).matchImageSnapshot('pre-decoded-no-audio')
+        done()
+      })
+    })
+  })
+
   it('should support Web Audio playback', (done) => {
     cy.window().then((win) => {
       const wavesurfer = win.WaveSurfer.create({
@@ -546,10 +563,6 @@ describe('WaveSurfer options tests', () => {
         wavesurfer.play()
       })
 
-      wavesurfer.on('timeupdate', () => {
-        console.log(wavesurfer.getCurrentTime())
-      })
-
       wavesurfer.once('finish', () => {
         done()
       })

package.json

@@ -56,7 +56,7 @@
     "cypress": "cypress open --e2e",
     "cypress:canary": "cypress open --e2e -b chrome:canary",
     "test": "cypress run",
-    "serve": "npx live-server --port=9090 --no-browser",
+    "serve": "npx live-server --port=9090 --no-browser --ignore='.*'",
     "start": "npm run build:dev & npm run serve"
   },
   "devDependencies": {

src/wavesurfer.ts

@@ -169,6 +169,9 @@ class WaveSurfer extends Player<WaveSurferEvents> {
     const url = this.options.url || this.getSrc()
     if (url) {
       this.load(url, this.options.peaks, this.options.duration)
+    } else if (this.options.peaks && this.options.duration) {
+      // If pre-decoded peaks and duration are provided, render a waveform w/o loading audio
+      this.loadPredecoded()
     }
   }
 
@@ -326,6 +329,21 @@ class WaveSurfer extends Player<WaveSurferEvents> {
     return this.plugins
   }
 
+  private async loadPredecoded() {
+    if (this.options.peaks && this.options.duration) {
+      this.decodedData = Decoder.createBuffer(this.options.peaks, this.options.duration)
+      await Promise.resolve() // wait for event listeners to subscribe
+      this.renderDecoded()
+    }
+  }
+
+  private async renderDecoded() {
+    if (this.decodedData) {
+      this.emit('decode', this.getDuration())
+      this.renderer.render(this.decodedData)
+    }
+  }
+
   private async loadAudio(url: string, blob?: Blob, channelData?: WaveSurferOptions['peaks'], duration?: number) {
     this.emit('load', url)
 
@@ -359,12 +377,7 @@ class WaveSurfer extends Player<WaveSurferEvents> {
       this.decodedData = await Decoder.decode(arrayBuffer, this.options.sampleRate)
     }
 
-    this.emit('decode', this.getDuration())
-
-    // Render the waveform
-    if (this.decodedData) {
-      this.renderer.render(this.decodedData)
-    }
+    this.renderDecoded()
 
     this.emit('ready', this.getDuration())
   }

tsconfig.json

@@ -5,8 +5,6 @@
       "ESNext",
       "DOM"
     ],
-    "module": "ESNext",
-    "moduleResolution": "nodenext",
     "allowUmdGlobalAccess": false,
     "declaration": true,
     "outDir": "./dist",