Suggestion for better front page example

[ghost]

Your README could have a better example that shows how to upload the recorded file and also shows file size and the mime type of the file.

This would be a big help to people considering this library.

Here is one you could use:

import React, { useState } from 'react';
import { VoiceRecorder } from 'react-voice-recorder-player';

export function RecorderExample() {
  const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
  const [fileDetails, setFileDetails] = useState({ type: '', size: 0 });

  const styles = {
    mainContainerStyle: {
      backgroundColor: 'gray',
      border: '1px solid black',
      borderRadius: '5px',
      padding: '10px'
    },
    controllerContainerStyle: {
      display: 'flex',
      justifyContent: 'space-between',
      marginTop: '10px'
    },
    controllerStyle: {
      backgroundColor: 'white',
      border: '1px solid black',
      borderRadius: '5px',
      cursor: 'pointer',
      padding: '5px'
    },
    waveContainerStyle: {
      height: '100px',
      marginTop: '10px',
      width: '100%'
    }
  };

  const handleRecordingEnd = (blob: Blob) => {
    const { type, size } = blob;
    setFileDetails({ type, size });
    setAudioBlob(blob);
  };

  const getFileExtension = (mimeType: string) => {
    switch (mimeType) {
      case 'audio/webm':
      case 'audio/webm;codecs=opus':
        return 'webm';
      case 'audio/mp4':
      case 'audio/mp4;codecs=mp4a.40.2':
        return 'mp4';
      case 'audio/mpeg':
        return 'mp3';
      case 'audio/ogg':
      case 'audio/ogg;codecs=opus':
      case 'audio/ogg;codecs=vorbis':
        return 'ogg';
      case 'audio/wav':
      case 'audio/wave':
      case 'audio/x-wav':
        return 'wav';
      case 'audio/x-matroska':
        return 'mka';
      case 'audio/flac':
        return 'flac';
      case 'audio/aac':
        return 'aac';
      case 'audio/x-aac':
        return 'aac';
      default:
        return 'webm'; // default to webm if unknown
    }
  };

  const handleUpload = async () => {
    if (audioBlob) {
      const extension = getFileExtension(fileDetails.type);
      const fileName = `recording.${extension}`;
      const formData = new FormData();
      formData.append('file', audioBlob, fileName);

      try {
        const response = await fetch('/upload', {
          method: 'POST',
          body: formData,
        });

        if (response.ok) {
          console.log('File uploaded successfully');
        } else {
          console.error('Failed to upload file');
        }
      } catch (error) {
        console.error('Error uploading file:', error);
      }
    }
  };

  return (
    <div>
      <VoiceRecorder
        mainContainerStyle={styles.mainContainerStyle}
        controllerContainerStyle={styles.controllerContainerStyle}
        controllerStyle={styles.controllerStyle}
        waveContainerStyle={styles.waveContainerStyle}
        onRecordingEnd={handleRecordingEnd}
      />
      {audioBlob && (
        <div>
          <button onClick={handleUpload} style={styles.controllerStyle}>
            Upload
          </button>
          <div>
            <p>File Type: {fileDetails.type}</p>
            <p>File Size: {(fileDetails.size / 1024).toFixed(2)} KB</p>
          </div>
        </div>
      )}
    </div>
  );
}