Skip to content

Unexpected "loading" state after seeking html5 audio #1756

@E-Kuerschner

Description

@E-Kuerschner

The Problem

Greetings and thank you for Howler!

I noticed that after seeking a Howl using HTML5, it briefly enters the "loading" state. This is inconsistent with how the Howl behaves when using the default Web Audio API. What leads me to thinking that this is a bug is that despite being in the "loading" state again, the Howl does not emit the "onload" event.

Edit: After looking through the source, I'm wondering if the Howl load event should be emitted around this line:
https://github.com/goldfire/howler.js/blob/master/src/howler.core.js#L986

import { useEffect, useRef } from "react"
import { Howl } from "howler"

export const DebuggingRoute = () => {
    const soundRef = useRef<Howl | null>(null)
    useEffect(() => {
        if (soundRef.current) return

        soundRef.current = new Howl({
            src: ["/ch_tunes - baby_seal.wav"],
            html5: true // Enables html5 audio for streaming large files
        })

        soundRef.current.on("seek", function () {
            console.log(soundRef.current?.state())
        })
    }, [])

    return (
        <div>
            <button onClick={() => soundRef.current?.play()}>Play</button>
            <button onClick={() => soundRef.current?.seek(10)}>seek</button>
        </div>
    )
}

Reproducible Example

No response

Reproduction Steps

  1. Load a Howl with the html5 option set to tru
  2. Begin playback however you link
  3. seek to any position
  4. check the _state of the Howl on the seek event

Possible Solution

No response

Context

No response

Howler.js Version

2.2.3

Affected Browser(s)/Versiuon(s)

Chrome (latest)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions