Release v7 (#2956)

* Release v7

* Update upgrade notes

* Update readme

.github/workflows/release.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Extract version
         id: version
         run: |
-          OLD_VERSION=$(npm show wavesurfer.js@beta version)
+          OLD_VERSION=$(npm show wavesurfer.js version)
           NEW_VERSION=$(node -p 'require("./package.json").version')
           if [ $NEW_VERSION != $OLD_VERSION ]; then
             echo "New version $NEW_VERSION detected"
@@ -63,4 +63,4 @@ jobs:
         if: ${{ steps.version.outputs.version }}
         env:
           NODE_AUTH_TOKEN: ${{ secrets.npm_token }}
-        run: npm publish --tag beta
+        run: npm publish

README.md

@@ -1,10 +1,10 @@
 # <img src="https://user-images.githubusercontent.com/381895/226091100-f5567a28-7736-4d37-8f84-e08f297b7e1a.png" alt="logo" height="60" valign="middle" /> wavesurfer.js
 
-[![npm](https://img.shields.io/npm/v/wavesurfer.js/beta)](https://www.npmjs.com/package/wavesurfer.js)
+[![npm](https://img.shields.io/npm/v/wavesurfer.js)](https://www.npmjs.com/package/wavesurfer.js)
 
 ## New TypeScript version
 
-wavesurfer.js v7 beta is a TypeScript rewrite of wavesurfer.js that brings several improvements:
+wavesurfer.js v7 is a TypeScript rewrite of wavesurfer.js that brings several improvements:
 
  * Typed API for better development experience
  * Enhanced decoding and rendering performance
@@ -21,7 +21,7 @@ wavesurfer.js v7 beta is a TypeScript rewrite of wavesurfer.js that brings sever
 Try it out:
 
 ```bash
-npm install --save wavesurfer.js@beta
+npm install --save wavesurfer.js
 ```
 ```js
 import WaveSurfer from 'wavesurfer.js'
@@ -31,7 +31,7 @@ Alternatively, import it from a CDN as a ES6 module:
 
 ```html
 <script type="module">
-  import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+  import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
 
   const wavesurfer = WaveSurfer.create({
     container: '#waveform',
@@ -44,7 +44,7 @@ Alternatively, import it from a CDN as a ES6 module:
 
 Or, as a UMD script tag which exports the library as a global `WaveSurfer` variable:
 ```html
-<script type="text/javascript" src="https://unpkg.com/wavesurfer.js@beta/dist/wavesurfer.min.js"></script>
+<script type="text/javascript" src="https://unpkg.com/wavesurfer.js/dist/wavesurfer.min.js"></script>
 ```
 
 To import one of the plugins, e.g. the Timeline plugin:
@@ -53,11 +53,11 @@ import Timeline from 'wavesurfer.js/dist/plugins/timeline.js'
 
 // or with a CDN:
 
-import Timeline from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/timeline.js'
+import Timeline from 'https://unpkg.com/wavesurfer.js/dist/plugins/timeline.js'
 
 // or as a script tag
 
-<script type="text/javascript" src="https://unpkg.com/wavesurfer.js@beta/dist/plugins/timeline.min.js"></script>
+<script type="text/javascript" src="https://unpkg.com/wavesurfer.js/dist/plugins/timeline.min.js"></script>
 ```
 
 TypeScript types are included in the package, so there's no need to install `@types/wavesurfer.js`.
@@ -104,12 +104,12 @@ Most options, events, and methods are similar to those in previous versions.
 
 ### Notable differences
  * The `backend` option is removed – [HTML5 audio (or video) is the only playback mechanism](https://github.com/katspaugh/wavesurfer.js/discussions/2762#discussioncomment-5669347). However, you can still connect wavesurfer to Web Audio via `MediaElementSourceNode`. See this [example](https://wavesurfer-js.org/examples/#webaudio.js).
- * The Markers plugin is removed – use the Regions plugin with just a `startTime`.
+ * The Markers plugin is removed – you should use the Regions plugin with just a `startTime`.
  * No Microphone plugin – superseded by the new Record plugin with more features.
- * The Cursor plugin is replaced by the Hover plugin
+ * The Cursor plugin is replaced by the Hover plugin.
 
 ### Removed options
- * `backend`, `audioContext`, `closeAudioContext', 'audioScriptProcessor` – there's no Web Audio backend, so no AudioContext
+ * `backend`, `audioContext`, `closeAudioContext`, `audioScriptProcessor` – there's no Web Audio backend, so no AudioContext
  * `autoCenterImmediately` – `autoCenter` is now always immediate unless the audio is playing
  * `backgroundColor`, `hideCursor` – this can be easily set via CSS
  * `mediaType`, `mediaControls` – you should instead pass an entire media element in the `media` option. [Example](https://wavesurfer-js.org/examples/#video.js).
@@ -120,20 +120,21 @@ Most options, events, and methods are similar to those in previous versions.
  * `scrollParent` – the container will scroll if `minPxPerSec` is set to a higher value
  * `skipLength` – there's no `skipForward` and `skipBackward` methods anymore
  * `splitChannelsOptions` – you should now use `splitChannels` to pass the channel options. Pass `height: 0` to hide a channel. See [this example](https://wavesurfer-js.org/examples/#split-channels.js).
- * `xhr`, `drawingContextAttributes`, `maxCanvasWidth`, `forceDecode` – removed to reduce code complexity
+ * `drawingContextAttributes`, `maxCanvasWidth`, `forceDecode` – removed to reduce code complexity
+ * `xhr` - please use `fetchParams` instead
  * `barMinHeight` - the minimum bar height is now 1 pixel by default
 
 ### Removed methods
  * `getFilters`, `setFilter` – as there's no Web Audio "backend"
  * `drawBuffer` – to redraw the waveform, use `setOptions` instead and pass new rendering options
- * `cancelAjax` – ajax is replaced by `fetch`
+ * `cancelAjax` – you can pass an [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) in `fetchParams`
  * `loadBlob` – use `URL.createObjectURL()` to convert a blob to a URL and call `load(url)` instead
  * `skipForward`, `skipBackward`, `setPlayEnd` – can be implemented using `setTime(time)`
- * `exportPCM` is renamed to `getDecodedData` and doesn't take any params
+ * `exportPCM` is replaced with `getDecodedData` that returns a decoded audio buffer
  * `toggleMute` is now called `setMuted(true | false)`
  * `setHeight`, `setWaveColor`, `setCursorColor`, etc. – use `setOptions` with the corresponding params instead. E.g., `wavesurfer.setOptions({ height: 300, waveColor: '#abc' })`
 
-See the complete [documentation of the new API](http://wavesurfer-js.org/docs/methods).
+See the complete [documentation of the new API](http://wavesurfer-js.org/docs).
 
 ## Questions
 
@@ -142,13 +143,19 @@ Have a question about integrating wavesurfer.js on your website? Feel free to as
 ### FAQ
 
 * **Q**: Does wavesurfer support large files?
-* **A**: Since wavesurfer decodes audio entirely in the browser using Web Audio, large clips may result in an innacurately timed waveform or fail to decode at all due to memory constraints. We recommend using pre-decoded peaks for large files (see [this example](https://wavesurfer-js.org/examples/#predecoded.js)). You can use a tool like [bbc/audiowaveform](https://github.com/bbc/audiowaveform) to generate peaks.
+* **A**: Since wavesurfer decodes audio entirely in the browser using Web Audio, large clips may fail to decode due to memory constraints. We recommend using pre-decoded peaks for large files (see [this example](https://wavesurfer-js.org/examples/#predecoded.js)). You can use a tool like [bbc/audiowaveform](https://github.com/bbc/audiowaveform) to generate peaks.
 
 ---
 
 * **Q**: What about streaming audio?
 * **A**: Streaming isn't supported because wavesurfer needs to download the entire audio file to decode and render it.
 
+---
+
+* **Q**: There is a mismatch between my audio and the waveform.
+* **A**: If you're using a VBR (variable bit rate) mp3 file, there might be a mismatch between the audio and the waveform. This can be fixed by converting your file to CBR (constant bit rate). See [this issue](https://github.com/katspaugh/wavesurfer.js/issues/2890#issuecomment-1601067822) for details.
+
+
 ## Development
 
 To get started with development, follow these steps:
@@ -183,8 +190,8 @@ yarn cypress
 
 ## Feedback
 
-We appreciate your feedback and contributions! Join the conversation and share your thoughts here: https://github.com/wavesurfer-js/wavesurfer.js/discussions/2789
+We appreciate your feedback and contributions!
 
-If you encounter any issues or have suggestions for improvements, please don't hesitate to open an issue or submit a pull request on the GitHub repository.
+If you encounter any issues or have suggestions for improvements, please don't hesitate to post in our [forum](https://github.com/wavesurfer-js/wavesurfer.js/discussions/categories/q-a).
 
 We hope you enjoy using wavesurfer.ts and look forward to hearing about your experiences with the library!

examples/_preview.js

@@ -35,8 +35,8 @@ const loadPreview = (code) => {
     <script type="importmap">
       {
         "imports": {
-          "https://unpkg.com/wavesurfer.js@beta": "../dist/wavesurfer.js",
-          "https://unpkg.com/wavesurfer.js@beta/dist/": "../dist/"
+          "https://unpkg.com/wavesurfer.js": "../dist/wavesurfer.js",
+          "https://unpkg.com/wavesurfer.js/dist/": "../dist/"
         }
       }
     </script>

examples/all-options.js

@@ -1,6 +1,6 @@
 // All wavesurfer options in one place
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
 
 const audio = new Audio()
 audio.controls = true

examples/bars.js

@@ -1,6 +1,6 @@
 // SoundCloud-style bars
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
 
 const wavesurfer = WaveSurfer.create({
   container: document.body,

examples/basic.js

@@ -1,6 +1,6 @@
 // A super-basic example
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
 
 const wavesurfer = WaveSurfer.create({
   container: document.body,

examples/custom-render.js

@@ -1,6 +1,6 @@
 // Custom rendering function
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
 
 const wavesurfer = WaveSurfer.create({
   container: document.body,

examples/envelope.js

@@ -12,8 +12,8 @@
 </html>
 */
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
-import EnvelopePlugin from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/envelope.js'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
+import EnvelopePlugin from 'https://unpkg.com/wavesurfer.js/dist/plugins/envelope.js'
 
 // Create an instance of WaveSurfer
 const wavesurfer = WaveSurfer.create({

examples/fm-synth.js

@@ -1,6 +1,6 @@
 // A two-operator FM synth with a real-time waveform
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
 
 const wavesurfer = WaveSurfer.create({
   container: '#waveform',

examples/gradient.js

@@ -1,6 +1,6 @@
 // Fancy gradients
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
 
 // Create a canvas gradient
 const ctx = document.createElement('canvas').getContext('2d')

examples/hover.js

@@ -1,7 +1,7 @@
 // Hover plugin
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
-import Hover from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/hover.js'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
+import Hover from 'https://unpkg.com/wavesurfer.js/dist/plugins/hover.js'
 
 // Create an instance of WaveSurfer
 const ws = WaveSurfer.create({

examples/minimap.js

@@ -1,7 +1,7 @@
 // Minimap plugin
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
-import Minimap from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/minimap.js'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
+import Minimap from 'https://unpkg.com/wavesurfer.js/dist/plugins/minimap.js'
 
 // Create an instance of WaveSurfer
 const ws = WaveSurfer.create({

examples/pitch.js

@@ -1,4 +1,4 @@
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
 
 const pitchWorker = new Worker('/examples/pitch-worker.js', { type: 'module' })
 

examples/predecoded.js

@@ -1,6 +1,6 @@
 // With pre-decoded audio data
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
 
 const wavesurfer = WaveSurfer.create({
   container: document.body,

examples/react.js

@@ -12,8 +12,8 @@
 const { useRef, useState, useEffect, useCallback } = React
 
 // Import WaveSurfer
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
-import Timeline from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/timeline.js'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
+import Timeline from 'https://unpkg.com/wavesurfer.js/dist/plugins/timeline.js'
 
 // WaveSurfer hook
 const useWavesurfer = (containerRef, options) => {

examples/record.js

@@ -1,7 +1,7 @@
 // Record plugin
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
-import RecordPlugin from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/record.js'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
+import RecordPlugin from 'https://unpkg.com/wavesurfer.js/dist/plugins/record.js'
 
 // Create an instance of WaveSurfer
 const wavesurfer = WaveSurfer.create({

examples/regions.js

@@ -1,7 +1,7 @@
 // Regions plugin
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
-import RegionsPlugin from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/regions.js'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
+import RegionsPlugin from 'https://unpkg.com/wavesurfer.js/dist/plugins/regions.js'
 
 // Create an instance of WaveSurfer
 const ws = WaveSurfer.create({

examples/silence.js

@@ -1,7 +1,7 @@
 // Silence detection example
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
-import RegionsPlugin from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/regions.js'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
+import RegionsPlugin from 'https://unpkg.com/wavesurfer.js/dist/plugins/regions.js'
 
 // Create an instance of WaveSurfer
 const ws = WaveSurfer.create({

examples/soundcloud.js

@@ -1,6 +1,6 @@
 // Soundcloud-style player
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
 
 const canvas = document.createElement('canvas')
 const ctx = canvas.getContext('2d')

examples/spectrogram.js

@@ -1,7 +1,7 @@
 // Spectrogram plugin
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
-import Spectrogram from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/spectrogram.js'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
+import Spectrogram from 'https://unpkg.com/wavesurfer.js/dist/plugins/spectrogram.js'
 
 // Create an instance of WaveSurfer
 const ws = WaveSurfer.create({

examples/speed.js

@@ -23,7 +23,7 @@
 </html>
 */
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
 
 const wavesurfer = WaveSurfer.create({
   container: document.body,

examples/split-channels.js

@@ -1,6 +1,6 @@
 // Split channels
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
 
 const wavesurfer = WaveSurfer.create({
   container: document.body,

examples/styling.js

@@ -48,8 +48,8 @@
   </html>
 */
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
-import RegionsPlugin from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/regions.js'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
+import RegionsPlugin from 'https://unpkg.com/wavesurfer.js/dist/plugins/regions.js'
 
 // Create a Regions plugin instance
 const wsRegions = RegionsPlugin.create()

examples/timeline-custom.js

@@ -1,7 +1,7 @@
 // Customized Timeline plugin
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
-import TimelinePlugin from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/timeline.js'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
+import TimelinePlugin from 'https://unpkg.com/wavesurfer.js/dist/plugins/timeline.js'
 
 // Create a timeline plugin instance with custom options
 const topTimeline = TimelinePlugin.create({

examples/timeline.js

@@ -1,7 +1,7 @@
 // Timeline plugin
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
-import TimelinePlugin from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/timeline.js'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
+import TimelinePlugin from 'https://unpkg.com/wavesurfer.js/dist/plugins/timeline.js'
 
 // Create an instance of WaveSurfer
 const ws = WaveSurfer.create({

examples/video.js

@@ -12,7 +12,7 @@
 </html>
 */
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
 
 // Initialize wavesurfer.js
 const ws = WaveSurfer.create({

examples/vowels.js

@@ -1,7 +1,7 @@
 // American English vowels
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
-import Spectrogram from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/spectrogram.js'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
+import Spectrogram from 'https://unpkg.com/wavesurfer.js/dist/plugins/spectrogram.js'
 
 // Sounds generated with `say -v 'Reed (English (US))' word`
 const vowels = ['i', 'ɪ', 'ɛ', 'æ', 'ɑ', 'ɔ', 'o', 'ʊ', 'u', 'ʌ', 'ə', 'ɝ']

examples/webaudio.js

@@ -1,6 +1,6 @@
 // Web Audio example
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
 
 // Create your own media element
 const audio = new Audio()

examples/zoom.js

@@ -1,6 +1,6 @@
 // Zooming the waveform
 
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+import WaveSurfer from 'https://unpkg.com/wavesurfer.js'
 
 const wavesurfer = WaveSurfer.create({
   container: document.body,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "7.0.0-beta.16",
+  "version": "7.0.0",
   "license": "BSD-3-Clause",
   "author": "katspaugh",
   "description": "Navigable audio waveform player",