wavesurfer.js 7.0.0-alpha.8 → 7.0.0-beta.1

package/dist/index.js

@@ -1,227 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import Fetcher from './fetcher.js';
-import Decoder from './decoder.js';
-import Renderer from './renderer.js';
-import Player from './player.js';
-import EventEmitter from './event-emitter.js';
-import Timer from './timer.js';
-const defaultOptions = {
-    height: 128,
-    waveColor: '#999',
-    progressColor: '#555',
-    minPxPerSec: 0,
-    fillParent: true,
-    interactive: true,
-};
-export class WaveSurfer extends EventEmitter {
-    /** Create a new WaveSurfer instance */
-    static create(options) {
-        return new WaveSurfer(options);
-    }
-    /** Create a new WaveSurfer instance */
-    constructor(options) {
-        var _a;
-        super();
-        this.plugins = [];
-        this.subscriptions = [];
-        this.decodedData = null;
-        this.options = Object.assign({}, defaultOptions, options);
-        this.fetcher = new Fetcher();
-        this.decoder = new Decoder();
-        this.timer = new Timer();
-        this.player = new Player({
-            media: this.options.media,
-            autoplay: this.options.autoplay,
-        });
-        this.renderer = new Renderer({
-            container: this.options.container,
-            height: this.options.height,
-            waveColor: this.options.waveColor,
-            progressColor: this.options.progressColor,
-            cursorColor: this.options.cursorColor,
-            minPxPerSec: this.options.minPxPerSec,
-            fillParent: this.options.fillParent,
-            barWidth: this.options.barWidth,
-            barGap: this.options.barGap,
-            barRadius: this.options.barRadius,
-        });
-        this.initPlayerEvents();
-        this.initRendererEvents();
-        this.initTimerEvents();
-        this.initReadyEvent();
-        const url = this.options.url || ((_a = this.options.media) === null || _a === void 0 ? void 0 : _a.src);
-        if (url) {
-            this.load(url, this.options.peaks, this.options.duration);
-        }
-    }
-    initPlayerEvents() {
-        this.subscriptions.push(this.player.on('timeupdate', () => {
-            const currentTime = this.getCurrentTime();
-            this.renderer.renderProgress(currentTime / this.getDuration(), this.isPlaying());
-            this.emit('timeupdate', { currentTime });
-        }), this.player.on('play', () => {
-            this.emit('play');
-            this.timer.start();
-        }), this.player.on('pause', () => {
-            this.emit('pause');
-            this.timer.stop();
-        }), this.player.on('canplay', () => {
-            this.emit('canplay', { duration: this.getDuration() });
-        }), this.player.on('seeking', () => {
-            this.emit('seeking', { currentTime: this.getCurrentTime() });
-        }));
-    }
-    initRendererEvents() {
-        // Seek on click
-        this.subscriptions.push(this.renderer.on('click', ({ relativeX }) => {
-            if (this.options.interactive) {
-                const time = this.getDuration() * relativeX;
-                this.seekTo(time);
-                this.emit('seekClick', { currentTime: this.getCurrentTime() });
-            }
-        }));
-    }
-    initTimerEvents() {
-        // The timer fires every 16ms for a smooth progress animation
-        this.subscriptions.push(this.timer.on('tick', () => {
-            const currentTime = this.getCurrentTime();
-            this.renderer.renderProgress(currentTime / this.getDuration(), true);
-            this.emit('timeupdate', { currentTime });
-        }));
-    }
-    initReadyEvent() {
-        let isDecoded = false;
-        let isPlayable = false;
-        const emitReady = () => {
-            if (isDecoded && isPlayable) {
-                this.emit('ready', { duration: this.getDuration() });
-            }
-        };
-        this.subscriptions.push(this.on('decode', () => {
-            isDecoded = true;
-            emitReady();
-        }), this.on('canplay', () => {
-            isPlayable = true;
-            emitReady();
-        }), this.player.on('waiting', () => {
-            isPlayable = false;
-            isDecoded = false;
-        }));
-    }
-    /** Load an audio file by URL, with optional pre-decoded audio data */
-    load(url, channelData, duration) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.player.loadUrl(url);
-            // Fetch and decode the audio of no pre-computed audio data is provided
-            if (channelData == null) {
-                const audio = yield this.fetcher.load(url);
-                const data = yield this.decoder.decode(audio);
-                this.decodedData = data;
-            }
-            else {
-                if (!duration) {
-                    duration =
-                        (yield new Promise((resolve) => {
-                            this.player.on('canplay', () => resolve(this.getDuration()), { once: true });
-                        })) || 0;
-                }
-                this.decodedData = {
-                    duration,
-                    numberOfChannels: channelData.length,
-                    sampleRate: channelData[0].length / duration,
-                    getChannelData: (i) => channelData[i],
-                };
-            }
-            this.renderer.render(this.decodedData);
-            this.emit('decode', { duration: this.decodedData.duration });
-        });
-    }
-    /** Zoom in or out */
-    zoom(minPxPerSec) {
-        if (!this.decodedData) {
-            throw new Error('No audio loaded');
-        }
-        this.renderer.zoom(this.decodedData, minPxPerSec);
-    }
-    /** Start playing the audio */
-    play() {
-        this.player.play();
-    }
-    /** Pause the audio */
-    pause() {
-        this.player.pause();
-    }
-    /** Skip to a time position in seconds */
-    seekTo(time) {
-        this.player.seekTo(time);
-    }
-    /** Check if the audio is playing */
-    isPlaying() {
-        return this.player.isPlaying();
-    }
-    /** Get the duration of the audio in seconds */
-    getDuration() {
-        var _a;
-        return this.player.getDuration() || ((_a = this.decodedData) === null || _a === void 0 ? void 0 : _a.duration) || 0;
-    }
-    /** Get the current audio position in seconds */
-    getCurrentTime() {
-        return this.player.getCurrentTime();
-    }
-    /** Get the audio volume */
-    getVolume() {
-        return this.player.getVolume();
-    }
-    /** Set the audio volume */
-    setVolume(volume) {
-        this.player.setVolume(volume);
-    }
-    /** Get the audio muted state */
-    getMuted() {
-        return this.player.getMuted();
-    }
-    /** Mute or unmute the audio */
-    setMuted(muted) {
-        this.player.setMuted(muted);
-    }
-    /** Get playback rate */
-    getPlaybackRate() {
-        return this.player.getPlaybackRate();
-    }
-    /** Set playback rate, with an optional parameter to NOT preserve the pitch if false */
-    setPlaybackRate(rate, preservePitch) {
-        this.player.setPlaybackRate(rate, preservePitch);
-    }
-    /** Register and initialize a plugin */
-    registerPlugin(CustomPlugin, options) {
-        const plugin = new CustomPlugin({
-            wavesurfer: this,
-            container: this.renderer.getContainer(),
-        }, options);
-        this.plugins.push(plugin);
-        return plugin;
-    }
-    /** Get the decoded audio data */
-    getDecodedData() {
-        return this.decodedData;
-    }
-    /** Unmount wavesurfer */
-    destroy() {
-        this.emit('destroy');
-        this.subscriptions.forEach((unsubscribe) => unsubscribe());
-        this.plugins.forEach((plugin) => plugin.destroy());
-        this.timer.destroy();
-        this.player.destroy();
-        this.decoder.destroy();
-        this.renderer.destroy();
-    }
-}
-export default WaveSurfer;

