wavesurfer.js/dist/plugins/zoom.min.js

Audio waveform player

!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):((t="undefined"!=typeof globalThis?globalThis:t||self).WaveSurfer=t.WaveSurfer||{},t.WaveSurfer.Zoom=i())}(this,(function(){"use strict";class t{constructor(){this.listeners={}}on(t,i,s){if(this.listeners[t]||(this.listeners[t]=new Set),null==s?void 0:s.once){const s=(...e)=>{this.un(t,s),i(...e)};return this.listeners[t].add(s),()=>this.un(t,s)}return this.listeners[t].add(i),()=>this.un(t,i)}un(t,i){var s;null===(s=this.listeners[t])||void 0===s||s.delete(i)}once(t,i){return this.on(t,i,{once:!0})}unAll(){this.listeners={}}emit(t,...i){this.listeners[t]&&this.listeners[t].forEach((t=>t(...i)))}}class i extends t{constructor(t){super(),this.subscriptions=[],this.isDestroyed=!1,this.options=t}onInit(){}_init(t){this.isDestroyed&&(this.subscriptions=[],this.isDestroyed=!1),this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.subscriptions=[],this.isDestroyed=!0,this.wavesurfer=void 0}}function s(t,i){let s;const e=()=>{s&&(s(),s=void 0),s=t()},o=i.map((t=>t.subscribe(e)));return e(),()=>{s&&(s(),s=void 0),o.forEach((t=>t()))}}function e(t,i){const s=function(t){let i=t;const s=new Set;return{get value(){return i},set(t){Object.is(i,t)||(i=t,s.forEach((t=>t(i))))},update(t){this.set(t(i))},subscribe:t=>(s.add(t),()=>s.delete(t))}}(null),e=t=>{s.set(t)};return t.addEventListener(i,e),s._cleanup=()=>{t.removeEventListener(i,e)},s}const o={scale:.5,deltaThreshold:5,exponentialZooming:!1,iterations:20};class n extends i{constructor(t){super(t||{}),this.wrapper=void 0,this.container=null,this.accumulatedDelta=0,this.pointerTime=0,this.oldX=0,this.endZoom=0,this.startZoom=0,this.isPinching=!1,this.initialPinchDistance=0,this.initialZoom=0,this.onWheel=t=>{if(this.wavesurfer&&this.container&&!(Math.abs(t.deltaX)>=Math.abs(t.deltaY))&&(t.preventDefault(),this.accumulatedDelta+=-t.deltaY,0===this.startZoom&&this.options.exponentialZooming&&(this.startZoom=this.wavesurfer.getWrapper().clientWidth/this.wavesurfer.getDuration()),0===this.options.deltaThreshold||Math.abs(this.accumulatedDelta)>=this.options.deltaThreshold)){const i=this.wavesurfer.getDuration(),s=0===this.wavesurfer.options.minPxPerSec?this.wavesurfer.getWrapper().scrollWidth/i:this.wavesurfer.options.minPxPerSec,e=t.clientX-this.container.getBoundingClientRect().left,o=this.container.clientWidth,n=this.wavesurfer.getScroll();e===this.oldX&&0!==this.oldX||(this.pointerTime=(n+e)/s),this.oldX=e;const h=this.calculateNewZoom(s,this.accumulatedDelta),r=o/h*(e/o);h*i<o?(this.wavesurfer.zoom(o/i),this.container.scrollLeft=0):(this.wavesurfer.zoom(h),this.container.scrollLeft=(this.pointerTime-r)*h),this.accumulatedDelta=0}},this.calculateNewZoom=(t,i)=>{let s;if(this.options.exponentialZooming){const e=i>0?Math.pow(this.endZoom/this.startZoom,1/(this.options.iterations-1)):Math.pow(this.startZoom/this.endZoom,1/(this.options.iterations-1));s=Math.max(0,t*e)}else s=Math.max(0,t+i*this.options.scale);return Math.min(s,this.options.maxZoom)},this.onTouchStart=t=>{if(this.wavesurfer&&this.container&&2===t.touches.length){t.preventDefault(),this.isPinching=!0,this.initialPinchDistance=this.getTouchDistance(t);const i=this.wavesurfer.getDuration();this.initialZoom=0===this.wavesurfer.options.minPxPerSec?this.wavesurfer.getWrapper().scrollWidth/i:this.wavesurfer.options.minPxPerSec;const s=this.getTouchCenterX(t)-this.container.getBoundingClientRect().left,e=this.wavesurfer.getScroll();this.pointerTime=(e+s)/this.initialZoom,this.oldX=s}},this.onTouchMove=t=>{if(!this.isPinching||2!==t.touches.length||!this.wavesurfer||!this.container)return;t.preventDefault();const i=this.getTouchDistance(t)/this.initialPinchDistance;let s=this.initialZoom*i;s=Math.min(s,this.options.maxZoom);const e=this.wavesurfer.getDuration(),o=this.container.clientWidth,n=o/e;s<n&&(s=n);const h=o/s*(this.oldX/o);s===n?(this.wavesurfer.zoom(n),this.container.scrollLeft=0):(this.wavesurfer.zoom(s),this.container.scrollLeft=(this.pointerTime-h)*s)},this.onTouchEnd=t=>{this.isPinching&&t.touches.length<2&&(this.isPinching=!1,this.initialPinchDistance=0,this.initialZoom=0)},this.options=Object.assign({},o,t)}static create(t){return new n(t)}onInit(){var t,i;if(this.wrapper=null===(t=this.wavesurfer)||void 0===t?void 0:t.getWrapper(),!this.wrapper)return;this.container=this.wrapper.parentElement,void 0===this.options.maxZoom&&(this.options.maxZoom=this.container.clientWidth),this.endZoom=this.options.maxZoom;const o=null===(i=this.wavesurfer)||void 0===i?void 0:i.getState();o&&this.subscriptions.push(s((()=>{if(o.zoom.value>0&&0===this.startZoom&&this.options.exponentialZooming){const t=o.duration.value;t>0&&this.container&&(this.startZoom=this.container.clientWidth/t)}}),[o.zoom,o.duration]));const n=e(this.container,"wheel"),h=e(this.container,"touchstart"),r=e(this.container,"touchmove"),a=e(this.container,"touchend"),c=e(this.container,"touchcancel");this.subscriptions.push(s((()=>{const t=n.value;t&&this.onWheel(t)}),[n])),this.subscriptions.push(s((()=>{const t=h.value;t&&this.onTouchStart(t)}),[h])),this.subscriptions.push(s((()=>{const t=r.value;t&&this.onTouchMove(t)}),[r])),this.subscriptions.push(s((()=>{const t=a.value;t&&this.onTouchEnd(t)}),[a])),this.subscriptions.push(s((()=>{const t=c.value;t&&this.onTouchEnd(t)}),[c]))}getTouchDistance(t){const i=t.touches[0],s=t.touches[1];return Math.sqrt(Math.pow(s.clientX-i.clientX,2)+Math.pow(s.clientY-i.clientY,2))}getTouchCenterX(t){const i=t.touches[0],s=t.touches[1];return(i.clientX+s.clientX)/2}destroy(){super.destroy()}}return n}));