wavesurfer.js 7.0.0-alpha.0 → 7.0.0-alpha.2

package/dist/renderer.js

@@ -1,193 +0,0 @@
-import EventEmitter from './event-emitter.js';
-class Renderer extends EventEmitter {
-    constructor(options) {
-        super();
-        this.options = options;
-        let container = null;
-        if (typeof this.options.container === 'string') {
-            container = document.querySelector(this.options.container);
-        }
-        else if (this.options.container instanceof HTMLElement) {
-            container = this.options.container;
-        }
-        if (!container) {
-            throw new Error('Container not found');
-        }
-        const div = document.createElement('div');
-        const shadow = div.attachShadow({ mode: 'open' });
-        shadow.innerHTML = `
-      <style>
-        :host .scroll {
-          overflow-x: auto;
-          overflow-y: visible;
-          user-select: none;
-          width: 100%;
-          height: ${this.options.height}px;
-          position: relative;
-        }
-        :host .wrapper {
-          position: relative;
-          width: fit-content;
-          min-width: 100%;
-          height: 100%;
-          z-index: 2;
-        }
-        :host canvas {
-          display: block;
-          height: 100%;
-          min-width: 100%;
-          image-rendering: pixelated;
-        }
-        :host .progress {
-          position: absolute;
-          z-index: 2;
-          top: 0;
-          left: 0;
-          height: 100%;
-          pointer-events: none;
-          clip-path: inset(100%);
-        }
-        :host .cursor {
-          position: absolute;
-          z-index: 3;
-          top: 0;
-          left: 0;
-          height: 100%;
-          border-right: 1px solid ${this.options.progressColor};
-        }
-      </style>
-
-      <div class="scroll">
-        <div class="wrapper">
-          <canvas></canvas>
-          <canvas class="progress"></canvas>
-          <div class="cursor"></div>
-        </div>
-      </div>
-    `;
-        this.container = div;
-        this.shadowRoot = shadow;
-        this.mainCanvas = shadow.querySelector('canvas');
-        this.ctx = this.mainCanvas.getContext('2d', { desynchronized: true });
-        this.progressCanvas = shadow.querySelector('.progress');
-        this.cursor = shadow.querySelector('.cursor');
-        container.appendChild(div);
-        this.mainCanvas.addEventListener('click', (e) => {
-            const rect = this.mainCanvas.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const relativeX = x / rect.width;
-            this.emit('click', { relativeX });
-        });
-    }
-    destroy() {
-        this.container.remove();
-    }
-    renderLinePeaks(channelData, width, height) {
-        const { ctx } = this;
-        ctx.clearRect(0, 0, width, height);
-        ctx.beginPath();
-        ctx.moveTo(0, height / 2);
-        // Channel 0 is left, 1 is right
-        const leftChannel = channelData[0];
-        const isMono = channelData.length === 1;
-        const rightChannel = isMono ? leftChannel : channelData[1];
-        // Draw left channel in the top half of the canvas
-        let prevX = -1;
-        let prevY = 0;
-        for (let i = 0, len = leftChannel.length; i < len; i++) {
-            const x = Math.round((i / leftChannel.length) * width);
-            const y = Math.round(((1 - leftChannel[i]) * height) / 2);
-            if (x !== prevX || y > prevY) {
-                ctx.lineTo(x, y);
-                prevX = x;
-                prevY = y;
-            }
-        }
-        // Draw right channel in the bottom half of the canvas
-        prevX = -1;
-        prevY = 0;
-        for (let i = rightChannel.length - 1; i >= 0; i--) {
-            const x = Math.round((i / rightChannel.length) * width);
-            const y = Math.round(((1 + rightChannel[i]) * height) / 2);
-            if (x !== prevX || (isMono ? y < -prevY : y > prevY)) {
-                ctx.lineTo(x, y);
-                prevX = x;
-                prevY = y;
-            }
-        }
-        ctx.strokeStyle = ctx.fillStyle = this.options.waveColor;
-        ctx.stroke();
-        ctx.fill();
-    }
-    renderBarPeaks(channelData, width, height) {
-        var _a, _b;
-        const { devicePixelRatio } = window;
-        const { ctx } = this;
-        ctx.clearRect(0, 0, width, height);
-        const barWidthOption = this.options.barWidth || 1;
-        const barWidth = barWidthOption * devicePixelRatio;
-        const barGap = ((_a = this.options.barGap) !== null && _a !== void 0 ? _a : barWidthOption / 2) * devicePixelRatio;
-        const barRadius = (_b = this.options.barRadius) !== null && _b !== void 0 ? _b : 0;
-        const leftChannel = channelData[0];
-        const isMono = channelData.length === 1;
-        const rightChannel = isMono ? leftChannel : channelData[1];
-        const barCount = Math.floor(width / (barWidth + barGap));
-        const leftChannelBars = new Float32Array(barCount);
-        const rightChannelBars = new Float32Array(barCount);
-        const barIndexScale = barCount / leftChannel.length;
-        const leftChannelLength = leftChannel.length;
-        for (let i = 0; i < leftChannelLength; i++) {
-            const barIndex = Math.round(i * barIndexScale);
-            leftChannelBars[barIndex] = Math.max(leftChannelBars[barIndex], leftChannel[i]);
-            rightChannelBars[barIndex] = (isMono ? Math.min : Math.max)(rightChannelBars[barIndex], rightChannel[i]);
-        }
-        ctx.beginPath();
-        for (let i = 0; i < barCount; i++) {
-            const leftBarHeight = Math.max(1, Math.round((leftChannelBars[i] * height) / 2));
-            const rightBarHeight = Math.max(1, Math.round(Math.abs(rightChannelBars[i] * height) / 2));
-            ctx.roundRect(i * (barWidth + barGap), height / 2 - leftBarHeight, barWidth, leftBarHeight + rightBarHeight, barRadius);
-        }
-        ctx.fillStyle = this.options.waveColor;
-        ctx.fill();
-    }
-    render(channelData, duration, minPxPerSec = this.options.minPxPerSec) {
-        const { devicePixelRatio } = window;
-        const width = Math.max(this.container.clientWidth * devicePixelRatio, duration * minPxPerSec);
-        const { height } = this.options;
-        this.mainCanvas.width = width;
-        this.mainCanvas.height = height;
-        this.mainCanvas.style.width = Math.round(width / devicePixelRatio) + 'px';
-        const renderingFn = this.options.barWidth ? this.renderBarPeaks : this.renderLinePeaks;
-        renderingFn.call(this, channelData, width, height);
-        this.createProgressMask();
-    }
-    createProgressMask() {
-        const progressCtx = this.progressCanvas.getContext('2d', { desynchronized: true });
-        if (!progressCtx) {
-            throw new Error('Failed to get canvas context');
-        }
-        this.progressCanvas.width = this.mainCanvas.width;
-        this.progressCanvas.height = this.mainCanvas.height;
-        this.progressCanvas.style.width = this.mainCanvas.style.width;
-        this.progressCanvas.style.height = this.mainCanvas.style.height;
-        progressCtx.drawImage(this.mainCanvas, 0, 0);
-        progressCtx.globalCompositeOperation = 'source-in';
-        progressCtx.fillStyle = this.options.progressColor;
-        progressCtx.fillRect(0, 0, this.progressCanvas.width, this.progressCanvas.height);
-    }
-    renderProgress(progress, autoCenter = false) {
-        this.progressCanvas.style.clipPath = `inset(0 ${100 - progress * 100}% 0 0)`;
-        this.cursor.style.left = `${progress * 100}%`;
-        if (autoCenter) {
-            const center = this.container.clientWidth / 2;
-            const fullWidth = this.mainCanvas.clientWidth;
-            if (fullWidth * progress >= center) {
-                this.container.scrollLeft = fullWidth * progress - center;
-            }
-        }
-    }
-    getContainer() {
-        return this.shadowRoot.querySelector('.scroll');
-    }
-}
-export default Renderer;

