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

package/src/index.ts

@@ -1,252 +0,0 @@
-import Fetcher from './fetcher.js'
-import Decoder from './decoder.js'
-import Renderer from './renderer.js'
-import Player from './player.js'
-import WebAudioPlayer from './player-webaudio.js'
-import EventEmitter, { type GeneralEventTypes } from './event-emitter.js'
-import Timer from './timer.js'
-import BasePlugin from './base-plugin.js'
-
-export enum PlayerType {
-  WebAudio = 'WebAudio',
-  MediaElement = 'MediaElement',
-}
-
-export type WaveSurferOptions = {
-  /** HTML element or CSS selector */
-  container: HTMLElement | string | null
-  /** Height of the waveform in pixels */
-  height?: number
-  /** The color of the waveform */
-  waveColor?: string
-  /** The color of the progress mask */
-  progressColor?: string
-  /** If set, the waveform will be rendered in bars like so: ▁ ▂ ▇ ▃ ▅ ▂ */
-  barWidth?: number
-  /** Spacing between bars in pixels */
-  barGap?: number
-  /** Rounded borders for bars */
-  barRadius?: number
-  /** Minimum pixels per second of audio (zoom) */
-  minPxPerSec?: number
-  /** Audio URL */
-  url?: string
-  /** Pre-computed audio data */
-  channelData?: Float32Array[]
-  /** Pre-computed duration */
-  duration?: number
-  /** Player "backend", the default is MediaElement  */
-  backend?: PlayerType
-  /** Use an existing media element instead of creating one */
-  media?: HTMLMediaElement
-}
-
-const defaultOptions = {
-  height: 128,
-  waveColor: '#999',
-  progressColor: '#555',
-  minPxPerSec: 0,
-  backend: 'MediaElement',
-}
-
-export type WaveSurferEvents = {
-  ready: { duration: number }
-  canplay: void
-  play: void
-  pause: void
-  audioprocess: { currentTime: number }
-  seek: { time: number }
-}
-
-export type WaveSurferPluginParams = {
-  wavesurfer: WaveSurfer
-  renderer: WaveSurfer['renderer']
-}
-
-export class WaveSurfer extends EventEmitter<WaveSurferEvents> {
-  private options: WaveSurferOptions & typeof defaultOptions
-
-  private fetcher: Fetcher
-  private decoder: Decoder
-  private renderer: Renderer
-  private player: Player
-  private timer: Timer
-
-  private plugins: BasePlugin<GeneralEventTypes>[] = []
-  private subscriptions: Array<() => void> = []
-  private channelData: Float32Array[] | null = null
-  private duration = 0
-
-  /** Create a new WaveSurfer instance */
-  public static create(options: WaveSurferOptions) {
-    return new WaveSurfer(options)
-  }
-
-  /** Create a new WaveSurfer instance */
-  constructor(options: WaveSurferOptions) {
-    super()
-
-    this.options = Object.assign({}, defaultOptions, options)
-
-    this.fetcher = new Fetcher()
-    this.decoder = new Decoder()
-    this.timer = new Timer()
-
-    this.player = new (this.options.backend === PlayerType.WebAudio ? WebAudioPlayer : Player)({
-      media: this.options.media,
-    })
-
-    this.renderer = new Renderer({
-      container: this.options.container,
-      height: this.options.height,
-      waveColor: this.options.waveColor,
-      progressColor: this.options.progressColor,
-      minPxPerSec: this.options.minPxPerSec,
-      barWidth: this.options.barWidth,
-      barGap: this.options.barGap,
-      barRadius: this.options.barRadius,
-    })
-
-    this.initPlayerEvents()
-    this.initRendererEvents()
-    this.initTimerEvents()
-
-    const url = this.options.url || this.options.media?.src
-    if (url) {
-      this.load(url, this.options.channelData, this.options.duration)
-    }
-  }
-
-  private initPlayerEvents() {
-    this.subscriptions.push(
-      this.player.on('timeupdate', () => {
-        const currentTime = this.getCurrentTime()
-        this.renderer.renderProgress(currentTime / this.duration, this.isPlaying())
-        this.emit('audioprocess', { currentTime })
-      }),
-
-      this.player.on('play', () => {
-        this.emit('play')
-      }),
-
-      this.player.on('pause', () => {
-        this.emit('pause')
-      }),
-
-      this.player.on('canplay', () => {
-        this.emit('canplay')
-      }),
-
-      this.player.on('seeking', () => {
-        this.emit('seek', { time: this.getCurrentTime() })
-      }),
-    )
-  }
-
-  private initRendererEvents() {
-    // Seek on click
-    this.subscriptions.push(
-      this.renderer.on('click', ({ relativeX }) => {
-        const time = this.getDuration() * relativeX
-        this.seekTo(time)
-      }),
-    )
-  }
-
-  private initTimerEvents() {
-    // The timer fires every 16ms for a smooth progress animation
-    this.subscriptions.push(
-      this.timer.on('tick', () => {
-        if (this.isPlaying()) {
-          const currentTime = this.getCurrentTime()
-          this.renderer.renderProgress(currentTime / this.duration, true)
-          this.emit('audioprocess', { currentTime })
-        }
-      }),
-    )
-  }
-
-  /** Unmount wavesurfer */
-  public destroy() {
-    this.subscriptions.forEach((unsubscribe) => unsubscribe())
-    this.plugins.forEach((plugin) => plugin.destroy())
-    this.timer.destroy()
-    this.player.destroy()
-    this.decoder.destroy()
-    this.renderer.destroy()
-  }
-
-  /** Load an audio file by URL */
-  public async load(url: string, channelData?: Float32Array[], duration?: number) {
-    this.player.loadUrl(url)
-
-    // Fetch and decode the audio of no pre-computed audio data is provided
-    if (channelData == null || duration == null) {
-      const audio = await this.fetcher.load(url)
-      const data = await this.decoder.decode(audio)
-      channelData = data.channelData
-      duration = data.duration
-    }
-
-    this.channelData = channelData
-    this.duration = duration
-
-    this.renderer.render(this.channelData, this.duration)
-
-    this.emit('ready', { duration: this.duration })
-  }
-
-  /** Zoom in or out */
-  public zoom(minPxPerSec: number) {
-    if (this.channelData == null || this.duration == null) {
-      throw new Error('No audio loaded')
-    }
-    this.renderer.render(this.channelData, this.duration, minPxPerSec)
-  }
-
-  /** Start playing the audio */
-  public play() {
-    this.player.play()
-  }
-
-  /** Pause the audio */
-  public pause() {
-    this.player.pause()
-  }
-
-  /** Skip to a time position in seconds */
-  public seekTo(time: number) {
-    this.player.seekTo(time)
-  }
-
-  /** Check if the audio is playing */
-  public isPlaying(): boolean {
-    return this.player.isPlaying()
-  }
-
-  /** Get the duration of the audio in seconds */
-  public getDuration(): number {
-    return this.duration
-  }
-
-  /** Get the current audio position in seconds */
-  public getCurrentTime(): number {
-    return this.player.getCurrentTime()
-  }
-
-  /** Register and initialize a plugin */
-  public registerPlugin<T extends BasePlugin<GeneralEventTypes>>(
-    CustomPlugin: new (params: WaveSurferPluginParams) => T,
-  ): T {
-    const plugin = new CustomPlugin({
-      wavesurfer: this,
-      renderer: this.renderer,
-    })
-
-    this.plugins.push(plugin)
-
-    return plugin
-  }
-}
-
-export default WaveSurfer