package/dist/player-webaudio.d.ts

@@ -1,8 +0,0 @@
-import Player from './player.js';
-declare class WebAudioPlayer extends Player {
-    audioCtx: AudioContext | null;
-    sourceNode: MediaElementAudioSourceNode | null;
-    destroy(): void;
-    loadUrl(url: string): void;
-}
-export default WebAudioPlayer;

package/dist/player-webaudio.js

@@ -1,32 +0,0 @@
-import Player from './player.js';
-class WebAudioPlayer extends Player {
-    constructor() {
-        super(...arguments);
-        this.audioCtx = null;
-        this.sourceNode = null;
-    }
-    destroy() {
-        var _a, _b;
-        (_a = this.sourceNode) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.sourceNode = null;
-        (_b = this.audioCtx) === null || _b === void 0 ? void 0 : _b.close();
-        this.audioCtx = null;
-        super.destroy();
-    }
-    loadUrl(url) {
-        super.loadUrl(url);
-        if (!this.audioCtx) {
-            this.audioCtx = new AudioContext({
-                latencyHint: 'playback',
-            });
-        }
-        if (this.sourceNode) {
-            this.sourceNode.disconnect();
-        }
-        if (this.media) {
-            this.sourceNode = this.audioCtx.createMediaElementSource(this.media);
-            this.sourceNode.connect(this.audioCtx.destination);
-        }
-    }
-}
-export default WebAudioPlayer;

package/dist/react/useWavesurfer.d.ts

@@ -1,5 +0,0 @@
-import WaveSurfer, { type WaveSurferOptions } from '../index.js';
-export declare const useWavesurfer: (containerRef: {
-    current: HTMLElement;
-}, options: WaveSurferOptions) => WaveSurfer | null;
-export default useWavesurfer;