package/dist/timer.js

@@ -1,17 +0,0 @@
-import EventEmitter from './event-emitter.js';
-class Timer extends EventEmitter {
-    constructor() {
-        super();
-        this.unsubscribe = () => undefined;
-        this.unsubscribe = this.on('tick', () => {
-            requestAnimationFrame(() => {
-                this.emit('tick');
-            });
-        });
-        this.emit('tick');
-    }
-    destroy() {
-        this.unsubscribe();
-    }
-}
-export default Timer;

package/examples/bars.js

@@ -1,19 +0,0 @@
-import WaveSurfer from '/dist/index.js'
-
-const wavesurfer = WaveSurfer.create({
-  container: document.body,
-  waveColor: 'rgb(200, 0, 200)',
-  progressColor: 'rgb(100, 0, 100)',
-  url: 'https://wavesurfer-js.org/example/media/demo.wav',
-
-  // Set a bar width
-  barWidth: 2,
-  // Optionally, specify the spacing between bars
-  barGap: 1,
-  // And the bar radius
-  barRadius: 2,
-})
-
-wavesurfer.on('seek', function () {
-  wavesurfer.play()
-})

package/examples/basic.js

@@ -1,8 +0,0 @@
-import WaveSurfer from '/dist/index.js'
-
-const wavesurfer = WaveSurfer.create({
-  container: document.body,
-  waveColor: 'rgb(200, 0, 200)',
-  progressColor: 'rgb(100, 0, 100)',
-  url: 'https://wavesurfer-js.org/example/media/demo.wav'
-})

