wavesurfer.js 7.2.3 → 7.3.0

package/README.md

@@ -54,57 +54,11 @@ See more [examples](https://wavesurfer-js.org/examples).
 
 ## API reference
 
-See the documentation on wavesurfer [methods](http://wavesurfer-js.org/docs/methods), [options](http://wavesurfer-js.org/docs/options) and [events](http://wavesurfer-js.org/docs/events).
-
-### Wavesurfer options
-- `container`: `HTMLElement | string` - Required: an HTML element or selector where the waveform will be rendered.
-- `height`: `number | 'auto'` - The height of the waveform in pixels, or "auto" to fill the container height
-- `waveColor`: `string | string[] | CanvasGradient` - The color of the waveform
-- `progressColor`: `string | string[] | CanvasGradient` - The color of the progress mask
-- `cursorColor`: `string` - The color of the playpack cursor
-- `cursorWidth`: `number` - The cursor width
-- `barWidth`: `number` - Render the waveform with bars like this: ▁ ▂ ▇ ▃ ▅ ▂
-- `barGap`: `number` - Spacing between bars in pixels
-- `barRadius`: `number` - Rounded borders for bars
-- `barHeight`: `number` - A vertical scaling factor for the waveform
-- `barAlign`: `'top' | 'bottom'` - Vertical bar alignment
-- `minPxPerSec`: `number` - Minimum pixels per second of audio (i.e. zoom level)
-- `fillParent`: `boolean` - Stretch the waveform to fill the container, true by default
-- `url`: `string` - Audio URL
-- `peaks`: `Array<Float32Array | number[]>` - Pre-computed audio data
-- `duration`: `number` - Pre-computed duration
-- `media`: `HTMLMediaElement` - Use an existing media element instead of creating one
-- `autoplay`: `boolean` - Play the audio on load
-- `interact`: `boolean` - Pass false to disable clicks on the waveform
-- `hideScrollbar`: `boolean` - Hide the scrollbar
-- `audioRate`: `number` - Audio rate
-- `autoScroll`: `boolean` - Automatically scroll the container to keep the current position in viewport
-- `autoCenter`: `boolean` - If autoScroll is enabled, keep the cursor in the center of the waveform during playback
-- `sampleRate`: `number` - Decoding sample rate. Doesn't affect the playback. Defaults to 8000
-- `splitChannels`: `WaveSurferOptions[]` - Render each audio channel as a separate waveform
-- `normalize`: `boolean` - Stretch the waveform to the full height
-- `plugins`: `GenericPlugin[]` - The list of plugins to initialize on start
-- `renderFunction`: `(peaks: Array<Float32Array | number[]>, ctx: CanvasRenderingContext2D) => void` - Custom render function
-- `fetchParams`: `RequestInit` - Options to pass to the fetch method
-
-### Wavesurfer events
-- `load`: `[url: string]` - When audio starts loading
-- `loading`: `[percentage: number]` - When audio is being loaded
-- `decode`: `[duration: number]` - When the audio has been decoded
-- `ready`: `[duration: number]` - When the audio is both decoded and can play
-- `redraw`: `[]` - When a waveform is drawn
-- `play`: `[]` - When the audio starts playing
-- `pause`: `[]` - When the audio pauses
-- `finish`: `[]` - When the audio finishes playing
-- `timeupdate`: `[currentTime: number]` - On audio position change, fires continuously during playback
-- `audioprocess`: `[currentTime: number]` - An alias of timeupdate but only when the audio is playing
-- `seeking`: `[currentTime: number]` - When the user seeks to a new position
-- `interaction`: `[newTime: number]` - When the user interacts with the waveform (i.g. clicks or drags on it)
-- `click`: `[relativeX: number]` - When the user clicks on the waveform
-- `drag`: `[relativeX: number]` - When the user drags the cursor
-- `scroll`: `[visibleStartTime: number, visibleEndTime: number]` - When the waveform is scrolled (panned)
-- `zoom`: `[minPxPerSec: number]` - When the zoom level changes
-- `destroy`: `[]` - Just before the waveform is destroyed so you can clean up your events
+See the wavesurfer.js documentation on our website:
+
+ * [methods](http://wavesurfer-js.org/docs/methods)
+ * [options](http://wavesurfer-js.org/docs/options)
+ * [events](http://wavesurfer-js.org/docs/events)
 
 ## Plugins
 
@@ -116,7 +70,7 @@ The "official" plugins have been completely rewritten and enhanced:
  * [Envelope](https://wavesurfer-js.org/examples/#envelope.js) – a graphical interface to add fade-in and -out effects and control volume
  * [Record](https://wavesurfer-js.org/examples/#record.js) – records audio from the microphone and renders a waveform
  * [Spectrogram](https://wavesurfer-js.org/examples/#spectrogram.js) – visualization of an audio frequency spectrum (written by @akreal)
-  * [Hover](https://wavesurfer-js.org/examples/#hover.js) – shows a vertical line and timestmap on waveform hover
+ * [Hover](https://wavesurfer-js.org/examples/#hover.js) – shows a vertical line and timestmap on waveform hover
 
 ## CSS styling
 
@@ -189,8 +143,8 @@ Have a question about integrating wavesurfer.js on your website? Feel free to as
 
 ---
 
-* **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.
+* **Q**: There is a mismatch between my audio and the waveform. How do I fix it?
+* **A**: If you're using a VBR (variable bit rate) audio 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
@@ -231,4 +185,4 @@ We appreciate your feedback and contributions!
 
 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!
+We hope you enjoy using wavesurfer.js and look forward to hearing about your experiences with the library!

package/dist/plugins/envelope.cjs

@@ -1 +1 @@
-"use strict";class t{constructor(){this.listeners={}}on(t,e){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),o=this.on(t,(()=>{i(),o()}));return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,o,s=5){let n=()=>{};if(!t)return n;const r=r=>{if(2===r.button)return;r.preventDefault(),r.stopPropagation();let l=r.clientX,a=r.clientY,u=!1;const h=o=>{o.preventDefault(),o.stopPropagation();const n=o.clientX,r=o.clientY;if(u||Math.abs(n-l)>=s||Math.abs(r-a)>=s){const{left:o,top:s}=t.getBoundingClientRect();u||(u=!0,null==i||i(l-o,a-s)),e(n-l,r-a,n-o,r-s),l=n,a=r}},d=t=>{u&&(t.preventDefault(),t.stopPropagation())},c=()=>{u&&(null==o||o()),n()};document.addEventListener("pointermove",h),document.addEventListener("pointerup",c),document.addEventListener("pointerleave",c),document.addEventListener("click",d,!0),n=()=>{document.removeEventListener("pointermove",h),document.removeEventListener("pointerup",c),document.removeEventListener("pointerleave",c),setTimeout((()=>{document.removeEventListener("click",d,!0)}),10)}};return t.addEventListener("pointerdown",r),()=>{n(),t.removeEventListener("pointerdown",r)}}const o={points:[],lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointSizeMobile:30,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class s extends t{constructor(t,e){super(),this.options=t,this.polyPoints=new Map;const o=e.clientWidth,s=e.clientHeight,n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width","100%"),n.setAttribute("height","100%"),n.setAttribute("viewBox",`0 0 ${o} ${s}`),n.setAttribute("preserveAspectRatio","none"),n.setAttribute("style","position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;"),n.setAttribute("part","envelope"),this.svg=n;const r=document.createElementNS("http://www.w3.org/2000/svg","polyline");r.setAttribute("points",`0,${s} ${o},${s}`),r.setAttribute("stroke",t.lineColor),r.setAttribute("stroke-width",t.lineWidth),r.setAttribute("fill","none"),r.setAttribute("part","polyline"),r.setAttribute("style",t.dragLine?"cursor: row-resize; pointer-events: stroke;":""),n.appendChild(r),e.appendChild(n),t.dragLine&&i(r,((t,e)=>{const{height:i}=n.viewBox.baseVal,{points:o}=r;for(let t=1;t<o.numberOfItems-1;t++){const s=o.getItem(t);s.y=Math.min(i,Math.max(0,s.y+e))}const s=n.querySelectorAll("ellipse");Array.from(s).forEach((t=>{const o=Math.min(i,Math.max(0,Number(t.getAttribute("cy"))+e));t.setAttribute("cy",o.toString())})),this.emit("line-move",e/i)})),n.addEventListener("dblclick",(t=>{const e=n.getBoundingClientRect(),i=t.clientX-e.left,o=t.clientY-e.top;this.emit("point-create",i/e.width,o/e.height)}))}makeDraggable(t,e){i(t,e,(()=>t.style.cursor="grabbing"),(()=>t.style.cursor="grab"))}createCircle(t,e){var i;const o=document.createElementNS("http://www.w3.org/2000/svg","ellipse"),s=(Number(null===(i=window.top)||void 0===i?void 0:i.innerWidth)>900?this.options.dragPointSize:this.options.dragPointSizeMobile)/2;return o.setAttribute("rx",s.toString()),o.setAttribute("ry",s.toString()),o.setAttribute("fill",this.options.dragPointFill),this.options.dragPointStroke&&(o.setAttribute("stroke",this.options.dragPointStroke),o.setAttribute("stroke-width","2")),o.setAttribute("style","cursor: grab; pointer-events: all;"),o.setAttribute("part","envelope-circle"),o.setAttribute("cx",t.toString()),o.setAttribute("cy",e.toString()),this.svg.appendChild(o),o}removePolyPoint(t){const e=this.polyPoints.get(t);if(!e)return;const{polyPoint:i,circle:o}=e,{points:s}=this.svg.querySelector("polyline"),n=Array.from(s).findIndex((t=>t.x===i.x&&t.y===i.y));s.removeItem(n),o.remove(),this.polyPoints.delete(t)}addPolyPoint(t,e,i){const{svg:o}=this,{width:s,height:n}=o.viewBox.baseVal,r=t*s,l=n-e*n,a=this.options.dragPointSize/2,u=o.createSVGPoint();u.x=t*s,u.y=n-e*n;const h=this.createCircle(r,l),{points:d}=o.querySelector("polyline"),c=Array.from(d).findIndex((t=>t.x>=r));d.insertItemBefore(u,Math.max(c,1)),this.polyPoints.set(i,{polyPoint:u,circle:h}),this.makeDraggable(h,((t,e)=>{const o=u.x+t,r=u.y+e;if(o<-a||r<-a||o>s+a||r>n+a)return void this.emit("point-dragout",i);const l=Array.from(d).find((t=>t.x>u.x)),c=Array.from(d).findLast((t=>t.x<u.x));l&&o>=l.x||c&&o<=c.x||(u.x=o,u.y=r,h.setAttribute("cx",o.toString()),h.setAttribute("cy",r.toString()),this.emit("point-move",i,o/s,r/n))}))}update(){const{svg:t}=this,e=t.viewBox.baseVal.width/t.clientWidth,i=t.viewBox.baseVal.height/t.clientHeight;t.querySelectorAll("ellipse").forEach((t=>{const o=this.options.dragPointSize/2,s=o*e,n=o*i;t.setAttribute("rx",s.toString()),t.setAttribute("ry",n.toString())}))}destroy(){this.polyPoints.clear(),this.svg.remove()}}class n extends e{constructor(t){super(t),this.polyline=null,this.throttleTimeout=null,this.ac=null,this.gain=null,this.points=t.points||[],this.options=Object.assign({},o,t),this.options.lineColor=this.options.lineColor||o.lineColor,this.options.dragPointFill=this.options.dragPointFill||o.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||o.dragPointStroke}static create(t){return new n(t)}addPoint(t){var e;t.id||(t.id=Math.random().toString(36).slice(2));const i=this.points.findLastIndex((e=>e.time<t.time));this.points.splice(i+1,0,t),this.emitPoints();const o=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDuration();o&&this.addPolyPoint(t,o)}removePoint(t){var e;this.points.splice(this.points.indexOf(t),1),null===(e=this.polyline)||void 0===e||e.removePolyPoint(t),this.emitPoints()}getPoints(){return this.points}setPoints(t){this.points.slice().forEach((t=>this.removePoint(t))),t.forEach((t=>this.addPoint(t)))}destroy(){var t,e;null===(t=this.polyline)||void 0===t||t.destroy(),null===(e=this.ac)||void 0===e||e.close(),super.destroy()}getCurrentVolume(){var t;return(null===(t=this.gain)||void 0===t?void 0:t.value)||0}setVolume(t){this.gain&&(this.gain.value=t)}onInit(){var t;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const{options:e}=this;e.volume=null!==(t=e.volume)&&void 0!==t?t:this.wavesurfer.getVolume(),this.initAudioContext(this.wavesurfer.getMediaElement()),this.subscriptions.push(this.wavesurfer.on("decode",(t=>{this.initPolyline(),this.points.forEach((e=>{this.addPolyPoint(e,t)}))})),this.wavesurfer.on("redraw",(()=>{var t;null===(t=this.polyline)||void 0===t||t.update()})),this.wavesurfer.on("timeupdate",(t=>{this.onTimeUpdate(t)})),this.wavesurfer.on("play",(()=>{var t;"suspended"===(null===(t=this.ac)||void 0===t?void 0:t.state)&&this.ac.resume()})))}initAudioContext(t){var e;const i=new AudioContext,o=i.createGain();o.gain.value=null!==(e=this.options.volume)&&void 0!==e?e:1,o.connect(i.destination);i.createMediaElementSource(t).connect(o),this.ac=i,this.gain=o.gain}emitPoints(){this.throttleTimeout&&clearTimeout(this.throttleTimeout),this.throttleTimeout=setTimeout((()=>{this.emit("points-change",this.points)}),200)}initPolyline(){if(this.polyline&&this.polyline.destroy(),!this.wavesurfer)return;const t=this.wavesurfer.getWrapper();this.polyline=new s(this.options,t),this.subscriptions.push(this.polyline.on("point-move",((t,e,i)=>{var o;const s=(null===(o=this.wavesurfer)||void 0===o?void 0:o.getDuration())||0;t.time=e*s,t.volume=1-i,this.emitPoints()})),this.polyline.on("point-dragout",(t=>{this.removePoint(t)})),this.polyline.on("point-create",((t,e)=>{var i;this.addPoint({time:t*((null===(i=this.wavesurfer)||void 0===i?void 0:i.getDuration())||0),volume:1-e})})),this.polyline.on("line-move",(t=>{var e;this.points.forEach((e=>{e.volume=Math.min(1,Math.max(0,e.volume-t))})),this.emitPoints(),this.onTimeUpdate((null===(e=this.wavesurfer)||void 0===e?void 0:e.getCurrentTime())||0)})))}addPolyPoint(t,e){var i;null===(i=this.polyline)||void 0===i||i.addPolyPoint(t.time/e,t.volume,t)}onTimeUpdate(t){if(!this.wavesurfer)return;let e=this.points.find((e=>e.time>t));e||(e={time:this.wavesurfer.getDuration()||0,volume:0});let i=this.points.findLast((e=>e.time<=t));i||(i={time:0,volume:0});const o=e.time-i.time,s=e.volume-i.volume,n=i.volume+(t-i.time)*(s/o),r=Math.min(1,Math.max(0,n)),l=Math.round(100*r)/100;l!==this.getCurrentVolume()&&(this.setVolume(l),this.emit("volume-change",n))}setStartTime(){console.warn("[wavesurfer.js envelope plugin] `setStartTime` is deprecated, use `setPoints` instead.")}setEndTime(){console.warn("[wavesurfer.js envelope plugin] `setEndTime` is deprecated, use `setPoints` instead.")}setFadeInEnd(){console.warn("[wavesurfer.js envelope plugin] `setFadeInEnd` is deprecated, use `setPoints` instead.")}setFadeOutStart(){console.warn("[wavesurfer.js envelope plugin] `setFadeOutStart` is deprecated, use `setPoints` instead.")}}module.exports=n;
+"use strict";class t{constructor(){this.listeners={}}on(t,e){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),o=this.on(t,(()=>{i(),o()}));return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,o,s=5){let n=()=>{};if(!t)return n;const r=r=>{if(2===r.button)return;r.preventDefault(),r.stopPropagation();let l=r.clientX,a=r.clientY,h=!1;const u=o=>{o.preventDefault(),o.stopPropagation();const n=o.clientX,r=o.clientY;if(h||Math.abs(n-l)>=s||Math.abs(r-a)>=s){const{left:o,top:s}=t.getBoundingClientRect();h||(h=!0,null==i||i(l-o,a-s)),e(n-l,r-a,n-o,r-s),l=n,a=r}},d=t=>{h&&(t.preventDefault(),t.stopPropagation())},c=()=>{h&&(null==o||o()),n()};document.addEventListener("pointermove",u),document.addEventListener("pointerup",c),document.addEventListener("pointerleave",c),document.addEventListener("click",d,!0),n=()=>{document.removeEventListener("pointermove",u),document.removeEventListener("pointerup",c),document.removeEventListener("pointerleave",c),setTimeout((()=>{document.removeEventListener("click",d,!0)}),10)}};return t.addEventListener("pointerdown",r),()=>{n(),t.removeEventListener("pointerdown",r)}}const o={points:[],lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class s extends t{constructor(t,e){super(),this.options=t,this.polyPoints=new Map;const o=e.clientWidth,s=e.clientHeight,n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width","100%"),n.setAttribute("height","100%"),n.setAttribute("viewBox",`0 0 ${o} ${s}`),n.setAttribute("preserveAspectRatio","none"),n.setAttribute("style","position: absolute; left: 0; top: 0; z-index: 4;"),n.setAttribute("part","envelope"),this.svg=n;const r=document.createElementNS("http://www.w3.org/2000/svg","polyline");r.setAttribute("points",`0,${s} ${o},${s}`),r.setAttribute("stroke",t.lineColor),r.setAttribute("stroke-width",t.lineWidth),r.setAttribute("fill","none"),r.setAttribute("part","polyline"),r.setAttribute("style",t.dragLine?"cursor: row-resize; pointer-events: stroke;":""),n.appendChild(r),e.appendChild(n),t.dragLine&&i(r,((t,e)=>{const{height:i}=n.viewBox.baseVal,{points:o}=r;for(let t=1;t<o.numberOfItems-1;t++){const s=o.getItem(t);s.y=Math.min(i,Math.max(0,s.y+e))}const s=n.querySelectorAll("ellipse");Array.from(s).forEach((t=>{const o=Math.min(i,Math.max(0,Number(t.getAttribute("cy"))+e));t.setAttribute("cy",o.toString())})),this.emit("line-move",e/i)})),n.addEventListener("dblclick",(t=>{const e=n.getBoundingClientRect(),i=t.clientX-e.left,o=t.clientY-e.top;this.emit("point-create",i/e.width,o/e.height)}));{let t;const e=()=>clearTimeout(t);n.addEventListener("touchstart",(i=>{1===i.touches.length?t=window.setTimeout((()=>{i.preventDefault();const t=n.getBoundingClientRect(),e=i.touches[0].clientX-t.left,o=i.touches[0].clientY-t.top;this.emit("point-create",e/t.width,o/t.height)}),500):e()})),n.addEventListener("touchmove",e),n.addEventListener("touchend",e)}}makeDraggable(t,e){i(t,e,(()=>t.style.cursor="grabbing"),(()=>t.style.cursor="grab"))}createCircle(t,e){const i=document.createElementNS("http://www.w3.org/2000/svg","ellipse"),o=this.options.dragPointSize/2;return i.setAttribute("rx",o.toString()),i.setAttribute("ry",o.toString()),i.setAttribute("fill",this.options.dragPointFill),this.options.dragPointStroke&&(i.setAttribute("stroke",this.options.dragPointStroke),i.setAttribute("stroke-width","2")),i.setAttribute("style","cursor: grab; pointer-events: all;"),i.setAttribute("part","envelope-circle"),i.setAttribute("cx",t.toString()),i.setAttribute("cy",e.toString()),this.svg.appendChild(i),i}removePolyPoint(t){const e=this.polyPoints.get(t);if(!e)return;const{polyPoint:i,circle:o}=e,{points:s}=this.svg.querySelector("polyline"),n=Array.from(s).findIndex((t=>t.x===i.x&&t.y===i.y));s.removeItem(n),o.remove(),this.polyPoints.delete(t)}addPolyPoint(t,e,i){const{svg:o}=this,{width:s,height:n}=o.viewBox.baseVal,r=t*s,l=n-e*n,a=this.options.dragPointSize/2,h=o.createSVGPoint();h.x=t*s,h.y=n-e*n;const u=this.createCircle(r,l),{points:d}=o.querySelector("polyline"),c=Array.from(d).findIndex((t=>t.x>=r));d.insertItemBefore(h,Math.max(c,1)),this.polyPoints.set(i,{polyPoint:h,circle:u}),this.makeDraggable(u,((t,e)=>{const o=h.x+t,r=h.y+e;if(o<-a||r<-a||o>s+a||r>n+a)return void this.emit("point-dragout",i);const l=Array.from(d).find((t=>t.x>h.x)),c=Array.from(d).findLast((t=>t.x<h.x));l&&o>=l.x||c&&o<=c.x||(h.x=o,h.y=r,u.setAttribute("cx",o.toString()),u.setAttribute("cy",r.toString()),this.emit("point-move",i,o/s,r/n))}))}update(){const{svg:t}=this,e=t.viewBox.baseVal.width/t.clientWidth,i=t.viewBox.baseVal.height/t.clientHeight;t.querySelectorAll("ellipse").forEach((t=>{const o=this.options.dragPointSize/2,s=o*e,n=o*i;t.setAttribute("rx",s.toString()),t.setAttribute("ry",n.toString())}))}destroy(){this.polyPoints.clear(),this.svg.remove()}}class n extends e{constructor(t){super(t),this.polyline=null,this.throttleTimeout=null,this.ac=null,this.gain=null,this.points=t.points||[],this.options=Object.assign({},o,t),this.options.lineColor=this.options.lineColor||o.lineColor,this.options.dragPointFill=this.options.dragPointFill||o.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||o.dragPointStroke,this.options.dragPointSize=this.options.dragPointSize||o.dragPointSize}static create(t){return new n(t)}addPoint(t){var e;t.id||(t.id=Math.random().toString(36).slice(2));const i=this.points.findLastIndex((e=>e.time<t.time));this.points.splice(i+1,0,t),this.emitPoints();const o=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDuration();o&&this.addPolyPoint(t,o)}removePoint(t){var e;const i=this.points.indexOf(t);i>-1&&(this.points.splice(i,1),null===(e=this.polyline)||void 0===e||e.removePolyPoint(t),this.emitPoints())}getPoints(){return this.points}setPoints(t){this.points.slice().forEach((t=>this.removePoint(t))),t.forEach((t=>this.addPoint(t)))}destroy(){var t,e;null===(t=this.polyline)||void 0===t||t.destroy(),null===(e=this.ac)||void 0===e||e.close(),super.destroy()}getCurrentVolume(){var t;return(null===(t=this.gain)||void 0===t?void 0:t.value)||0}setVolume(t){this.gain&&(this.gain.value=t)}onInit(){var t;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const{options:e}=this;e.volume=null!==(t=e.volume)&&void 0!==t?t:this.wavesurfer.getVolume(),this.initAudioContext(this.wavesurfer.getMediaElement()),this.subscriptions.push(this.wavesurfer.on("decode",(t=>{this.initPolyline(),this.points.forEach((e=>{this.addPolyPoint(e,t)}))})),this.wavesurfer.on("redraw",(()=>{var t;null===(t=this.polyline)||void 0===t||t.update()})),this.wavesurfer.on("timeupdate",(t=>{this.onTimeUpdate(t)})),this.wavesurfer.on("play",(()=>{var t;"suspended"===(null===(t=this.ac)||void 0===t?void 0:t.state)&&this.ac.resume()})))}initAudioContext(t){var e;const i=new AudioContext,o=i.createGain();o.gain.value=null!==(e=this.options.volume)&&void 0!==e?e:1,o.connect(i.destination);i.createMediaElementSource(t).connect(o),this.ac=i,this.gain=o.gain}emitPoints(){this.throttleTimeout&&clearTimeout(this.throttleTimeout),this.throttleTimeout=setTimeout((()=>{this.emit("points-change",this.points)}),200)}initPolyline(){if(this.polyline&&this.polyline.destroy(),!this.wavesurfer)return;const t=this.wavesurfer.getWrapper();this.polyline=new s(this.options,t),this.subscriptions.push(this.polyline.on("point-move",((t,e,i)=>{var o;const s=(null===(o=this.wavesurfer)||void 0===o?void 0:o.getDuration())||0;t.time=e*s,t.volume=1-i,this.emitPoints()})),this.polyline.on("point-dragout",(t=>{this.removePoint(t)})),this.polyline.on("point-create",((t,e)=>{var i;this.addPoint({time:t*((null===(i=this.wavesurfer)||void 0===i?void 0:i.getDuration())||0),volume:1-e})})),this.polyline.on("line-move",(t=>{var e;this.points.forEach((e=>{e.volume=Math.min(1,Math.max(0,e.volume-t))})),this.emitPoints(),this.onTimeUpdate((null===(e=this.wavesurfer)||void 0===e?void 0:e.getCurrentTime())||0)})))}addPolyPoint(t,e){var i;null===(i=this.polyline)||void 0===i||i.addPolyPoint(t.time/e,t.volume,t)}onTimeUpdate(t){if(!this.wavesurfer)return;let e=this.points.find((e=>e.time>t));e||(e={time:this.wavesurfer.getDuration()||0,volume:0});let i=this.points.findLast((e=>e.time<=t));i||(i={time:0,volume:0});const o=e.time-i.time,s=e.volume-i.volume,n=i.volume+(t-i.time)*(s/o),r=Math.min(1,Math.max(0,n)),l=Math.round(100*r)/100;l!==this.getCurrentVolume()&&(this.setVolume(l),this.emit("volume-change",n))}}module.exports=n;

package/dist/plugins/envelope.d.ts

@@ -14,24 +14,14 @@ export type EnvelopePluginOptions = {
     lineColor?: string;
     dragLine?: boolean;
     dragPointSize?: number;
-    dragPointSizeMobile?: number;
     dragPointFill?: string;
     dragPointStroke?: string;
-    /** Deprecated. Use `points` instead. */
-    fadeInStart?: number;
-    /** Deprecated. Use `points` instead. */
-    fadeInEnd?: number;
-    /** Deprecated. Use `points` instead. */
-    fadeOutStart?: number;
-    /** Deprecated. Use `points` instead. */
-    fadeOutEnd?: number;
 };
 declare const defaultOptions: {
     points: EnvelopePoint[];
     lineWidth: number;
     lineColor: string;
     dragPointSize: number;
-    dragPointSizeMobile: number;
     dragPointFill: string;
     dragPointStroke: string;
 };
@@ -87,21 +77,5 @@ declare class EnvelopePlugin extends BasePlugin<EnvelopePluginEvents, EnvelopePl
     private initPolyline;
     private addPolyPoint;
     private onTimeUpdate;
-    /**
-     * Deprecated: use `setPoints` instead.
-     */
-    setStartTime(): void;
-    /**
-     * Deprecated: use `setPoints` instead.
-     */
-    setEndTime(): void;
-    /**
-     * Deprecated: use `setPoints` instead.
-     */
-    setFadeInEnd(): void;
-    /**
-     * Deprecated: use `setPoints` instead.
-     */
-    setFadeOutStart(): void;
 }
 export default EnvelopePlugin;

package/dist/plugins/envelope.esm.js

@@ -1 +1 @@
-class t{constructor(){this.listeners={}}on(t,e){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),o=this.on(t,(()=>{i(),o()}));return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,o,s=5){let n=()=>{};if(!t)return n;const r=r=>{if(2===r.button)return;r.preventDefault(),r.stopPropagation();let l=r.clientX,a=r.clientY,u=!1;const h=o=>{o.preventDefault(),o.stopPropagation();const n=o.clientX,r=o.clientY;if(u||Math.abs(n-l)>=s||Math.abs(r-a)>=s){const{left:o,top:s}=t.getBoundingClientRect();u||(u=!0,null==i||i(l-o,a-s)),e(n-l,r-a,n-o,r-s),l=n,a=r}},d=t=>{u&&(t.preventDefault(),t.stopPropagation())},p=()=>{u&&(null==o||o()),n()};document.addEventListener("pointermove",h),document.addEventListener("pointerup",p),document.addEventListener("pointerleave",p),document.addEventListener("click",d,!0),n=()=>{document.removeEventListener("pointermove",h),document.removeEventListener("pointerup",p),document.removeEventListener("pointerleave",p),setTimeout((()=>{document.removeEventListener("click",d,!0)}),10)}};return t.addEventListener("pointerdown",r),()=>{n(),t.removeEventListener("pointerdown",r)}}const o={points:[],lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointSizeMobile:30,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class s extends t{constructor(t,e){super(),this.options=t,this.polyPoints=new Map;const o=e.clientWidth,s=e.clientHeight,n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width","100%"),n.setAttribute("height","100%"),n.setAttribute("viewBox",`0 0 ${o} ${s}`),n.setAttribute("preserveAspectRatio","none"),n.setAttribute("style","position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;"),n.setAttribute("part","envelope"),this.svg=n;const r=document.createElementNS("http://www.w3.org/2000/svg","polyline");r.setAttribute("points",`0,${s} ${o},${s}`),r.setAttribute("stroke",t.lineColor),r.setAttribute("stroke-width",t.lineWidth),r.setAttribute("fill","none"),r.setAttribute("part","polyline"),r.setAttribute("style",t.dragLine?"cursor: row-resize; pointer-events: stroke;":""),n.appendChild(r),e.appendChild(n),t.dragLine&&i(r,((t,e)=>{const{height:i}=n.viewBox.baseVal,{points:o}=r;for(let t=1;t<o.numberOfItems-1;t++){const s=o.getItem(t);s.y=Math.min(i,Math.max(0,s.y+e))}const s=n.querySelectorAll("ellipse");Array.from(s).forEach((t=>{const o=Math.min(i,Math.max(0,Number(t.getAttribute("cy"))+e));t.setAttribute("cy",o.toString())})),this.emit("line-move",e/i)})),n.addEventListener("dblclick",(t=>{const e=n.getBoundingClientRect(),i=t.clientX-e.left,o=t.clientY-e.top;this.emit("point-create",i/e.width,o/e.height)}))}makeDraggable(t,e){i(t,e,(()=>t.style.cursor="grabbing"),(()=>t.style.cursor="grab"))}createCircle(t,e){var i;const o=document.createElementNS("http://www.w3.org/2000/svg","ellipse"),s=(Number(null===(i=window.top)||void 0===i?void 0:i.innerWidth)>900?this.options.dragPointSize:this.options.dragPointSizeMobile)/2;return o.setAttribute("rx",s.toString()),o.setAttribute("ry",s.toString()),o.setAttribute("fill",this.options.dragPointFill),this.options.dragPointStroke&&(o.setAttribute("stroke",this.options.dragPointStroke),o.setAttribute("stroke-width","2")),o.setAttribute("style","cursor: grab; pointer-events: all;"),o.setAttribute("part","envelope-circle"),o.setAttribute("cx",t.toString()),o.setAttribute("cy",e.toString()),this.svg.appendChild(o),o}removePolyPoint(t){const e=this.polyPoints.get(t);if(!e)return;const{polyPoint:i,circle:o}=e,{points:s}=this.svg.querySelector("polyline"),n=Array.from(s).findIndex((t=>t.x===i.x&&t.y===i.y));s.removeItem(n),o.remove(),this.polyPoints.delete(t)}addPolyPoint(t,e,i){const{svg:o}=this,{width:s,height:n}=o.viewBox.baseVal,r=t*s,l=n-e*n,a=this.options.dragPointSize/2,u=o.createSVGPoint();u.x=t*s,u.y=n-e*n;const h=this.createCircle(r,l),{points:d}=o.querySelector("polyline"),p=Array.from(d).findIndex((t=>t.x>=r));d.insertItemBefore(u,Math.max(p,1)),this.polyPoints.set(i,{polyPoint:u,circle:h}),this.makeDraggable(h,((t,e)=>{const o=u.x+t,r=u.y+e;if(o<-a||r<-a||o>s+a||r>n+a)return void this.emit("point-dragout",i);const l=Array.from(d).find((t=>t.x>u.x)),p=Array.from(d).findLast((t=>t.x<u.x));l&&o>=l.x||p&&o<=p.x||(u.x=o,u.y=r,h.setAttribute("cx",o.toString()),h.setAttribute("cy",r.toString()),this.emit("point-move",i,o/s,r/n))}))}update(){const{svg:t}=this,e=t.viewBox.baseVal.width/t.clientWidth,i=t.viewBox.baseVal.height/t.clientHeight;t.querySelectorAll("ellipse").forEach((t=>{const o=this.options.dragPointSize/2,s=o*e,n=o*i;t.setAttribute("rx",s.toString()),t.setAttribute("ry",n.toString())}))}destroy(){this.polyPoints.clear(),this.svg.remove()}}class n extends e{constructor(t){super(t),this.polyline=null,this.throttleTimeout=null,this.ac=null,this.gain=null,this.points=t.points||[],this.options=Object.assign({},o,t),this.options.lineColor=this.options.lineColor||o.lineColor,this.options.dragPointFill=this.options.dragPointFill||o.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||o.dragPointStroke}static create(t){return new n(t)}addPoint(t){var e;t.id||(t.id=Math.random().toString(36).slice(2));const i=this.points.findLastIndex((e=>e.time<t.time));this.points.splice(i+1,0,t),this.emitPoints();const o=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDuration();o&&this.addPolyPoint(t,o)}removePoint(t){var e;this.points.splice(this.points.indexOf(t),1),null===(e=this.polyline)||void 0===e||e.removePolyPoint(t),this.emitPoints()}getPoints(){return this.points}setPoints(t){this.points.slice().forEach((t=>this.removePoint(t))),t.forEach((t=>this.addPoint(t)))}destroy(){var t,e;null===(t=this.polyline)||void 0===t||t.destroy(),null===(e=this.ac)||void 0===e||e.close(),super.destroy()}getCurrentVolume(){var t;return(null===(t=this.gain)||void 0===t?void 0:t.value)||0}setVolume(t){this.gain&&(this.gain.value=t)}onInit(){var t;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const{options:e}=this;e.volume=null!==(t=e.volume)&&void 0!==t?t:this.wavesurfer.getVolume(),this.initAudioContext(this.wavesurfer.getMediaElement()),this.subscriptions.push(this.wavesurfer.on("decode",(t=>{this.initPolyline(),this.points.forEach((e=>{this.addPolyPoint(e,t)}))})),this.wavesurfer.on("redraw",(()=>{var t;null===(t=this.polyline)||void 0===t||t.update()})),this.wavesurfer.on("timeupdate",(t=>{this.onTimeUpdate(t)})),this.wavesurfer.on("play",(()=>{var t;"suspended"===(null===(t=this.ac)||void 0===t?void 0:t.state)&&this.ac.resume()})))}initAudioContext(t){var e;const i=new AudioContext,o=i.createGain();o.gain.value=null!==(e=this.options.volume)&&void 0!==e?e:1,o.connect(i.destination);i.createMediaElementSource(t).connect(o),this.ac=i,this.gain=o.gain}emitPoints(){this.throttleTimeout&&clearTimeout(this.throttleTimeout),this.throttleTimeout=setTimeout((()=>{this.emit("points-change",this.points)}),200)}initPolyline(){if(this.polyline&&this.polyline.destroy(),!this.wavesurfer)return;const t=this.wavesurfer.getWrapper();this.polyline=new s(this.options,t),this.subscriptions.push(this.polyline.on("point-move",((t,e,i)=>{var o;const s=(null===(o=this.wavesurfer)||void 0===o?void 0:o.getDuration())||0;t.time=e*s,t.volume=1-i,this.emitPoints()})),this.polyline.on("point-dragout",(t=>{this.removePoint(t)})),this.polyline.on("point-create",((t,e)=>{var i;this.addPoint({time:t*((null===(i=this.wavesurfer)||void 0===i?void 0:i.getDuration())||0),volume:1-e})})),this.polyline.on("line-move",(t=>{var e;this.points.forEach((e=>{e.volume=Math.min(1,Math.max(0,e.volume-t))})),this.emitPoints(),this.onTimeUpdate((null===(e=this.wavesurfer)||void 0===e?void 0:e.getCurrentTime())||0)})))}addPolyPoint(t,e){var i;null===(i=this.polyline)||void 0===i||i.addPolyPoint(t.time/e,t.volume,t)}onTimeUpdate(t){if(!this.wavesurfer)return;let e=this.points.find((e=>e.time>t));e||(e={time:this.wavesurfer.getDuration()||0,volume:0});let i=this.points.findLast((e=>e.time<=t));i||(i={time:0,volume:0});const o=e.time-i.time,s=e.volume-i.volume,n=i.volume+(t-i.time)*(s/o),r=Math.min(1,Math.max(0,n)),l=Math.round(100*r)/100;l!==this.getCurrentVolume()&&(this.setVolume(l),this.emit("volume-change",n))}setStartTime(){console.warn("[wavesurfer.js envelope plugin] `setStartTime` is deprecated, use `setPoints` instead.")}setEndTime(){console.warn("[wavesurfer.js envelope plugin] `setEndTime` is deprecated, use `setPoints` instead.")}setFadeInEnd(){console.warn("[wavesurfer.js envelope plugin] `setFadeInEnd` is deprecated, use `setPoints` instead.")}setFadeOutStart(){console.warn("[wavesurfer.js envelope plugin] `setFadeOutStart` is deprecated, use `setPoints` instead.")}}export{n as default};
+class t{constructor(){this.listeners={}}on(t,e){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),o=this.on(t,(()=>{i(),o()}));return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,o,n=5){let s=()=>{};if(!t)return s;const r=r=>{if(2===r.button)return;r.preventDefault(),r.stopPropagation();let l=r.clientX,a=r.clientY,h=!1;const u=o=>{o.preventDefault(),o.stopPropagation();const s=o.clientX,r=o.clientY;if(h||Math.abs(s-l)>=n||Math.abs(r-a)>=n){const{left:o,top:n}=t.getBoundingClientRect();h||(h=!0,null==i||i(l-o,a-n)),e(s-l,r-a,s-o,r-n),l=s,a=r}},d=t=>{h&&(t.preventDefault(),t.stopPropagation())},c=()=>{h&&(null==o||o()),s()};document.addEventListener("pointermove",u),document.addEventListener("pointerup",c),document.addEventListener("pointerleave",c),document.addEventListener("click",d,!0),s=()=>{document.removeEventListener("pointermove",u),document.removeEventListener("pointerup",c),document.removeEventListener("pointerleave",c),setTimeout((()=>{document.removeEventListener("click",d,!0)}),10)}};return t.addEventListener("pointerdown",r),()=>{s(),t.removeEventListener("pointerdown",r)}}const o={points:[],lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class n extends t{constructor(t,e){super(),this.options=t,this.polyPoints=new Map;const o=e.clientWidth,n=e.clientHeight,s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("width","100%"),s.setAttribute("height","100%"),s.setAttribute("viewBox",`0 0 ${o} ${n}`),s.setAttribute("preserveAspectRatio","none"),s.setAttribute("style","position: absolute; left: 0; top: 0; z-index: 4;"),s.setAttribute("part","envelope"),this.svg=s;const r=document.createElementNS("http://www.w3.org/2000/svg","polyline");r.setAttribute("points",`0,${n} ${o},${n}`),r.setAttribute("stroke",t.lineColor),r.setAttribute("stroke-width",t.lineWidth),r.setAttribute("fill","none"),r.setAttribute("part","polyline"),r.setAttribute("style",t.dragLine?"cursor: row-resize; pointer-events: stroke;":""),s.appendChild(r),e.appendChild(s),t.dragLine&&i(r,((t,e)=>{const{height:i}=s.viewBox.baseVal,{points:o}=r;for(let t=1;t<o.numberOfItems-1;t++){const n=o.getItem(t);n.y=Math.min(i,Math.max(0,n.y+e))}const n=s.querySelectorAll("ellipse");Array.from(n).forEach((t=>{const o=Math.min(i,Math.max(0,Number(t.getAttribute("cy"))+e));t.setAttribute("cy",o.toString())})),this.emit("line-move",e/i)})),s.addEventListener("dblclick",(t=>{const e=s.getBoundingClientRect(),i=t.clientX-e.left,o=t.clientY-e.top;this.emit("point-create",i/e.width,o/e.height)}));{let t;const e=()=>clearTimeout(t);s.addEventListener("touchstart",(i=>{1===i.touches.length?t=window.setTimeout((()=>{i.preventDefault();const t=s.getBoundingClientRect(),e=i.touches[0].clientX-t.left,o=i.touches[0].clientY-t.top;this.emit("point-create",e/t.width,o/t.height)}),500):e()})),s.addEventListener("touchmove",e),s.addEventListener("touchend",e)}}makeDraggable(t,e){i(t,e,(()=>t.style.cursor="grabbing"),(()=>t.style.cursor="grab"))}createCircle(t,e){const i=document.createElementNS("http://www.w3.org/2000/svg","ellipse"),o=this.options.dragPointSize/2;return i.setAttribute("rx",o.toString()),i.setAttribute("ry",o.toString()),i.setAttribute("fill",this.options.dragPointFill),this.options.dragPointStroke&&(i.setAttribute("stroke",this.options.dragPointStroke),i.setAttribute("stroke-width","2")),i.setAttribute("style","cursor: grab; pointer-events: all;"),i.setAttribute("part","envelope-circle"),i.setAttribute("cx",t.toString()),i.setAttribute("cy",e.toString()),this.svg.appendChild(i),i}removePolyPoint(t){const e=this.polyPoints.get(t);if(!e)return;const{polyPoint:i,circle:o}=e,{points:n}=this.svg.querySelector("polyline"),s=Array.from(n).findIndex((t=>t.x===i.x&&t.y===i.y));n.removeItem(s),o.remove(),this.polyPoints.delete(t)}addPolyPoint(t,e,i){const{svg:o}=this,{width:n,height:s}=o.viewBox.baseVal,r=t*n,l=s-e*s,a=this.options.dragPointSize/2,h=o.createSVGPoint();h.x=t*n,h.y=s-e*s;const u=this.createCircle(r,l),{points:d}=o.querySelector("polyline"),c=Array.from(d).findIndex((t=>t.x>=r));d.insertItemBefore(h,Math.max(c,1)),this.polyPoints.set(i,{polyPoint:h,circle:u}),this.makeDraggable(u,((t,e)=>{const o=h.x+t,r=h.y+e;if(o<-a||r<-a||o>n+a||r>s+a)return void this.emit("point-dragout",i);const l=Array.from(d).find((t=>t.x>h.x)),c=Array.from(d).findLast((t=>t.x<h.x));l&&o>=l.x||c&&o<=c.x||(h.x=o,h.y=r,u.setAttribute("cx",o.toString()),u.setAttribute("cy",r.toString()),this.emit("point-move",i,o/n,r/s))}))}update(){const{svg:t}=this,e=t.viewBox.baseVal.width/t.clientWidth,i=t.viewBox.baseVal.height/t.clientHeight;t.querySelectorAll("ellipse").forEach((t=>{const o=this.options.dragPointSize/2,n=o*e,s=o*i;t.setAttribute("rx",n.toString()),t.setAttribute("ry",s.toString())}))}destroy(){this.polyPoints.clear(),this.svg.remove()}}class s extends e{constructor(t){super(t),this.polyline=null,this.throttleTimeout=null,this.ac=null,this.gain=null,this.points=t.points||[],this.options=Object.assign({},o,t),this.options.lineColor=this.options.lineColor||o.lineColor,this.options.dragPointFill=this.options.dragPointFill||o.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||o.dragPointStroke,this.options.dragPointSize=this.options.dragPointSize||o.dragPointSize}static create(t){return new s(t)}addPoint(t){var e;t.id||(t.id=Math.random().toString(36).slice(2));const i=this.points.findLastIndex((e=>e.time<t.time));this.points.splice(i+1,0,t),this.emitPoints();const o=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDuration();o&&this.addPolyPoint(t,o)}removePoint(t){var e;const i=this.points.indexOf(t);i>-1&&(this.points.splice(i,1),null===(e=this.polyline)||void 0===e||e.removePolyPoint(t),this.emitPoints())}getPoints(){return this.points}setPoints(t){this.points.slice().forEach((t=>this.removePoint(t))),t.forEach((t=>this.addPoint(t)))}destroy(){var t,e;null===(t=this.polyline)||void 0===t||t.destroy(),null===(e=this.ac)||void 0===e||e.close(),super.destroy()}getCurrentVolume(){var t;return(null===(t=this.gain)||void 0===t?void 0:t.value)||0}setVolume(t){this.gain&&(this.gain.value=t)}onInit(){var t;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const{options:e}=this;e.volume=null!==(t=e.volume)&&void 0!==t?t:this.wavesurfer.getVolume(),this.initAudioContext(this.wavesurfer.getMediaElement()),this.subscriptions.push(this.wavesurfer.on("decode",(t=>{this.initPolyline(),this.points.forEach((e=>{this.addPolyPoint(e,t)}))})),this.wavesurfer.on("redraw",(()=>{var t;null===(t=this.polyline)||void 0===t||t.update()})),this.wavesurfer.on("timeupdate",(t=>{this.onTimeUpdate(t)})),this.wavesurfer.on("play",(()=>{var t;"suspended"===(null===(t=this.ac)||void 0===t?void 0:t.state)&&this.ac.resume()})))}initAudioContext(t){var e;const i=new AudioContext,o=i.createGain();o.gain.value=null!==(e=this.options.volume)&&void 0!==e?e:1,o.connect(i.destination);i.createMediaElementSource(t).connect(o),this.ac=i,this.gain=o.gain}emitPoints(){this.throttleTimeout&&clearTimeout(this.throttleTimeout),this.throttleTimeout=setTimeout((()=>{this.emit("points-change",this.points)}),200)}initPolyline(){if(this.polyline&&this.polyline.destroy(),!this.wavesurfer)return;const t=this.wavesurfer.getWrapper();this.polyline=new n(this.options,t),this.subscriptions.push(this.polyline.on("point-move",((t,e,i)=>{var o;const n=(null===(o=this.wavesurfer)||void 0===o?void 0:o.getDuration())||0;t.time=e*n,t.volume=1-i,this.emitPoints()})),this.polyline.on("point-dragout",(t=>{this.removePoint(t)})),this.polyline.on("point-create",((t,e)=>{var i;this.addPoint({time:t*((null===(i=this.wavesurfer)||void 0===i?void 0:i.getDuration())||0),volume:1-e})})),this.polyline.on("line-move",(t=>{var e;this.points.forEach((e=>{e.volume=Math.min(1,Math.max(0,e.volume-t))})),this.emitPoints(),this.onTimeUpdate((null===(e=this.wavesurfer)||void 0===e?void 0:e.getCurrentTime())||0)})))}addPolyPoint(t,e){var i;null===(i=this.polyline)||void 0===i||i.addPolyPoint(t.time/e,t.volume,t)}onTimeUpdate(t){if(!this.wavesurfer)return;let e=this.points.find((e=>e.time>t));e||(e={time:this.wavesurfer.getDuration()||0,volume:0});let i=this.points.findLast((e=>e.time<=t));i||(i={time:0,volume:0});const o=e.time-i.time,n=e.volume-i.volume,s=i.volume+(t-i.time)*(n/o),r=Math.min(1,Math.max(0,s)),l=Math.round(100*r)/100;l!==this.getCurrentVolume()&&(this.setVolume(l),this.emit("volume-change",s))}}export{s as default};

package/dist/plugins/envelope.js

@@ -1 +1 @@
-class t{constructor(){this.listeners={}}on(t,e){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),o=this.on(t,(()=>{i(),o()}));return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,o,s=5){let n=()=>{};if(!t)return n;const r=r=>{if(2===r.button)return;r.preventDefault(),r.stopPropagation();let l=r.clientX,a=r.clientY,u=!1;const h=o=>{o.preventDefault(),o.stopPropagation();const n=o.clientX,r=o.clientY;if(u||Math.abs(n-l)>=s||Math.abs(r-a)>=s){const{left:o,top:s}=t.getBoundingClientRect();u||(u=!0,null==i||i(l-o,a-s)),e(n-l,r-a,n-o,r-s),l=n,a=r}},d=t=>{u&&(t.preventDefault(),t.stopPropagation())},p=()=>{u&&(null==o||o()),n()};document.addEventListener("pointermove",h),document.addEventListener("pointerup",p),document.addEventListener("pointerleave",p),document.addEventListener("click",d,!0),n=()=>{document.removeEventListener("pointermove",h),document.removeEventListener("pointerup",p),document.removeEventListener("pointerleave",p),setTimeout((()=>{document.removeEventListener("click",d,!0)}),10)}};return t.addEventListener("pointerdown",r),()=>{n(),t.removeEventListener("pointerdown",r)}}const o={points:[],lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointSizeMobile:30,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class s extends t{constructor(t,e){super(),this.options=t,this.polyPoints=new Map;const o=e.clientWidth,s=e.clientHeight,n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width","100%"),n.setAttribute("height","100%"),n.setAttribute("viewBox",`0 0 ${o} ${s}`),n.setAttribute("preserveAspectRatio","none"),n.setAttribute("style","position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;"),n.setAttribute("part","envelope"),this.svg=n;const r=document.createElementNS("http://www.w3.org/2000/svg","polyline");r.setAttribute("points",`0,${s} ${o},${s}`),r.setAttribute("stroke",t.lineColor),r.setAttribute("stroke-width",t.lineWidth),r.setAttribute("fill","none"),r.setAttribute("part","polyline"),r.setAttribute("style",t.dragLine?"cursor: row-resize; pointer-events: stroke;":""),n.appendChild(r),e.appendChild(n),t.dragLine&&i(r,((t,e)=>{const{height:i}=n.viewBox.baseVal,{points:o}=r;for(let t=1;t<o.numberOfItems-1;t++){const s=o.getItem(t);s.y=Math.min(i,Math.max(0,s.y+e))}const s=n.querySelectorAll("ellipse");Array.from(s).forEach((t=>{const o=Math.min(i,Math.max(0,Number(t.getAttribute("cy"))+e));t.setAttribute("cy",o.toString())})),this.emit("line-move",e/i)})),n.addEventListener("dblclick",(t=>{const e=n.getBoundingClientRect(),i=t.clientX-e.left,o=t.clientY-e.top;this.emit("point-create",i/e.width,o/e.height)}))}makeDraggable(t,e){i(t,e,(()=>t.style.cursor="grabbing"),(()=>t.style.cursor="grab"))}createCircle(t,e){var i;const o=document.createElementNS("http://www.w3.org/2000/svg","ellipse"),s=(Number(null===(i=window.top)||void 0===i?void 0:i.innerWidth)>900?this.options.dragPointSize:this.options.dragPointSizeMobile)/2;return o.setAttribute("rx",s.toString()),o.setAttribute("ry",s.toString()),o.setAttribute("fill",this.options.dragPointFill),this.options.dragPointStroke&&(o.setAttribute("stroke",this.options.dragPointStroke),o.setAttribute("stroke-width","2")),o.setAttribute("style","cursor: grab; pointer-events: all;"),o.setAttribute("part","envelope-circle"),o.setAttribute("cx",t.toString()),o.setAttribute("cy",e.toString()),this.svg.appendChild(o),o}removePolyPoint(t){const e=this.polyPoints.get(t);if(!e)return;const{polyPoint:i,circle:o}=e,{points:s}=this.svg.querySelector("polyline"),n=Array.from(s).findIndex((t=>t.x===i.x&&t.y===i.y));s.removeItem(n),o.remove(),this.polyPoints.delete(t)}addPolyPoint(t,e,i){const{svg:o}=this,{width:s,height:n}=o.viewBox.baseVal,r=t*s,l=n-e*n,a=this.options.dragPointSize/2,u=o.createSVGPoint();u.x=t*s,u.y=n-e*n;const h=this.createCircle(r,l),{points:d}=o.querySelector("polyline"),p=Array.from(d).findIndex((t=>t.x>=r));d.insertItemBefore(u,Math.max(p,1)),this.polyPoints.set(i,{polyPoint:u,circle:h}),this.makeDraggable(h,((t,e)=>{const o=u.x+t,r=u.y+e;if(o<-a||r<-a||o>s+a||r>n+a)return void this.emit("point-dragout",i);const l=Array.from(d).find((t=>t.x>u.x)),p=Array.from(d).findLast((t=>t.x<u.x));l&&o>=l.x||p&&o<=p.x||(u.x=o,u.y=r,h.setAttribute("cx",o.toString()),h.setAttribute("cy",r.toString()),this.emit("point-move",i,o/s,r/n))}))}update(){const{svg:t}=this,e=t.viewBox.baseVal.width/t.clientWidth,i=t.viewBox.baseVal.height/t.clientHeight;t.querySelectorAll("ellipse").forEach((t=>{const o=this.options.dragPointSize/2,s=o*e,n=o*i;t.setAttribute("rx",s.toString()),t.setAttribute("ry",n.toString())}))}destroy(){this.polyPoints.clear(),this.svg.remove()}}class n extends e{constructor(t){super(t),this.polyline=null,this.throttleTimeout=null,this.ac=null,this.gain=null,this.points=t.points||[],this.options=Object.assign({},o,t),this.options.lineColor=this.options.lineColor||o.lineColor,this.options.dragPointFill=this.options.dragPointFill||o.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||o.dragPointStroke}static create(t){return new n(t)}addPoint(t){var e;t.id||(t.id=Math.random().toString(36).slice(2));const i=this.points.findLastIndex((e=>e.time<t.time));this.points.splice(i+1,0,t),this.emitPoints();const o=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDuration();o&&this.addPolyPoint(t,o)}removePoint(t){var e;this.points.splice(this.points.indexOf(t),1),null===(e=this.polyline)||void 0===e||e.removePolyPoint(t),this.emitPoints()}getPoints(){return this.points}setPoints(t){this.points.slice().forEach((t=>this.removePoint(t))),t.forEach((t=>this.addPoint(t)))}destroy(){var t,e;null===(t=this.polyline)||void 0===t||t.destroy(),null===(e=this.ac)||void 0===e||e.close(),super.destroy()}getCurrentVolume(){var t;return(null===(t=this.gain)||void 0===t?void 0:t.value)||0}setVolume(t){this.gain&&(this.gain.value=t)}onInit(){var t;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const{options:e}=this;e.volume=null!==(t=e.volume)&&void 0!==t?t:this.wavesurfer.getVolume(),this.initAudioContext(this.wavesurfer.getMediaElement()),this.subscriptions.push(this.wavesurfer.on("decode",(t=>{this.initPolyline(),this.points.forEach((e=>{this.addPolyPoint(e,t)}))})),this.wavesurfer.on("redraw",(()=>{var t;null===(t=this.polyline)||void 0===t||t.update()})),this.wavesurfer.on("timeupdate",(t=>{this.onTimeUpdate(t)})),this.wavesurfer.on("play",(()=>{var t;"suspended"===(null===(t=this.ac)||void 0===t?void 0:t.state)&&this.ac.resume()})))}initAudioContext(t){var e;const i=new AudioContext,o=i.createGain();o.gain.value=null!==(e=this.options.volume)&&void 0!==e?e:1,o.connect(i.destination);i.createMediaElementSource(t).connect(o),this.ac=i,this.gain=o.gain}emitPoints(){this.throttleTimeout&&clearTimeout(this.throttleTimeout),this.throttleTimeout=setTimeout((()=>{this.emit("points-change",this.points)}),200)}initPolyline(){if(this.polyline&&this.polyline.destroy(),!this.wavesurfer)return;const t=this.wavesurfer.getWrapper();this.polyline=new s(this.options,t),this.subscriptions.push(this.polyline.on("point-move",((t,e,i)=>{var o;const s=(null===(o=this.wavesurfer)||void 0===o?void 0:o.getDuration())||0;t.time=e*s,t.volume=1-i,this.emitPoints()})),this.polyline.on("point-dragout",(t=>{this.removePoint(t)})),this.polyline.on("point-create",((t,e)=>{var i;this.addPoint({time:t*((null===(i=this.wavesurfer)||void 0===i?void 0:i.getDuration())||0),volume:1-e})})),this.polyline.on("line-move",(t=>{var e;this.points.forEach((e=>{e.volume=Math.min(1,Math.max(0,e.volume-t))})),this.emitPoints(),this.onTimeUpdate((null===(e=this.wavesurfer)||void 0===e?void 0:e.getCurrentTime())||0)})))}addPolyPoint(t,e){var i;null===(i=this.polyline)||void 0===i||i.addPolyPoint(t.time/e,t.volume,t)}onTimeUpdate(t){if(!this.wavesurfer)return;let e=this.points.find((e=>e.time>t));e||(e={time:this.wavesurfer.getDuration()||0,volume:0});let i=this.points.findLast((e=>e.time<=t));i||(i={time:0,volume:0});const o=e.time-i.time,s=e.volume-i.volume,n=i.volume+(t-i.time)*(s/o),r=Math.min(1,Math.max(0,n)),l=Math.round(100*r)/100;l!==this.getCurrentVolume()&&(this.setVolume(l),this.emit("volume-change",n))}setStartTime(){console.warn("[wavesurfer.js envelope plugin] `setStartTime` is deprecated, use `setPoints` instead.")}setEndTime(){console.warn("[wavesurfer.js envelope plugin] `setEndTime` is deprecated, use `setPoints` instead.")}setFadeInEnd(){console.warn("[wavesurfer.js envelope plugin] `setFadeInEnd` is deprecated, use `setPoints` instead.")}setFadeOutStart(){console.warn("[wavesurfer.js envelope plugin] `setFadeOutStart` is deprecated, use `setPoints` instead.")}}export{n as default};
+class t{constructor(){this.listeners={}}on(t,e){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),o=this.on(t,(()=>{i(),o()}));return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,o,n=5){let s=()=>{};if(!t)return s;const r=r=>{if(2===r.button)return;r.preventDefault(),r.stopPropagation();let l=r.clientX,a=r.clientY,h=!1;const u=o=>{o.preventDefault(),o.stopPropagation();const s=o.clientX,r=o.clientY;if(h||Math.abs(s-l)>=n||Math.abs(r-a)>=n){const{left:o,top:n}=t.getBoundingClientRect();h||(h=!0,null==i||i(l-o,a-n)),e(s-l,r-a,s-o,r-n),l=s,a=r}},d=t=>{h&&(t.preventDefault(),t.stopPropagation())},c=()=>{h&&(null==o||o()),s()};document.addEventListener("pointermove",u),document.addEventListener("pointerup",c),document.addEventListener("pointerleave",c),document.addEventListener("click",d,!0),s=()=>{document.removeEventListener("pointermove",u),document.removeEventListener("pointerup",c),document.removeEventListener("pointerleave",c),setTimeout((()=>{document.removeEventListener("click",d,!0)}),10)}};return t.addEventListener("pointerdown",r),()=>{s(),t.removeEventListener("pointerdown",r)}}const o={points:[],lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class n extends t{constructor(t,e){super(),this.options=t,this.polyPoints=new Map;const o=e.clientWidth,n=e.clientHeight,s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("width","100%"),s.setAttribute("height","100%"),s.setAttribute("viewBox",`0 0 ${o} ${n}`),s.setAttribute("preserveAspectRatio","none"),s.setAttribute("style","position: absolute; left: 0; top: 0; z-index: 4;"),s.setAttribute("part","envelope"),this.svg=s;const r=document.createElementNS("http://www.w3.org/2000/svg","polyline");r.setAttribute("points",`0,${n} ${o},${n}`),r.setAttribute("stroke",t.lineColor),r.setAttribute("stroke-width",t.lineWidth),r.setAttribute("fill","none"),r.setAttribute("part","polyline"),r.setAttribute("style",t.dragLine?"cursor: row-resize; pointer-events: stroke;":""),s.appendChild(r),e.appendChild(s),t.dragLine&&i(r,((t,e)=>{const{height:i}=s.viewBox.baseVal,{points:o}=r;for(let t=1;t<o.numberOfItems-1;t++){const n=o.getItem(t);n.y=Math.min(i,Math.max(0,n.y+e))}const n=s.querySelectorAll("ellipse");Array.from(n).forEach((t=>{const o=Math.min(i,Math.max(0,Number(t.getAttribute("cy"))+e));t.setAttribute("cy",o.toString())})),this.emit("line-move",e/i)})),s.addEventListener("dblclick",(t=>{const e=s.getBoundingClientRect(),i=t.clientX-e.left,o=t.clientY-e.top;this.emit("point-create",i/e.width,o/e.height)}));{let t;const e=()=>clearTimeout(t);s.addEventListener("touchstart",(i=>{1===i.touches.length?t=window.setTimeout((()=>{i.preventDefault();const t=s.getBoundingClientRect(),e=i.touches[0].clientX-t.left,o=i.touches[0].clientY-t.top;this.emit("point-create",e/t.width,o/t.height)}),500):e()})),s.addEventListener("touchmove",e),s.addEventListener("touchend",e)}}makeDraggable(t,e){i(t,e,(()=>t.style.cursor="grabbing"),(()=>t.style.cursor="grab"))}createCircle(t,e){const i=document.createElementNS("http://www.w3.org/2000/svg","ellipse"),o=this.options.dragPointSize/2;return i.setAttribute("rx",o.toString()),i.setAttribute("ry",o.toString()),i.setAttribute("fill",this.options.dragPointFill),this.options.dragPointStroke&&(i.setAttribute("stroke",this.options.dragPointStroke),i.setAttribute("stroke-width","2")),i.setAttribute("style","cursor: grab; pointer-events: all;"),i.setAttribute("part","envelope-circle"),i.setAttribute("cx",t.toString()),i.setAttribute("cy",e.toString()),this.svg.appendChild(i),i}removePolyPoint(t){const e=this.polyPoints.get(t);if(!e)return;const{polyPoint:i,circle:o}=e,{points:n}=this.svg.querySelector("polyline"),s=Array.from(n).findIndex((t=>t.x===i.x&&t.y===i.y));n.removeItem(s),o.remove(),this.polyPoints.delete(t)}addPolyPoint(t,e,i){const{svg:o}=this,{width:n,height:s}=o.viewBox.baseVal,r=t*n,l=s-e*s,a=this.options.dragPointSize/2,h=o.createSVGPoint();h.x=t*n,h.y=s-e*s;const u=this.createCircle(r,l),{points:d}=o.querySelector("polyline"),c=Array.from(d).findIndex((t=>t.x>=r));d.insertItemBefore(h,Math.max(c,1)),this.polyPoints.set(i,{polyPoint:h,circle:u}),this.makeDraggable(u,((t,e)=>{const o=h.x+t,r=h.y+e;if(o<-a||r<-a||o>n+a||r>s+a)return void this.emit("point-dragout",i);const l=Array.from(d).find((t=>t.x>h.x)),c=Array.from(d).findLast((t=>t.x<h.x));l&&o>=l.x||c&&o<=c.x||(h.x=o,h.y=r,u.setAttribute("cx",o.toString()),u.setAttribute("cy",r.toString()),this.emit("point-move",i,o/n,r/s))}))}update(){const{svg:t}=this,e=t.viewBox.baseVal.width/t.clientWidth,i=t.viewBox.baseVal.height/t.clientHeight;t.querySelectorAll("ellipse").forEach((t=>{const o=this.options.dragPointSize/2,n=o*e,s=o*i;t.setAttribute("rx",n.toString()),t.setAttribute("ry",s.toString())}))}destroy(){this.polyPoints.clear(),this.svg.remove()}}class s extends e{constructor(t){super(t),this.polyline=null,this.throttleTimeout=null,this.ac=null,this.gain=null,this.points=t.points||[],this.options=Object.assign({},o,t),this.options.lineColor=this.options.lineColor||o.lineColor,this.options.dragPointFill=this.options.dragPointFill||o.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||o.dragPointStroke,this.options.dragPointSize=this.options.dragPointSize||o.dragPointSize}static create(t){return new s(t)}addPoint(t){var e;t.id||(t.id=Math.random().toString(36).slice(2));const i=this.points.findLastIndex((e=>e.time<t.time));this.points.splice(i+1,0,t),this.emitPoints();const o=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDuration();o&&this.addPolyPoint(t,o)}removePoint(t){var e;const i=this.points.indexOf(t);i>-1&&(this.points.splice(i,1),null===(e=this.polyline)||void 0===e||e.removePolyPoint(t),this.emitPoints())}getPoints(){return this.points}setPoints(t){this.points.slice().forEach((t=>this.removePoint(t))),t.forEach((t=>this.addPoint(t)))}destroy(){var t,e;null===(t=this.polyline)||void 0===t||t.destroy(),null===(e=this.ac)||void 0===e||e.close(),super.destroy()}getCurrentVolume(){var t;return(null===(t=this.gain)||void 0===t?void 0:t.value)||0}setVolume(t){this.gain&&(this.gain.value=t)}onInit(){var t;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const{options:e}=this;e.volume=null!==(t=e.volume)&&void 0!==t?t:this.wavesurfer.getVolume(),this.initAudioContext(this.wavesurfer.getMediaElement()),this.subscriptions.push(this.wavesurfer.on("decode",(t=>{this.initPolyline(),this.points.forEach((e=>{this.addPolyPoint(e,t)}))})),this.wavesurfer.on("redraw",(()=>{var t;null===(t=this.polyline)||void 0===t||t.update()})),this.wavesurfer.on("timeupdate",(t=>{this.onTimeUpdate(t)})),this.wavesurfer.on("play",(()=>{var t;"suspended"===(null===(t=this.ac)||void 0===t?void 0:t.state)&&this.ac.resume()})))}initAudioContext(t){var e;const i=new AudioContext,o=i.createGain();o.gain.value=null!==(e=this.options.volume)&&void 0!==e?e:1,o.connect(i.destination);i.createMediaElementSource(t).connect(o),this.ac=i,this.gain=o.gain}emitPoints(){this.throttleTimeout&&clearTimeout(this.throttleTimeout),this.throttleTimeout=setTimeout((()=>{this.emit("points-change",this.points)}),200)}initPolyline(){if(this.polyline&&this.polyline.destroy(),!this.wavesurfer)return;const t=this.wavesurfer.getWrapper();this.polyline=new n(this.options,t),this.subscriptions.push(this.polyline.on("point-move",((t,e,i)=>{var o;const n=(null===(o=this.wavesurfer)||void 0===o?void 0:o.getDuration())||0;t.time=e*n,t.volume=1-i,this.emitPoints()})),this.polyline.on("point-dragout",(t=>{this.removePoint(t)})),this.polyline.on("point-create",((t,e)=>{var i;this.addPoint({time:t*((null===(i=this.wavesurfer)||void 0===i?void 0:i.getDuration())||0),volume:1-e})})),this.polyline.on("line-move",(t=>{var e;this.points.forEach((e=>{e.volume=Math.min(1,Math.max(0,e.volume-t))})),this.emitPoints(),this.onTimeUpdate((null===(e=this.wavesurfer)||void 0===e?void 0:e.getCurrentTime())||0)})))}addPolyPoint(t,e){var i;null===(i=this.polyline)||void 0===i||i.addPolyPoint(t.time/e,t.volume,t)}onTimeUpdate(t){if(!this.wavesurfer)return;let e=this.points.find((e=>e.time>t));e||(e={time:this.wavesurfer.getDuration()||0,volume:0});let i=this.points.findLast((e=>e.time<=t));i||(i={time:0,volume:0});const o=e.time-i.time,n=e.volume-i.volume,s=i.volume+(t-i.time)*(n/o),r=Math.min(1,Math.max(0,s)),l=Math.round(100*r)/100;l!==this.getCurrentVolume()&&(this.setVolume(l),this.emit("volume-change",s))}}export{s as default};

package/dist/plugins/envelope.min.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t="undefined"!=typeof globalThis?globalThis:t||self).WaveSurfer=t.WaveSurfer||{},t.WaveSurfer.Envelope=e())}(this,(function(){"use strict";class t{constructor(){this.listeners={}}on(t,e){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),o=this.on(t,(()=>{i(),o()}));return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,o,s=5){let n=()=>{};if(!t)return n;const r=r=>{if(2===r.button)return;r.preventDefault(),r.stopPropagation();let l=r.clientX,a=r.clientY,u=!1;const h=o=>{o.preventDefault(),o.stopPropagation();const n=o.clientX,r=o.clientY;if(u||Math.abs(n-l)>=s||Math.abs(r-a)>=s){const{left:o,top:s}=t.getBoundingClientRect();u||(u=!0,null==i||i(l-o,a-s)),e(n-l,r-a,n-o,r-s),l=n,a=r}},d=t=>{u&&(t.preventDefault(),t.stopPropagation())},p=()=>{u&&(null==o||o()),n()};document.addEventListener("pointermove",h),document.addEventListener("pointerup",p),document.addEventListener("pointerleave",p),document.addEventListener("click",d,!0),n=()=>{document.removeEventListener("pointermove",h),document.removeEventListener("pointerup",p),document.removeEventListener("pointerleave",p),setTimeout((()=>{document.removeEventListener("click",d,!0)}),10)}};return t.addEventListener("pointerdown",r),()=>{n(),t.removeEventListener("pointerdown",r)}}const o={points:[],lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointSizeMobile:30,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class s extends t{constructor(t,e){super(),this.options=t,this.polyPoints=new Map;const o=e.clientWidth,s=e.clientHeight,n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width","100%"),n.setAttribute("height","100%"),n.setAttribute("viewBox",`0 0 ${o} ${s}`),n.setAttribute("preserveAspectRatio","none"),n.setAttribute("style","position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;"),n.setAttribute("part","envelope"),this.svg=n;const r=document.createElementNS("http://www.w3.org/2000/svg","polyline");r.setAttribute("points",`0,${s} ${o},${s}`),r.setAttribute("stroke",t.lineColor),r.setAttribute("stroke-width",t.lineWidth),r.setAttribute("fill","none"),r.setAttribute("part","polyline"),r.setAttribute("style",t.dragLine?"cursor: row-resize; pointer-events: stroke;":""),n.appendChild(r),e.appendChild(n),t.dragLine&&i(r,((t,e)=>{const{height:i}=n.viewBox.baseVal,{points:o}=r;for(let t=1;t<o.numberOfItems-1;t++){const s=o.getItem(t);s.y=Math.min(i,Math.max(0,s.y+e))}const s=n.querySelectorAll("ellipse");Array.from(s).forEach((t=>{const o=Math.min(i,Math.max(0,Number(t.getAttribute("cy"))+e));t.setAttribute("cy",o.toString())})),this.emit("line-move",e/i)})),n.addEventListener("dblclick",(t=>{const e=n.getBoundingClientRect(),i=t.clientX-e.left,o=t.clientY-e.top;this.emit("point-create",i/e.width,o/e.height)}))}makeDraggable(t,e){i(t,e,(()=>t.style.cursor="grabbing"),(()=>t.style.cursor="grab"))}createCircle(t,e){var i;const o=document.createElementNS("http://www.w3.org/2000/svg","ellipse"),s=(Number(null===(i=window.top)||void 0===i?void 0:i.innerWidth)>900?this.options.dragPointSize:this.options.dragPointSizeMobile)/2;return o.setAttribute("rx",s.toString()),o.setAttribute("ry",s.toString()),o.setAttribute("fill",this.options.dragPointFill),this.options.dragPointStroke&&(o.setAttribute("stroke",this.options.dragPointStroke),o.setAttribute("stroke-width","2")),o.setAttribute("style","cursor: grab; pointer-events: all;"),o.setAttribute("part","envelope-circle"),o.setAttribute("cx",t.toString()),o.setAttribute("cy",e.toString()),this.svg.appendChild(o),o}removePolyPoint(t){const e=this.polyPoints.get(t);if(!e)return;const{polyPoint:i,circle:o}=e,{points:s}=this.svg.querySelector("polyline"),n=Array.from(s).findIndex((t=>t.x===i.x&&t.y===i.y));s.removeItem(n),o.remove(),this.polyPoints.delete(t)}addPolyPoint(t,e,i){const{svg:o}=this,{width:s,height:n}=o.viewBox.baseVal,r=t*s,l=n-e*n,a=this.options.dragPointSize/2,u=o.createSVGPoint();u.x=t*s,u.y=n-e*n;const h=this.createCircle(r,l),{points:d}=o.querySelector("polyline"),p=Array.from(d).findIndex((t=>t.x>=r));d.insertItemBefore(u,Math.max(p,1)),this.polyPoints.set(i,{polyPoint:u,circle:h}),this.makeDraggable(h,((t,e)=>{const o=u.x+t,r=u.y+e;if(o<-a||r<-a||o>s+a||r>n+a)return void this.emit("point-dragout",i);const l=Array.from(d).find((t=>t.x>u.x)),p=Array.from(d).findLast((t=>t.x<u.x));l&&o>=l.x||p&&o<=p.x||(u.x=o,u.y=r,h.setAttribute("cx",o.toString()),h.setAttribute("cy",r.toString()),this.emit("point-move",i,o/s,r/n))}))}update(){const{svg:t}=this,e=t.viewBox.baseVal.width/t.clientWidth,i=t.viewBox.baseVal.height/t.clientHeight;t.querySelectorAll("ellipse").forEach((t=>{const o=this.options.dragPointSize/2,s=o*e,n=o*i;t.setAttribute("rx",s.toString()),t.setAttribute("ry",n.toString())}))}destroy(){this.polyPoints.clear(),this.svg.remove()}}class n extends e{constructor(t){super(t),this.polyline=null,this.throttleTimeout=null,this.ac=null,this.gain=null,this.points=t.points||[],this.options=Object.assign({},o,t),this.options.lineColor=this.options.lineColor||o.lineColor,this.options.dragPointFill=this.options.dragPointFill||o.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||o.dragPointStroke}static create(t){return new n(t)}addPoint(t){var e;t.id||(t.id=Math.random().toString(36).slice(2));const i=this.points.findLastIndex((e=>e.time<t.time));this.points.splice(i+1,0,t),this.emitPoints();const o=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDuration();o&&this.addPolyPoint(t,o)}removePoint(t){var e;this.points.splice(this.points.indexOf(t),1),null===(e=this.polyline)||void 0===e||e.removePolyPoint(t),this.emitPoints()}getPoints(){return this.points}setPoints(t){this.points.slice().forEach((t=>this.removePoint(t))),t.forEach((t=>this.addPoint(t)))}destroy(){var t,e;null===(t=this.polyline)||void 0===t||t.destroy(),null===(e=this.ac)||void 0===e||e.close(),super.destroy()}getCurrentVolume(){var t;return(null===(t=this.gain)||void 0===t?void 0:t.value)||0}setVolume(t){this.gain&&(this.gain.value=t)}onInit(){var t;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const{options:e}=this;e.volume=null!==(t=e.volume)&&void 0!==t?t:this.wavesurfer.getVolume(),this.initAudioContext(this.wavesurfer.getMediaElement()),this.subscriptions.push(this.wavesurfer.on("decode",(t=>{this.initPolyline(),this.points.forEach((e=>{this.addPolyPoint(e,t)}))})),this.wavesurfer.on("redraw",(()=>{var t;null===(t=this.polyline)||void 0===t||t.update()})),this.wavesurfer.on("timeupdate",(t=>{this.onTimeUpdate(t)})),this.wavesurfer.on("play",(()=>{var t;"suspended"===(null===(t=this.ac)||void 0===t?void 0:t.state)&&this.ac.resume()})))}initAudioContext(t){var e;const i=new AudioContext,o=i.createGain();o.gain.value=null!==(e=this.options.volume)&&void 0!==e?e:1,o.connect(i.destination);i.createMediaElementSource(t).connect(o),this.ac=i,this.gain=o.gain}emitPoints(){this.throttleTimeout&&clearTimeout(this.throttleTimeout),this.throttleTimeout=setTimeout((()=>{this.emit("points-change",this.points)}),200)}initPolyline(){if(this.polyline&&this.polyline.destroy(),!this.wavesurfer)return;const t=this.wavesurfer.getWrapper();this.polyline=new s(this.options,t),this.subscriptions.push(this.polyline.on("point-move",((t,e,i)=>{var o;const s=(null===(o=this.wavesurfer)||void 0===o?void 0:o.getDuration())||0;t.time=e*s,t.volume=1-i,this.emitPoints()})),this.polyline.on("point-dragout",(t=>{this.removePoint(t)})),this.polyline.on("point-create",((t,e)=>{var i;this.addPoint({time:t*((null===(i=this.wavesurfer)||void 0===i?void 0:i.getDuration())||0),volume:1-e})})),this.polyline.on("line-move",(t=>{var e;this.points.forEach((e=>{e.volume=Math.min(1,Math.max(0,e.volume-t))})),this.emitPoints(),this.onTimeUpdate((null===(e=this.wavesurfer)||void 0===e?void 0:e.getCurrentTime())||0)})))}addPolyPoint(t,e){var i;null===(i=this.polyline)||void 0===i||i.addPolyPoint(t.time/e,t.volume,t)}onTimeUpdate(t){if(!this.wavesurfer)return;let e=this.points.find((e=>e.time>t));e||(e={time:this.wavesurfer.getDuration()||0,volume:0});let i=this.points.findLast((e=>e.time<=t));i||(i={time:0,volume:0});const o=e.time-i.time,s=e.volume-i.volume,n=i.volume+(t-i.time)*(s/o),r=Math.min(1,Math.max(0,n)),l=Math.round(100*r)/100;l!==this.getCurrentVolume()&&(this.setVolume(l),this.emit("volume-change",n))}setStartTime(){console.warn("[wavesurfer.js envelope plugin] `setStartTime` is deprecated, use `setPoints` instead.")}setEndTime(){console.warn("[wavesurfer.js envelope plugin] `setEndTime` is deprecated, use `setPoints` instead.")}setFadeInEnd(){console.warn("[wavesurfer.js envelope plugin] `setFadeInEnd` is deprecated, use `setPoints` instead.")}setFadeOutStart(){console.warn("[wavesurfer.js envelope plugin] `setFadeOutStart` is deprecated, use `setPoints` instead.")}}return n}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t="undefined"!=typeof globalThis?globalThis:t||self).WaveSurfer=t.WaveSurfer||{},t.WaveSurfer.Envelope=e())}(this,(function(){"use strict";class t{constructor(){this.listeners={}}on(t,e){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),o=this.on(t,(()=>{i(),o()}));return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,o,n=5){let s=()=>{};if(!t)return s;const r=r=>{if(2===r.button)return;r.preventDefault(),r.stopPropagation();let l=r.clientX,a=r.clientY,h=!1;const u=o=>{o.preventDefault(),o.stopPropagation();const s=o.clientX,r=o.clientY;if(h||Math.abs(s-l)>=n||Math.abs(r-a)>=n){const{left:o,top:n}=t.getBoundingClientRect();h||(h=!0,null==i||i(l-o,a-n)),e(s-l,r-a,s-o,r-n),l=s,a=r}},d=t=>{h&&(t.preventDefault(),t.stopPropagation())},c=()=>{h&&(null==o||o()),s()};document.addEventListener("pointermove",u),document.addEventListener("pointerup",c),document.addEventListener("pointerleave",c),document.addEventListener("click",d,!0),s=()=>{document.removeEventListener("pointermove",u),document.removeEventListener("pointerup",c),document.removeEventListener("pointerleave",c),setTimeout((()=>{document.removeEventListener("click",d,!0)}),10)}};return t.addEventListener("pointerdown",r),()=>{s(),t.removeEventListener("pointerdown",r)}}const o={points:[],lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class n extends t{constructor(t,e){super(),this.options=t,this.polyPoints=new Map;const o=e.clientWidth,n=e.clientHeight,s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("width","100%"),s.setAttribute("height","100%"),s.setAttribute("viewBox",`0 0 ${o} ${n}`),s.setAttribute("preserveAspectRatio","none"),s.setAttribute("style","position: absolute; left: 0; top: 0; z-index: 4;"),s.setAttribute("part","envelope"),this.svg=s;const r=document.createElementNS("http://www.w3.org/2000/svg","polyline");r.setAttribute("points",`0,${n} ${o},${n}`),r.setAttribute("stroke",t.lineColor),r.setAttribute("stroke-width",t.lineWidth),r.setAttribute("fill","none"),r.setAttribute("part","polyline"),r.setAttribute("style",t.dragLine?"cursor: row-resize; pointer-events: stroke;":""),s.appendChild(r),e.appendChild(s),t.dragLine&&i(r,((t,e)=>{const{height:i}=s.viewBox.baseVal,{points:o}=r;for(let t=1;t<o.numberOfItems-1;t++){const n=o.getItem(t);n.y=Math.min(i,Math.max(0,n.y+e))}const n=s.querySelectorAll("ellipse");Array.from(n).forEach((t=>{const o=Math.min(i,Math.max(0,Number(t.getAttribute("cy"))+e));t.setAttribute("cy",o.toString())})),this.emit("line-move",e/i)})),s.addEventListener("dblclick",(t=>{const e=s.getBoundingClientRect(),i=t.clientX-e.left,o=t.clientY-e.top;this.emit("point-create",i/e.width,o/e.height)}));{let t;const e=()=>clearTimeout(t);s.addEventListener("touchstart",(i=>{1===i.touches.length?t=window.setTimeout((()=>{i.preventDefault();const t=s.getBoundingClientRect(),e=i.touches[0].clientX-t.left,o=i.touches[0].clientY-t.top;this.emit("point-create",e/t.width,o/t.height)}),500):e()})),s.addEventListener("touchmove",e),s.addEventListener("touchend",e)}}makeDraggable(t,e){i(t,e,(()=>t.style.cursor="grabbing"),(()=>t.style.cursor="grab"))}createCircle(t,e){const i=document.createElementNS("http://www.w3.org/2000/svg","ellipse"),o=this.options.dragPointSize/2;return i.setAttribute("rx",o.toString()),i.setAttribute("ry",o.toString()),i.setAttribute("fill",this.options.dragPointFill),this.options.dragPointStroke&&(i.setAttribute("stroke",this.options.dragPointStroke),i.setAttribute("stroke-width","2")),i.setAttribute("style","cursor: grab; pointer-events: all;"),i.setAttribute("part","envelope-circle"),i.setAttribute("cx",t.toString()),i.setAttribute("cy",e.toString()),this.svg.appendChild(i),i}removePolyPoint(t){const e=this.polyPoints.get(t);if(!e)return;const{polyPoint:i,circle:o}=e,{points:n}=this.svg.querySelector("polyline"),s=Array.from(n).findIndex((t=>t.x===i.x&&t.y===i.y));n.removeItem(s),o.remove(),this.polyPoints.delete(t)}addPolyPoint(t,e,i){const{svg:o}=this,{width:n,height:s}=o.viewBox.baseVal,r=t*n,l=s-e*s,a=this.options.dragPointSize/2,h=o.createSVGPoint();h.x=t*n,h.y=s-e*s;const u=this.createCircle(r,l),{points:d}=o.querySelector("polyline"),c=Array.from(d).findIndex((t=>t.x>=r));d.insertItemBefore(h,Math.max(c,1)),this.polyPoints.set(i,{polyPoint:h,circle:u}),this.makeDraggable(u,((t,e)=>{const o=h.x+t,r=h.y+e;if(o<-a||r<-a||o>n+a||r>s+a)return void this.emit("point-dragout",i);const l=Array.from(d).find((t=>t.x>h.x)),c=Array.from(d).findLast((t=>t.x<h.x));l&&o>=l.x||c&&o<=c.x||(h.x=o,h.y=r,u.setAttribute("cx",o.toString()),u.setAttribute("cy",r.toString()),this.emit("point-move",i,o/n,r/s))}))}update(){const{svg:t}=this,e=t.viewBox.baseVal.width/t.clientWidth,i=t.viewBox.baseVal.height/t.clientHeight;t.querySelectorAll("ellipse").forEach((t=>{const o=this.options.dragPointSize/2,n=o*e,s=o*i;t.setAttribute("rx",n.toString()),t.setAttribute("ry",s.toString())}))}destroy(){this.polyPoints.clear(),this.svg.remove()}}class s extends e{constructor(t){super(t),this.polyline=null,this.throttleTimeout=null,this.ac=null,this.gain=null,this.points=t.points||[],this.options=Object.assign({},o,t),this.options.lineColor=this.options.lineColor||o.lineColor,this.options.dragPointFill=this.options.dragPointFill||o.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||o.dragPointStroke,this.options.dragPointSize=this.options.dragPointSize||o.dragPointSize}static create(t){return new s(t)}addPoint(t){var e;t.id||(t.id=Math.random().toString(36).slice(2));const i=this.points.findLastIndex((e=>e.time<t.time));this.points.splice(i+1,0,t),this.emitPoints();const o=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDuration();o&&this.addPolyPoint(t,o)}removePoint(t){var e;const i=this.points.indexOf(t);i>-1&&(this.points.splice(i,1),null===(e=this.polyline)||void 0===e||e.removePolyPoint(t),this.emitPoints())}getPoints(){return this.points}setPoints(t){this.points.slice().forEach((t=>this.removePoint(t))),t.forEach((t=>this.addPoint(t)))}destroy(){var t,e;null===(t=this.polyline)||void 0===t||t.destroy(),null===(e=this.ac)||void 0===e||e.close(),super.destroy()}getCurrentVolume(){var t;return(null===(t=this.gain)||void 0===t?void 0:t.value)||0}setVolume(t){this.gain&&(this.gain.value=t)}onInit(){var t;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const{options:e}=this;e.volume=null!==(t=e.volume)&&void 0!==t?t:this.wavesurfer.getVolume(),this.initAudioContext(this.wavesurfer.getMediaElement()),this.subscriptions.push(this.wavesurfer.on("decode",(t=>{this.initPolyline(),this.points.forEach((e=>{this.addPolyPoint(e,t)}))})),this.wavesurfer.on("redraw",(()=>{var t;null===(t=this.polyline)||void 0===t||t.update()})),this.wavesurfer.on("timeupdate",(t=>{this.onTimeUpdate(t)})),this.wavesurfer.on("play",(()=>{var t;"suspended"===(null===(t=this.ac)||void 0===t?void 0:t.state)&&this.ac.resume()})))}initAudioContext(t){var e;const i=new AudioContext,o=i.createGain();o.gain.value=null!==(e=this.options.volume)&&void 0!==e?e:1,o.connect(i.destination);i.createMediaElementSource(t).connect(o),this.ac=i,this.gain=o.gain}emitPoints(){this.throttleTimeout&&clearTimeout(this.throttleTimeout),this.throttleTimeout=setTimeout((()=>{this.emit("points-change",this.points)}),200)}initPolyline(){if(this.polyline&&this.polyline.destroy(),!this.wavesurfer)return;const t=this.wavesurfer.getWrapper();this.polyline=new n(this.options,t),this.subscriptions.push(this.polyline.on("point-move",((t,e,i)=>{var o;const n=(null===(o=this.wavesurfer)||void 0===o?void 0:o.getDuration())||0;t.time=e*n,t.volume=1-i,this.emitPoints()})),this.polyline.on("point-dragout",(t=>{this.removePoint(t)})),this.polyline.on("point-create",((t,e)=>{var i;this.addPoint({time:t*((null===(i=this.wavesurfer)||void 0===i?void 0:i.getDuration())||0),volume:1-e})})),this.polyline.on("line-move",(t=>{var e;this.points.forEach((e=>{e.volume=Math.min(1,Math.max(0,e.volume-t))})),this.emitPoints(),this.onTimeUpdate((null===(e=this.wavesurfer)||void 0===e?void 0:e.getCurrentTime())||0)})))}addPolyPoint(t,e){var i;null===(i=this.polyline)||void 0===i||i.addPolyPoint(t.time/e,t.volume,t)}onTimeUpdate(t){if(!this.wavesurfer)return;let e=this.points.find((e=>e.time>t));e||(e={time:this.wavesurfer.getDuration()||0,volume:0});let i=this.points.findLast((e=>e.time<=t));i||(i={time:0,volume:0});const o=e.time-i.time,n=e.volume-i.volume,s=i.volume+(t-i.time)*(n/o),r=Math.min(1,Math.max(0,s)),l=Math.round(100*r)/100;l!==this.getCurrentVolume()&&(this.setVolume(l),this.emit("volume-change",s))}}return s}));

package/dist/plugins/plugins/envelope.d.ts

@@ -14,24 +14,14 @@ export type EnvelopePluginOptions = {
     lineColor?: string;
     dragLine?: boolean;
     dragPointSize?: number;
-    dragPointSizeMobile?: number;
     dragPointFill?: string;
     dragPointStroke?: string;
-    /** Deprecated. Use `points` instead. */
-    fadeInStart?: number;
-    /** Deprecated. Use `points` instead. */
-    fadeInEnd?: number;
-    /** Deprecated. Use `points` instead. */
-    fadeOutStart?: number;
-    /** Deprecated. Use `points` instead. */
-    fadeOutEnd?: number;
 };
 declare const defaultOptions: {
     points: EnvelopePoint[];
     lineWidth: number;
     lineColor: string;
     dragPointSize: number;
-    dragPointSizeMobile: number;
     dragPointFill: string;
     dragPointStroke: string;
 };
@@ -87,21 +77,5 @@ declare class EnvelopePlugin extends BasePlugin<EnvelopePluginEvents, EnvelopePl
     private initPolyline;
     private addPolyPoint;
     private onTimeUpdate;
-    /**
-     * Deprecated: use `setPoints` instead.
-     */
-    setStartTime(): void;
-    /**
-     * Deprecated: use `setPoints` instead.
-     */
-    setEndTime(): void;
-    /**
-     * Deprecated: use `setPoints` instead.
-     */
-    setFadeInEnd(): void;
-    /**
-     * Deprecated: use `setPoints` instead.
-     */
-    setFadeOutStart(): void;
 }
 export default EnvelopePlugin;

package/package.json

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