reactjsnext.jsreact-functional-componenthowler.js

convert function components to class components


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


Solution

  • 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}
          />
        );
      }
    }
    

    raptor-howler