package/examples/gradient.js

@@ -1,28 +0,0 @@
-import WaveSurfer from '/dist/index.js'
-
-// Create a canvas gradient
-const ctx = document.createElement('canvas').getContext('2d')
-const gradient = ctx.createLinearGradient(0, 0, 0, 150)
-gradient.addColorStop(0, 'rgb(200, 0, 200)')
-gradient.addColorStop(0.7, 'rgb(100, 0, 100)')
-gradient.addColorStop(1, 'rgb(0, 0, 0)')
-
-// Default style with a gradient
-WaveSurfer.create({
-  container: document.body,
-  waveColor: gradient,
-  height: 200,
-  progressColor: 'rgba(0, 0, 100, 0.5)',
-  url: 'https://wavesurfer-js.org/example/media/demo.wav'
-})
-
-
-// SoundCloud-style bars
-WaveSurfer.create({
-  container: document.body,
-  waveColor: gradient,
-  height: 200,
-  barWidth: 2,
-  progressColor: 'rgba(0, 0, 100, 0.5)',
-  url: 'https://wavesurfer-js.org/example/media/demo.wav'
-})

package/examples/regions.js

@@ -1,63 +0,0 @@
-import WaveSurfer from '/dist/index.js'
-import RegionsPlugin from '/dist/plugins/regions.js'
-
-// Create an instance of WaveSurfer
-const ws = WaveSurfer.create({
-  container: document.body,
-  waveColor: 'rgb(200, 0, 200)',
-  progressColor: 'rgb(100, 0, 100)',
-  url: 'https://wavesurfer-js.org/example/media/demo.wav'
-})
-
-// Initialize the Regions plugin
-const wsRegions = ws.registerPlugin(RegionsPlugin)
-
-// Give regions a random color when they are created
-const random = (min, max) => Math.random() * (max - min) + min
-wsRegions.on('region-created', ({ region }) => {
-  wsRegions.setRegionColor(region, `rgba(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)}, 0.5)`)
-})
-
-// Create some regions at specific time ranges
-ws.on('ready', () => {
-  wsRegions.addRegionAtTime(4, 7, 'First region')
-  wsRegions.addRegionAtTime(9, 10, 'Middle region')
-  wsRegions.addRegionAtTime(12, 17, 'Last region')
-})
-
-// Loop a region on click
-let loop = true
-let activeRegion = null
-
-wsRegions.on('region-clicked', ({ region }) => {
-  ws.seekTo(region.startTime)
-  ws.play()
-  activeRegion = region
-})
-
-// Track the time
-ws.on('audioprocess', ({ currentTime }) => {
-  // When the end of the region is reached
-  if (activeRegion && ws.isPlaying() && (currentTime >= activeRegion.endTime)) {
-    if (loop) {
-      // If looping, jump to the start of the region
-      ws.seekTo(activeRegion.startTime)
-    } else {
-      // Otherwise, stop playing
-      ws.pause()
-      ws.seekTo(activeRegion.endTime)
-      activeRegion = null
-    }
-  }
-})
-
-// Toggle looping with a checkbox
-const p = document.createElement('p')
-p.innerHTML = `
-  <label>
-    <input type="checkbox" checked="${loop}" style="vertical-align: text-top" />
-    Loop regions on click
-  </label>
-`
-document.body.appendChild(p)
-document.querySelector('input').onclick = (e) => { loop = e.target.checked }

package/examples/video.js

