thangngoc89 / react-howler

A React.js wrapper for howler.js (audio player)
https://khoanguyen.me/react-howler/
MIT License
361 stars 84 forks source link

How to access methods? #142

Closed dav1lex closed 1 year ago

dav1lex commented 1 year ago

Hello , I am a beginner and I want to create a mini radio for learning purposes, here is what I've done so far:

 const [playerIndex, setPlayerindex] = useState(0)
    const [currentRadio, setcurrentRadio] = useState(Stations[playerIndex])
    const [playing, setplaying] = useState(false)
    const [volume, setvolume] = useState(1.0)
    const [seek, setseek] = useState(0.0)
    const radiolist = [...Stations]

    useEffect(() => {
        setcurrentRadio(Stations[playerIndex])
    }, [playerIndex])

    function playradio() {
        setplaying(!playing)
    }

    function nextRadio() {
        playerIndex !== 9 ? setPlayerindex((prevState) => prevState + 1) : setPlayerindex(0)

    }

    return (
        <div>
            <ReactHowler html5={true} playing={playing} volume={volume} src={currentRadio}/>
            <button onClick={playradio}>{playing ? 'pause' : 'play'}</button>
            <button onClick={nextRadio}>next radio</button>
            <input
                type='range'
                min='0'
                max='1'
                step='.02'
                value={volume}
                onChange={e => setvolume(parseFloat(e.target.value))}
            />
        </div>
    )

What I don't understand is, I really don't know how to get duration of the source that running. I've checked the example page but I don't get it . Not a real issue and got nowhere to ask, so here i am creating a new issue :) Thank you.

thangngoc89 commented 1 year ago

@dav1lex I'm the original author of this library but I haven't touched this for years. @Stenerson has been handled everything ever since. This library was written before hooks were even a thing and class components was the way to go.

From my vague memory, it looks like that you need to pass a ref to access to the howler instance just like the example website.

dav1lex commented 1 year ago

@thangngoc89 Thank you for your reply, I decided to switch to clas components.