react-mirt

An react audio trimmer component ~copied~ inspired by iOS. It can be used to set a start and end time for an audio file in order to process it further, e.g. using ffmpeg. You can also zoom in to make finer adjustments by holding down the handle.

Install

  yarn add react-mirt
  # npm install react-mirt

Use

import Mirt from 'react-mirt';
import 'react-mirt/dist/css/react-mirt.css';

function App() {
  return <Mirt file={myWayTooLongAudioFile} />;
}

Props

| Property | Type | Description | | :---------- | :------- | :------------------------------------- | | file | File | The audio file to be trimmed | | className | string | Additional classes on the root element | | style | object | Additional styles on the root element | | options | object | See options below |

Options

| Parameter | Type | Default | Description | | :------------------- | :-------- | :----------------------- | :------------------------------------------------------------------------------------------- | | showButton | boolean | true | Show/hide the play button | | waveformColor | string | rgba(255, 255, 255, 0.5) | Color of the waveform as CSS color value | | waveformBarWidth | number | 0.5 | Width of waveform bar depending on the block width (e.g. 0.5 equals half of the block width) | | waveformBlockWidth | number | 4 | Width of waveform block (sum of bar and space) | | waveformLoading | boolean | false | Animate waveform until actual waveform is loaded | | fineTuningDelay | number | 500 | Delay (ms) for switching to fine tuning (0 disables fine tuning) | | fineTuningScale | number | 5 | Zoom factor for fine tuning | | start | number | | Overwrite current start value | | end | number | | Overwrite current end value |

Callback functions

| Event | Type | Description | | :----------------- | :----------------------------------------------------------- | :------------------------------------------------------------------------------------------------- | | onChange | ({ start: number; current: number; end: number }) => void; | Returns the start and end values and the current playhead handle position, if one of these changed | | onAudioLoaded | (audio: HTMLAudioElement) => void; | Triggered as soon as the audio element has been loaded, returns the HTML audio element | | onWaveformLoaded | () => void; | Triggered as soon as the waveform has been generated | | onError | (error: Error) => void; | Triggered when an error has occurred, returns the error |

Styling

There are several ways to customise the appearance. I recommend overwriting the CSS variables. But you can also import the sass file and overwrite its variables or you add your own styles on top.

| Variable | Sass Variable | Default | Description | | :---------------------------------- | :---------------------------- | :------ | :-------------------------------------------------- | | --mirt-height | $height | 3rem | Height of the component | | --mirt-border-radius | $border-radius | 0.3rem | Border radius of component and inner frame | | --mirt-background-color | $background-color | #333 | Background color (also of button and waveform) | | --mirt-playhead-width | $playhead-width | 0.35rem | Playhead width | | --mirt-playhead-color | $playhead-color | #fff | Playhead color | | --mirt-frame-border-width | $frame-border-width | 0.3rem | Width of (colored) frame border | | --mirt-frame-color | $frame-color | #409f80 | Color of frame | | --mirt-handle-width | $handle-width | 1.2rem | Width of start and end handles | | --mirt-handle-icon-width | $handle-icon-width | 0.75rem | Icon width of start and end handles | | --mirt-handle-icon-color | $handle-icon-color | #333 | Icon color of start and end handles | | --mirt-handle-transition-duration | $handle-transition-duration | 500ms | Transition duration start, end and playhead handles | | --mirt-button-width | $button-width | 3rem | Width of play/pause button | | --mirt-button-border-color | $button-border-color | #222 | Border (right) color of play/pause button | | --mirt-button-hover-color | $button-hover-color | #444 | Hover color of play/pause button | | --mirt-button-icon-width | $button-icon-width | 1rem | Icon width of play/pause button | | --mirt-button-icon-color | $button-icon-color | #fff | Icon color of play/pause button |

License

MIT