ngx-audio-editor

An Angular UI Component library that provides a GUI for editing an audio.

NOTE:

1. The current editing feature available is audio trimming. You are welcome to contribute and create a pull request to extend the component with more features.
2. Soft transform values are returned by the component. It does not output a modified file.

Installation

npm install --save ngx-audio-editor

Usage

Initialize module

Import the library into your app module:

import { NgxAudioEditorModule } from 'ngx-audio-editor';
@NgModule({
  imports: [
    // ... your other module imports
    NgxAudioEditorModule,
  ],
})

In your component template

<ngx-audio-editor #audioEditor></ngx-audio-editor>

<input type="file" (change)="handleFileInput($event)" accept=".mp3, .wav" multiple="false">

<button (click)="audioEditor.playpause()"> Play/Pause </button>
<button (click)="audioEditor.stop()"> Stop </button>
<button (click)="audioEditor.toggleTrimmer()">
  {{ audioEditor.isTrimmerEnabled ? 'Disable Trimmer' : 'Enable Trimmer' }}
</button>
<ng-container *ngIf="audioEditor2.isTrimmerEnabled">
  <span class="custom-trim-start"> start: {{ audioEditor.trimStart }} </span>
  <span class="custom-trim-end"> end: {{ audioEditor.trimEnd }} </span>
</ng-container>

In your component class

@ViewChild() audioEditor!: NgxAudioEditorComponent;

handleFileInput(event: Event) {
  const inputElement = event.target as HTMLInputElement;
  const file = inputElement.files![0];

  if (['audio/mpeg', 'audio/wav'].includes(file?.type)) this.audioEditor.reset(file);
  else alert('Please select an MP3 or WAV file.');
}

NgxAudioEditorComponent

Input
config	WavesurferConfig	required
trimRegionOptions	RegionParams	optional	You can customize the region's rectangle with the property color and the left & right handles with css styles in json format (camelCased styles)
demo	boolean	optional	to show a full example of the audio editor
Properties
audioDuration	number
audioTransform	AudioTransform		The resulting transform values from written by the editor that is up to the consumer's end how to apply an actual mutation to the original file.
isPlaying	boolean		treat this as readonly
isTrimmerEnabled	boolean		treat this as readonly
trimEnd	number		you may bind this with ngModel on your custom controls
trimStart	number		you may bind this with ngModel on your custom controls
isDownloadingFile	boolean		This becomes true when a file type string is fed into the reset which treats the value as a URL and proceeds to download the file. By default, and when the download ends, this is false. You may reuse this and mutate its value accordingly when you do your own download script before feeding reset a Blob or File.
Methods
reset(file?: File | Blob | string | null, transform?: AudioTransform)	void		Initializes/Resets the component with the the given file and transform values. Note that if file is of type string, a regular fetch(url) will be invoked to download the file and load it into the editor.
playpause()	void		Play/pause audio.
stop()	void		Stops playing audio. Returns progress cursor back to the beginning of the audio or the trimStart.
toggleTrimmer()	void		Enables/Disables the trim feature. Note that this must be invoked to enable the trim feature either programmatically or by user action before trimming functions below are called.
trimFromBeginning()	void		Moves the trim Region's left handle to the beginning of the audio.
trimToEnd()	void		Moves the trim Region's right handle to the end of the audio.
setTrimStart(value: number)	void		Moves the trim Region's left handle to the given value in seconds.
setTrimEnd(value: number)	void		Moves the trim Region's right handle to the given value in seconds.
onTrimStartKeyDown(event: KeyboardEvent)	void		A keydown event handler for when you create an input[type=number] intended for setting the trimStart. It will check for event.key's 'ArrowUp' and 'ArrowDown and will increment or decrement the current value by 1 second. The default browser behavior, input[step=1], rounds up the current value (if float) to the next integer (e.g. 2.6 , next value on ArrowUp is 3 instead of 3.6). I personally don't like it and want to make the next increment/decrement not modify the present decimal numbers. This may be further improved to allow a decimal number increment using Ctrl + ArrowUp. But I will leave it to you and you may create a pull request for this.
onTrimEndKeyDown(event: KeyboardEvent)	void		The same as above for a custom input[type=number] for trimEnd.

WavesurferConfig

 type WavesurferConfig = Pick<WaveSurferParams, Exclude<keyof WaveSurferParams, 'container' | 'plugins'>>;  

AudioTransform

interface AudioTransform {
  trimStart?: number;
  trimEnd?: number;
  // more edit features in the future (🤞 hopefully)
}

Contributing

Known Issues/Limitations

1. Component can be improved to enable the consumer to provide information how to fetch the file in type string instead of a regular fetch(url) call. (This is least prio since the consumer side can do the download itself before feeding a File or a Blob to the reset function).
2. Component does not actually manipulate and return an actual edited audio. It only returns soft values that are up to the consumer on how to use it and apply to mutate the original file.
3. Component is not opened yet to accept more Wavesurfer plugins that are up to consumer's freedom to configure and integrate.
4. Component can only trim the audio. We need more editing features.
5. Other limitations/bugs (Please file an Issue)

Development

Run ng serve and npm run watch on separate terminals.