React Student Audio Recorder

A React component for recording audio with a student-friendly UI. Features include audio compression, time limits, and a clean, intuitive interface.

Features

• 🎙️ Simple audio recording interface
• ⏱️ Configurable recording time limit
• 🗜️ Audio compression (opus codec)
• 🎯 Customizable callbacks for save/delete actions
• 📱 Responsive design with Tailwind CSS
• 🎨 Clean, intuitive UI with clear status indicators
• ♿ Accessible with ARIA labels
• 🧪 Fully tested with Jest

Installation

npm install react-audio-recrd

Usage

import { AudioRecorder } from 'react-audio-recrd';

function App() {
  const handleSave = (blob) => {
    // Handle the recorded audio blob
    console.log('Recorded audio:', blob);
    
    // Example: Upload to server
    const formData = new FormData();
    formData.append('audio', blob, 'recording.webm');
    // fetch('/api/upload', { method: 'POST', body: formData });
  };

  const handleDelete = () => {
    // Handle deletion
    console.log('Recording deleted');
  };

  return (
    <AudioRecorder
      onSave={handleSave}
      onDelete={handleDelete}
      maxDuration={300} // 5 minutes
      compressionBitsPerSecond={96000} // 96kbps
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onSave | (blob: Blob) => void | () => {} | Callback when recording is saved | | onDelete | () => void | () => {} | Callback when recording is deleted | | maxDuration | number | 300 | Maximum recording duration in seconds | | compressionFormat | string | 'audio/webm;codecs=opus' | Audio compression format | | compressionBitsPerSecond | number | 96000 | Audio bitrate in bits per second |

Browser Support

This component uses the MediaRecorder API. Check browser compatibility for support details.

The component requires these browser features:

• MediaRecorder API
• getUserMedia API
• Web Audio API

Development

# Install dependencies
npm install

# Run tests
npm test

# Build package
npm run build

# Lint code
npm run lint

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

MIT © Artur Gomes

Notes

• The component uses Opus codec for audio compression, providing good quality at low bitrates
• Recording automatically stops when reaching maxDuration
• Designed with accessibility in mind, including proper ARIA labels and keyboard navigation
• Uses Tailwind CSS for styling - make sure Tailwind is configured in your project

Support

If you find any bugs or have feature requests, please create an issue in the GitHub repository.