Toggle

This is an example using the onToggle. When there's no audio loaded, it loads the audio and based on the autoplay argumennt passed to useRoover, plays the audio. When there's already an audio, it simply play/pause the audio.

import React from 'react';
import useRoover from 'roover';

const src =
  'https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3';

const App = () => {
  const {
    initial,
    loading,
    ready,
    playing,
    paused,
    onToggle,
    onPlay,
    onPause,
  } = useRoover({
    src,
    autoplay: true,
  });

  return (
    <div>
      <p>Loading: {loading ? 'true' : 'false'}</p>
      <p>Ready: {ready ? 'true' : 'false'}</p>
      <button onClick={onToggle}>Toggle</button>
      <button onClick={onPlay}>Play</button>
      <button onClick={onPause}>Pause</button>
    </div>
  );
};