@@ -1,19 +0,0 @@
-import WaveSurfer from '/dist/index.js'
-
-// Create a video element and add it to the DOM.
-// The video can also be defined in HTML, in which case we just get it by a selector.
-const video = document.createElement('video')
-video.crossOrigin = 'anonymous'
-video.controls = true
-video.style.width = '100%'
-video.src = 'https://wavesurfer-js.org/example/media/nasa.mp4'
-document.body.appendChild(video)
-
-// Initialize wavesurfer.js
-const ws = WaveSurfer.create({
-  container: document.body,
-  waveColor: 'rgb(200, 0, 200)',
-  progressColor: 'rgb(100, 0, 100)',
-  // Pass the video element in the `media` param
-  media: document.querySelector('video'),
-})

package/examples/webaudio.js

@@ -1,14 +0,0 @@
-import WaveSurfer from '/dist/index.js'
-
-const audio = new Audio()
-audio.controls = true
-audio.src = '/examples/audio.ogg'
-document.body.appendChild(audio)
-
-const wavesurfer = WaveSurfer.create({
-  container: document.body,
-  waveColor: 'rgb(200, 0, 200)',
-  progressColor: 'rgb(100, 0, 100)',
-  backend: 'WebAudio',
-  media: audio,
-})

package/src/base-plugin.ts

@@ -1,20 +0,0 @@
-import EventEmitter, { type GeneralEventTypes } from './event-emitter.js'
-import type { WaveSurfer, WaveSurferPluginParams } from './index.js'
-
-export class BasePlugin<EventTypes extends GeneralEventTypes> extends EventEmitter<EventTypes> {
-  protected wavesurfer: WaveSurfer
-  protected renderer: WaveSurfer['renderer']
-  protected subscriptions: (() => void)[] = []
-
-  constructor(params: WaveSurferPluginParams) {
-    super()
-    this.wavesurfer = params.wavesurfer
-    this.renderer = params.renderer
-  }
-
-  destroy() {
-    this.subscriptions.forEach((unsubscribe) => unsubscribe())
-  }
-}
-
-export default BasePlugin

package/src/decoder.ts

@@ -1,41 +0,0 @@
-// Web Audio decodeAudioData with a minimum allowed sample rate
-const SAMPLE_RATE = 3000
-
-class Decoder {
-  audioCtx: AudioContext | null = null
-
-  constructor() {
-    this.audioCtx = new (window.AudioContext ||
-      (window as unknown as { webkitAudioContext: AudioContext }).webkitAudioContext)({
-      latencyHint: 'playback',
-      sampleRate: SAMPLE_RATE,
-    })
-  }
-
-  public async decode(audioData: ArrayBuffer): Promise<{
-    duration: number
-    channelData: Float32Array[]
-  }> {
-    if (!this.audioCtx) {
-      throw new Error('AudioContext is not initialized')
-    }
-
-    const buffer = await this.audioCtx.decodeAudioData(audioData)
-    const channelData = [buffer.getChannelData(0)]
-    if (buffer.numberOfChannels > 1) {
-      channelData.push(buffer.getChannelData(1))
-    }
-
-    return {
-      duration: buffer.duration,
-      channelData,
-    }
-  }
-
-  destroy() {
-    this.audioCtx?.close()
-    this.audioCtx = null
-  }
-}
-
-export default Decoder

package/src/event-emitter.ts

@@ -1,35 +0,0 @@
-export interface GeneralEventTypes {
-  // the name of the event and the data it dispatches with
-  // e.g. 'entryCreated': { count: 1 }
-  [eventType: string]: unknown
-}
-
-class EventEmitter<EventTypes extends GeneralEventTypes> {
-  private eventTarget: EventTarget
-
-  constructor() {
-    this.eventTarget = new EventTarget()
-  }
-
-  protected emit<T extends keyof EventTypes>(eventType: T, detail?: EventTypes[T]): void {
-    const e = new CustomEvent(String(eventType), { detail })
-    this.eventTarget.dispatchEvent(e)
-  }
-
-  /** Subscribe to an event and return a function to unsubscribe */
-  on<T extends keyof EventTypes>(eventType: T, callback: (detail: EventTypes[T]) => void): () => void {
-    const handler = (e: Event) => {
-      if (e instanceof CustomEvent) {
-        callback(e.detail)
-      }
-    }
-
-    const eventName = String(eventType)
-
-    this.eventTarget.addEventListener(eventName, handler)
-
-    return () => this.eventTarget.removeEventListener(eventName, handler)
-  }
-}
-
-export default EventEmitter

package/src/fetcher.ts

@@ -1,7 +0,0 @@
-class Fetcher {
-  public async load(url: string): Promise<ArrayBuffer> {
-    return fetch(url).then((response) => response.arrayBuffer())
-  }
-}
-
-export default Fetcher