Up next in 10
Build a React.js FFMPEG WASM to Build Audio Splitter or Cutter Timeline Editor in Browser Using TS
0 views
Jun 20, 2025
Buy the full source code of the application here: https://procodestore.com/index.php/product/build-a-react-js-ffmpeg-wasm-to-build-audio-splitter-or-cutter-timeline-editor-in-browser-using-ts/ Official Website: https://freemediatools.com
View Video Transcript
0:06
uh hello guys welcome to this live
0:08
stream so in this live stream I'll show
0:10
you a new tool that I deployed on my
0:12
website freemediatools.com
0:14
uh which is a very simple audio
0:17
audio trimmer kind of an audio editor
0:21
right here in the browser itself you can
0:23
check out this by visiting
0:24
freemediattools.com/auudtrimmer
0:28
and it's a very simple audio editor that
0:30
I developed inside ReactJS which
0:33
directly works in the browser we have a
0:35
simple select file button and you just
0:38
need to select your audio file this can
0:41
be in any extension MP3
0:45
so as I select the audio file you will
0:47
see it will construct this nice little
0:49
timeline waveform of the audio file and
0:53
then we have a bunch of buttons to play
0:55
the file stop it then today in this
0:59
tutorial I will basically show you after
1:01
purchasing we have this package mode so
1:04
as you can see it clearly show the
1:07
timeline the waveform of the audio file
1:11
and then we also have these two buttons
1:13
here to cut the audio or to download and
1:16
now it becomes very much easy to trim
1:18
out specific portion from your audio
1:20
file by using your mouse and simply
1:22
selecting let's suppose you want to
1:24
select this portion of in the audio file
1:27
you can adjust it using this nice little
1:30
timeline
1:31
and then we have this button of cut so
1:34
as soon as you click the cut button it
1:36
will cut out this or trim out this
1:38
specific portion of the audio and you
1:40
can see 36 second and now you want to
1:43
play download latest version of node so
1:47
then we have the download button uh to
1:49
download the trimmed audio so you can
1:51
check out this tool i have deployed this
1:53
so it's a very simple tool which
1:56
directly runs in the browser node
1:59
and if you want the full source code of
2:01
this application the link is given in
2:03
the description you can directly
2:04
purchase it so it's a React project the
2:08
whole application is divided into
2:10
multiple components as you can see
2:12
inside Typescript
2:14
and if I show you the package.json file
2:17
it's coded inside ReactJS the latest
2:20
version of React which is 18 and for
2:22
this we also use Tailwind CSS as well
2:25
and uh we are using you can see FMPG web
2:28
assembly library to construct the
2:31
timeline of the audio files so once you
2:36
get the source code it will be easy for
2:37
you to modify the source code or add
2:39
additional features on top of it as well
2:41
so the link is given in the description
2:45
and you will be automatically redirected
2:47
to Google Drive after the payment is
2:49
done and once you get the source code
2:53
it's very easy to run first of all you
2:55
say npmi so this will install all the
2:57
NodeJS modules and then it will create
2:59
this folder as well after that you
3:02
simply say npm rundev so this will start
3:05
the development server and start this
3:08
application locally
3:10
so if I say we are now running this
3:12
application locally right here if I
3:15
refresh again you repeat this process
3:18
you select your MP3 file then it will
3:21
construct the timeline that's why I told
3:23
you then you trim out specific portion
3:26
simply select the portion that you want
3:28
to trim out and then click the cut
3:30
button so it's really fast as you can
3:33
see it's directly runs in the browser no
3:36
serverside code is involved and then you
3:39
click the download button
3:44
so simple audio editor you may say audio
3:46
trimmer with live timeline waveform
3:50
so if you are interested in this project
3:52
guys the link is given in the
3:53
description and also check out my
3:56
website which is freemediatools.com
4:00
uh which contains
4:02
uh thousands of tools related to audio
4:04
video and image
4:08
and I will be seeing you in the next
4:11
live stream