Skip to content

An iOS inspired audio trimmer component for React

License

Notifications You must be signed in to change notification settings

esdete2/react-mirt

Repository files navigation

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.

ezgif-1-bfe867f0ff

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