Skip to content

Commit

Permalink
Feat: support seeking with no audio loaded
Browse files Browse the repository at this point in the history
  • Loading branch information
katspaugh committed Jan 24, 2024
1 parent 2f76c75 commit 745833e
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 8 deletions.
8 changes: 7 additions & 1 deletion src/player.ts
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,8 @@ class Player<T extends GeneralEventTypes> extends EventEmitter<T> {
}

/** Start playing the audio */
public play(): Promise<void> {
public async play(): Promise<void> {
if (!this.media.src) return
return this.media.play()
}

Expand Down Expand Up @@ -145,6 +146,11 @@ class Player<T extends GeneralEventTypes> extends EventEmitter<T> {
return this.media.playbackRate
}

/** Check if the audio is seeking */
public isSeeking(): boolean {
return this.media.seeking
}

/** Set the playback speed, pass an optional false to NOT preserve the pitch */
public setPlaybackRate(rate: number, preservePitch?: boolean) {
// preservePitch is true by default in most browsers
Expand Down
2 changes: 1 addition & 1 deletion src/renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -684,7 +684,7 @@ class Renderer extends EventEmitter<RendererEvents> {
this.canvasWrapper.style.clipPath = `polygon(${percents}% 0, 100% 0, 100% 100%, ${percents}% 100%)`
this.progressWrapper.style.width = `${percents}%`
this.cursor.style.left = `${percents}%`
this.cursor.style.marginLeft = Math.round(percents) === 100 ? `-${this.options.cursorWidth}px` : ''
this.cursor.style.transform = `translateX(-${Math.round(percents) === 100 ? this.options.cursorWidth : 0}px)`

if (this.isScrollable && this.options.autoScroll) {
this.scrollIntoView(progress, isPlaying)
Expand Down
23 changes: 17 additions & 6 deletions src/wavesurfer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -186,14 +186,20 @@ class WaveSurfer extends Player<WaveSurferEvents> {
})
}

private updateProgress(currentTime = this.getCurrentTime()): number {
this.renderer.renderProgress(currentTime / this.getDuration(), this.isPlaying())
return currentTime
}

private 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)
this.emit('audioprocess', currentTime)
if (!this.isSeeking()) {
const currentTime = this.updateProgress()
this.emit('timeupdate', currentTime)
this.emit('audioprocess', currentTime)
}
}),
)
}
Expand All @@ -206,8 +212,7 @@ class WaveSurfer extends Player<WaveSurferEvents> {

this.mediaSubscriptions.push(
this.onMediaEvent('timeupdate', () => {
const currentTime = this.getCurrentTime()
this.renderer.renderProgress(currentTime / this.getDuration(), this.isPlaying())
const currentTime = this.updateProgress()
this.emit('timeupdate', currentTime)
}),

Expand Down Expand Up @@ -454,6 +459,12 @@ class WaveSurfer extends Player<WaveSurferEvents> {
this.options.interact = isInteractive
}

/** Jumpt to a specific time in the audio (in seconds) */
public setTime(time: number) {
super.setTime(time)
this.updateProgress(time)
}

/** Seek to a percentage of audio as [0..1] (0 = beginning, 1 = end) */
public seekTo(progress: number) {
const time = this.getDuration() * progress
Expand Down

0 comments on commit 745833e

Please sign in to comment.