Audio Component

This component provides audio playback functionality, allowing users to play audio files.

Props

• prop1: Description of prop1.
• prop2: Description of prop2.

Usage

import { Audio } from 'mycrumbs-uikit';

const props = {};

<Audio prop1="value1" prop2="value2" />;

import React, { useEffect, useRef } from 'react';

interface IAudioProps {
  track?: MediaStreamTrack;
}

const Audio: React.FC<
  IAudioProps &
    React.DetailedHTMLProps<
      React.AudioHTMLAttributes<HTMLAudioElement>,
      HTMLAudioElement
    >
> = ({ track }) => {
  const audioRef = useRef<HTMLAudioElement>(null);

  const getStream = (_track: MediaStreamTrack) => {
    const stream = new MediaStream();
    stream.addTrack(_track);
    return stream;
  };

  useEffect(() => {
    const audioObj = audioRef.current;

    if (audioObj && track) {
      audioObj.srcObject = getStream(track);
      audioObj.onloadedmetadata = async () => {
        console.warn('audioCard() | Metadata loaded...');
        try {
          await audioObj.play();
        } catch (error) {
          console.error(error);
        }
      };
      audioObj.onerror = () => {
        console.error('audioCard() | Error is hapenning...');
      };
    }
  }, []);

  return <audio ref={audioRef}>Audio</audio>;
};

export default Audio;