package/src/player-webaudio.ts

@@ -1,34 +0,0 @@
-import Player from './player.js'
-
-class WebAudioPlayer extends Player {
-  audioCtx: AudioContext | null = null
-  sourceNode: MediaElementAudioSourceNode | null = null
-
-  destroy() {
-    this.sourceNode?.disconnect()
-    this.sourceNode = null
-    this.audioCtx?.close()
-    this.audioCtx = null
-
-    super.destroy()
-  }
-
-  loadUrl(url: string) {
-    super.loadUrl(url)
-
-    if (!this.audioCtx) {
-      this.audioCtx = new (window.AudioContext ||
-        (window as unknown as { webkitAudioContext: AudioContext }).webkitAudioContext)({
-        latencyHint: 'playback',
-      })
-    }
-
-    if (this.sourceNode) {
-      this.sourceNode.disconnect()
-    }
-    this.sourceNode = this.audioCtx.createMediaElementSource(this.media)
-    this.sourceNode.connect(this.audioCtx.destination)
-  }
-}
-
-export default WebAudioPlayer

package/src/player.ts

@@ -1,50 +0,0 @@
-class Player {
-  protected media: HTMLMediaElement
-  private isExternalMedia = false
-
-  constructor({ media }: { media?: HTMLMediaElement }) {
-    if (media) {
-      this.media = media
-      this.isExternalMedia = true
-    } else {
-      this.media = document.createElement('audio')
-    }
-  }
-
-  on(event: keyof HTMLMediaElementEventMap, callback: () => void): () => void {
-    this.media.addEventListener(event, callback)
-    return () => this.media.removeEventListener(event, callback)
-  }
-
-  destroy() {
-    if (!this.isExternalMedia) {
-      this.media.remove()
-    }
-  }
-
-  loadUrl(src: string) {
-    this.media.src = src
-  }
-
-  getCurrentTime() {
-    return this.media.currentTime
-  }
-
-  play() {
-    this.media.play()
-  }
-
-  pause() {
-    this.media.pause()
-  }
-
-  isPlaying() {
-    return this.media.currentTime > 0 && !this.media.paused && !this.media.ended
-  }
-
-  seekTo(time: number) {
-    this.media.currentTime = time
-  }
-}
-
-export default Player

