React-mirt NPM

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