import { IonButton } from "@ionic/react";
import { FunctionComponent } from "react";
import { useGlobalAudioPlayer } from "react-use-audio-player";

export const AudioControls: FunctionComponent<{}> = () => {
  const { play, pause, playing } = useGlobalAudioPlayer();
  const { load, src: loadedSrc } = useGlobalAudioPlayer();

  return (
    <div>
      <IonButton
        onClick={() => {
          load("/audio.mp3");
          console.log("mp3 file loaded");
        }}
      >
        load src
      </IonButton>
      <IonButton
        disabled={playing}
        onClick={() => (playing ? pause() : play())}
      >
        {playing ? "pause" : "play"}
      </IonButton>
    </div>
  );
};
