I have this class component here
class App extends React.Component {
getHowler() {
this.player.howler;
}
getDuration() {
this.player.duration();
}
getSeek() {
this.player.seek();
}
setSeek() {
this.player.seek(0.5);
}
// This sound file may not work due to cross-origin setting
render() {
return (
<ReactHowler
src="http://goldfirestudios.com/proj/howlerjs/sound.ogg"
playing={true}
ref={(ref) => (this.player = ref)}
/>
);
}
}
I want this to convert into function components. I want to use react howler seek function in function components. How can I do that? I tried useRef from react and it throws me an error.
The functionality should work like this: every time I swap the tract it should play from the beginning
const App = () => {
const player = useRef(null)
const getHowler = () => {
player.current.howler;
}
const getDuration = () => {
player.current.duration();
}
const getSeek () => {
player.current.seek();
}
const setSeek = () => {
player.current.seek(0.5);
}
render() {
return (
<ReactHowler
src="http://goldfirestudios.com/proj/howlerjs/sound.ogg"
playing={true}
ref={player}
/>
);
}
}
player.current === null