package/src/plugins/regions.ts

@@ -1,240 +0,0 @@
-import BasePlugin from '../base-plugin.js'
-import { WaveSurferPluginParams } from '../index.js'
-
-const MIN_WIDTH = 10
-
-type Region = {
-  startTime: number
-  endTime: number
-  title: string
-  start: number
-  end: number
-  element: HTMLElement
-}
-
-type RegionsPluginEvents = {
-  'region-created': { region: Region }
-  'region-updated': { region: Region }
-  'region-clicked': { region: Region }
-}
-
-class RegionsPlugin extends BasePlugin<RegionsPluginEvents> {
-  private dragStart = NaN
-  private container: HTMLElement
-  private regions: Region[] = []
-  private createdRegion: Region | null = null
-  private modifiedRegion: Region | null = null
-  private isResizingLeft = false
-  private isMoving = false
-
-  /** Create an instance of RegionsPlugin */
-  constructor(params: WaveSurferPluginParams) {
-    super(params)
-
-    this.container = this.initContainer()
-
-    const unsubscribeReady = this.wavesurfer.on('ready', () => {
-      const wrapper = this.renderer.getContainer()
-      wrapper.appendChild(this.container)
-      unsubscribeReady()
-    })
-    this.subscriptions.push(unsubscribeReady)
-
-    const wsContainer = this.renderer.getContainer()
-    wsContainer.addEventListener('mousedown', this.handleMouseDown)
-    document.addEventListener('mousemove', this.handleMouseMove)
-    document.addEventListener('mouseup', this.handleMouseUp)
-  }
-
-  /** Unmounts the regions */
-  public destroy() {
-    this.renderer.getContainer().removeEventListener('mousedown', this.handleMouseDown)
-    document.removeEventListener('mousemove', this.handleMouseMove)
-    document.removeEventListener('mouseup', this.handleMouseUp, true)
-
-    this.container?.remove()
-
-    super.destroy()
-  }
-
-  private initContainer(): HTMLElement {
-    const div = document.createElement('div')
-    div.style.position = 'absolute'
-    div.style.top = '0'
-    div.style.left = '0'
-    div.style.width = '100%'
-    div.style.height = '100%'
-    div.style.zIndex = '3'
-    div.style.pointerEvents = 'none'
-    return div
-  }
-
-  private handleMouseDown = (e: MouseEvent) => {
-    this.dragStart = e.clientX - this.container.getBoundingClientRect().left
-  }
-
-  private handleMouseMove = (e: MouseEvent) => {
-    const dragEnd = e.clientX - this.container.getBoundingClientRect().left
-
-    if (this.modifiedRegion && this.isMoving) {
-      this.moveRegion(this.modifiedRegion, dragEnd - this.dragStart)
-      this.dragStart = dragEnd
-      return
-    }
-
-    if (this.modifiedRegion) {
-      this.updateRegion(
-        this.modifiedRegion,
-        this.isResizingLeft ? dragEnd : undefined,
-        this.isResizingLeft ? undefined : dragEnd,
-      )
-      return
-    }
-
-    if (!isNaN(this.dragStart)) {
-      const dragEnd = e.clientX - this.container.getBoundingClientRect().left
-
-      if (dragEnd - this.dragStart >= MIN_WIDTH) {
-        if (!this.createdRegion) {
-          this.renderer.getContainer().style.pointerEvents = 'none'
-
-          this.createdRegion = this.createRegion(this.dragStart, dragEnd)
-        } else {
-          this.updateRegion(this.createdRegion, this.dragStart, dragEnd)
-        }
-      }
-    }
-  }
-
-  private handleMouseUp = () => {
-    if (this.createdRegion) {
-      this.addRegion(this.createdRegion)
-      this.createdRegion = null
-    }
-    this.modifiedRegion = null
-    this.isMoving = false
-    this.dragStart = NaN
-    this.renderer.getContainer().style.pointerEvents = ''
-  }
-
-  private createRegionElement(start: number, end: number, title = ''): HTMLElement {
-    const el = document.createElement('div')
-    el.style.position = 'absolute'
-    el.style.left = `${start}px`
-    el.style.width = `${end - start}px`
-    el.style.height = '100%'
-    el.style.backgroundColor = 'rgba(0, 0, 0, 0.1)'
-    el.style.transition = 'background-color 0.2s ease'
-    el.style.cursor = 'move'
-    el.style.pointerEvents = 'all'
-    el.title = title
-
-    const leftHandle = document.createElement('div')
-    leftHandle.style.position = 'absolute'
-    leftHandle.style.left = '0'
-    leftHandle.style.width = '6px'
-    leftHandle.style.height = '100%'
-    leftHandle.style.borderLeft = '2px solid rgba(0, 0, 0, 0.5)'
-    leftHandle.style.cursor = 'ew-resize'
-    leftHandle.style.pointerEvents = 'all'
-    el.appendChild(leftHandle)
-
-    const rightHandle = document.createElement('div')
-    rightHandle.style.position = 'absolute'
-    rightHandle.style.right = '0'
-    rightHandle.style.width = '6px'
-    rightHandle.style.height = '100%'
-    rightHandle.style.borderRight = '2px solid rgba(0, 0, 0, 0.5)'
-    rightHandle.style.cursor = 'ew-resize'
-    rightHandle.style.pointerEvents = 'all'
-    el.appendChild(rightHandle)
-
-    leftHandle.addEventListener('mousedown', (e) => {
-      e.stopPropagation()
-      this.modifiedRegion = this.regions.find((r) => r.element === el) || null
-      this.isResizingLeft = true
-      this.isMoving = false
-    })
-
-    rightHandle.addEventListener('mousedown', (e) => {
-      e.stopPropagation()
-      this.modifiedRegion = this.regions.find((r) => r.element === el) || null
-      this.isResizingLeft = false
-      this.isMoving = false
-    })
-
-    el.addEventListener('mousedown', () => {
-      this.modifiedRegion = this.regions.find((r) => r.element === el) || null
-      this.isMoving = true
-    })
-
-    el.addEventListener('click', () => {
-      const region = this.regions.find((r) => r.element === el)
-      if (region) {
-        this.emit('region-clicked', { region })
-      }
-    })
-
-    this.container.appendChild(el)
-
-    return el
-  }
-
-  private createRegion(start: number, end: number, title = ''): Region {
-    const duration = this.wavesurfer.getDuration()
-    const width = this.container.clientWidth
-
-    return {
-      element: this.createRegionElement(start, end, title),
-      start,
-      end,
-      startTime: (start / width) * duration,
-      endTime: (end / width) * duration,
-      title,
-    }
-  }
-
-  private addRegion(region: Region) {
-    this.regions.push(region)
-
-    this.emit('region-created', { region })
-  }
-
-  private updateRegion(region: Region, start?: number, end?: number) {
-    if (start != null) {
-      region.start = start ?? region.start
-      region.element.style.left = `${region.start}px`
-      region.startTime = (start / this.container.clientWidth) * this.wavesurfer.getDuration()
-    }
-
-    if (end != null) {
-      region.end = end
-      region.element.style.width = `${region.end - region.start}px`
-      region.endTime = (end / this.container.clientWidth) * this.wavesurfer.getDuration()
-    }
-
-    this.emit('region-updated', { region })
-  }
-
-  private moveRegion(region: Region, delta: number) {
-    this.updateRegion(region, region.start + delta, region.end + delta)
-  }
-
-  /** Create a region at a given start and end time, with an optional title */
-  public addRegionAtTime(startTime: number, endTime: number, title = '') {
-    const duration = this.wavesurfer.getDuration()
-    const width = this.container.clientWidth
-    const start = (startTime / duration) * width
-    const end = (endTime / duration) * width
-    const region = this.createRegion(start, end, title)
-    this.addRegion(region)
-    return region
-  }
-
-  /** Set the background color of a region */
-  public setRegionColor(region: Region, color: string) {
-    region.element.style.backgroundColor = color
-  }
-}
-
-export default RegionsPlugin