package/dist/react/useWavesurfer.js

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import WaveSurfer from '../index.js';
-const { useEffect, useState } = React;
-// A React hook to use WaveSurfer
-export const useWavesurfer = (containerRef, options) => {
-    const [wavesurfer, setWavesurfer] = useState(null);
-    // Initialize wavesurfer when the container mounts
-    // or any of the props change
-    useEffect(() => {
-        if (!containerRef.current)
-            return;
-        const ws = WaveSurfer.create(Object.assign(Object.assign({}, options), { container: containerRef.current }));
-        setWavesurfer(ws);
-        return () => {
-            ws.destroy();
-        };
-    }, [options, containerRef]);
-    return wavesurfer;
-};
-export default useWavesurfer;

package/dist/wavesurfer.Regions.min.js

@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Regions=t():e.Regions=t()}(WaveSurfer,(()=>(()=>{"use strict";var e={d:(t,i)=>{for(var n in i)e.o(i,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:i[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>a});const i=class{constructor(){this.eventTarget=new EventTarget}emit(e,t){const i=new CustomEvent(String(e),{detail:t});this.eventTarget.dispatchEvent(i)}on(e,t,i){const n=e=>{e instanceof CustomEvent&&t(e.detail)},s=String(e);return this.eventTarget.addEventListener(s,n,{once:i}),()=>this.eventTarget.removeEventListener(s,n)}once(e,t){return this.on(e,t,!0)}},n=class extends i{constructor(e,t){super(),this.subscriptions=[],this.wavesurfer=e.wavesurfer,this.container=e.container,this.options=t}destroy(){this.subscriptions.forEach((e=>e()))}},s={dragSelection:!0,draggable:!0,resizable:!0},o=(e,t)=>{for(const i in t)e.style[i]=t[i]||""},r=(e,t)=>{const i=document.createElement(e);return o(i,t),i},a=class extends n{constructor(e,t){super(e,t),this.dragStart=NaN,this.regions=[],this.createdRegion=null,this.modifiedRegion=null,this.isResizingLeft=!1,this.isMoving=!1,this.handleMouseDown=e=>{(this.options.draggable||this.options.resizable||this.options.dragSelection)&&(this.dragStart=e.clientX-this.container.getBoundingClientRect().left)},this.handleMouseMove=e=>{const t=e.clientX-this.container.getBoundingClientRect().left;if(this.modifiedRegion&&this.isMoving)return this.moveRegion(this.modifiedRegion,t-this.dragStart),void(this.dragStart=t);if(this.modifiedRegion)this.updateRegion(this.modifiedRegion,this.isResizingLeft?t:void 0,this.isResizingLeft?void 0:t);else if(!isNaN(this.dragStart)){const t=e.clientX-this.wrapper.getBoundingClientRect().left;t-this.dragStart>=10&&(this.createdRegion?this.updateRegion(this.createdRegion,this.dragStart,t):(this.container.style.pointerEvents="none",this.createdRegion=this.createRegion(this.dragStart,t)))}},this.handleMouseUp=()=>{this.createdRegion&&(this.addRegion(this.createdRegion),this.createdRegion=null),this.modifiedRegion=null,this.isMoving=!1,this.dragStart=NaN,this.container.style.pointerEvents=""},this.options=Object.assign(Object.assign({},s),t),this.wrapper=this.initWrapper();const i=this.wavesurfer.once("decode",(()=>{this.container.appendChild(this.wrapper)}));this.subscriptions.push(i),this.container.addEventListener("mousedown",this.handleMouseDown),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp)}destroy(){this.container.removeEventListener("mousedown",this.handleMouseDown),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp,!0),this.wrapper.remove(),super.destroy()}initWrapper(){return r("div",{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",zIndex:"3",pointerEvents:"none"})}createRegionElement(e,t,i=""){const n=e===t,s=r("div",{position:"absolute",left:`${e}px`,width:t-e+"px",height:"100%",backgroundColor:n?"":"rgba(0, 0, 0, 0.1)",borderRadius:"2px",boxSizing:"border-box",borderLeft:"2px solid rgba(0, 0, 0, 0.5)",borderRight:n?"":"2px solid rgba(0, 0, 0, 0.5)",transition:"background-color 0.2s ease",cursor:this.options.draggable?"move":"",pointerEvents:"all",padding:"0.2em"});s.textContent=i;const a=r("div",{position:"absolute",left:"0",width:"6px",height:"100%",cursor:this.options.resizable?"ew-resize":"",pointerEvents:"all"});s.appendChild(a);const d=a.cloneNode();return o(d,{left:"",right:"0",borderLeft:""}),s.appendChild(d),a.addEventListener("mousedown",(e=>{this.options.resizable&&(e.stopPropagation(),this.modifiedRegion=this.regions.find((e=>e.element===s))||null,this.isResizingLeft=!0,this.isMoving=!1)})),d.addEventListener("mousedown",(e=>{this.options.resizable&&(e.stopPropagation(),this.modifiedRegion=this.regions.find((e=>e.element===s))||null,this.isResizingLeft=!1,this.isMoving=!1)})),s.addEventListener("mousedown",(()=>{this.options.draggable&&(this.modifiedRegion=this.regions.find((e=>e.element===s))||null,this.isMoving=!0)})),s.addEventListener("click",(()=>{const e=this.regions.find((e=>e.element===s));e&&this.emit("region-clicked",{region:e})})),this.wrapper.appendChild(s),s}createRegion(e,t,i=""){const n=this.wavesurfer.getDuration(),s=this.wrapper.clientWidth;return e=Math.max(0,Math.min(e,s-1)),t=Math.max(0,Math.min(t,s-1)),{element:this.createRegionElement(e,t,i),start:e,end:t,startTime:e/s*n,endTime:t/s*n,title:i}}addRegion(e){this.regions.push(e),this.emit("region-created",{region:e})}updateRegion(e,t,i){const n=this.wrapper.clientWidth;null!=t&&(t=Math.max(0,Math.min(t,n)),e.start=t,e.element.style.left=`${e.start}px`,e.startTime=t/this.wrapper.clientWidth*this.wavesurfer.getDuration()),null!=i&&(i=Math.max(0,Math.min(i,n)),e.end=i,e.element.style.width=e.end-e.start+"px",e.endTime=i/this.wrapper.clientWidth*this.wavesurfer.getDuration()),this.emit("region-updated",{region:e})}moveRegion(e,t){this.updateRegion(e,e.start+t,e.end+t)}add(e,t,i=""){const n=this.wavesurfer.getDuration(),s=this.wrapper.clientWidth,o=e/n*s,r=t/n*s,a=this.createRegion(o,r,i);return this.addRegion(a),a}setRegionColor(e,t){e.element.style[e.startTime===e.endTime?"borderColor":"backgroundColor"]=t}};return t.default})()));

package/dist/wavesurfer.Timeline.min.js

@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Timeline=t():e.Timeline=t()}(WaveSurfer,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var i in n)e.o(n,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:n[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>o});const n=class{constructor(){this.eventTarget=new EventTarget}emit(e,t){const n=new CustomEvent(String(e),{detail:t});this.eventTarget.dispatchEvent(n)}on(e,t,n){const i=e=>{e instanceof CustomEvent&&t(e.detail)},r=String(e);return this.eventTarget.addEventListener(r,i,{once:n}),()=>this.eventTarget.removeEventListener(r,i)}once(e,t){return this.on(e,t,!0)}},i=class extends n{constructor(e,t){super(),this.subscriptions=[],this.wavesurfer=e.wavesurfer,this.container=e.container,this.options=t}destroy(){this.subscriptions.forEach((e=>e()))}},r={height:20},o=class extends i{constructor(e,t){super(e,t),this.options=Object.assign({},r,t),this.wrapper=this.initWrapper(),this.container.appendChild(this.wrapper),this.subscriptions.push(this.wavesurfer.on("decode",(({duration:e})=>{this.initTimeline(e)})))}destroy(){this.wrapper.remove(),super.destroy()}initWrapper(){return document.createElement("div")}formatTime(e){return e/60>1?`${Math.round(e/60)}:${(e=Math.round(e%60))<10?"0":""}${e}`:""+Math.round(1e3*e)/1e3}defaultTimeInterval(e){return e>=25?1:5*e>=25?5:15*e>=25?15:60*Math.ceil(.5/e)}defaultPrimaryLabelInterval(e){return e>=25?10:5*e>=25?6:4}defaultSecondaryLabelInterval(e){return e>=25?5:2}initTimeline(e){var t,n,i;const r=Math.round(this.wrapper.scrollWidth*devicePixelRatio)/e,o=null!==(t=this.options.timeInterval)&&void 0!==t?t:this.defaultTimeInterval(r),s=null!==(n=this.options.primaryLabelInterval)&&void 0!==n?n:this.defaultPrimaryLabelInterval(r),a=null!==(i=this.options.secondaryLabelInterval)&&void 0!==i?i:this.defaultSecondaryLabelInterval(r),l=document.createElement("div");l.setAttribute("style",`\n      height: ${this.options.height}px;\n      overflow: hidden;\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-end;\n      font-size: ${this.options.height/2}px;\n    `);const d=document.createElement("div");d.setAttribute("style","\n      width: 1px;\n      height: 50%;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-end;\n      overflow: visible;\n      border-left: 1px solid currentColor;\n      opacity: 0.25;\n    ");for(let t=0;t<e;t+=o){const e=d.cloneNode(),n=t%s==0;(n||t%a==0)&&(e.style.height="100%",e.style.textIndent="3px",e.textContent=this.formatTime(t),n&&(e.style.opacity="1")),l.appendChild(e)}this.wrapper.appendChild(l),this.emit("ready")}};return t.default})()));