Up next in 10
Build a React.js Audio Cutter Timeline Editor Using FFMPEG WASM in Browser Web App in TypeScript
1K views
Jun 20, 2025
Buy the full source code of application here: https://procodestore.com/index.php/product/build-a-react-js-audio-cutter-timeline-editor-using-ffmpeg-wasm-in-browser-web-app-in-typescript/ Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
View Video Transcript
0:03
uh hello guys welcome to this live
0:05
stream so in this live stream I'll show
0:06
you a audio editor that I developed uh
0:10
right in the browser itself using
0:11
ReactJS and I've also deployed this on
0:14
my website as well
0:15
freemediatools.com/auudtrimmer
0:19
you can go and actually test out this
0:21
application it's a very simple audio
0:24
editor where you can trim out the
0:26
portion of the audio that you want to
0:28
save
0:30
so very simple interface you select any
0:32
audio file it can be of any extension so
0:35
let me select a output.mpp3 file so as
0:39
you can see here it will actually show
0:41
you a waveform of uh the MP3 file here
0:47
we have different options we can play
0:48
the audio file by clicking the play
0:50
button code you will get file simple
0:52
software with the latest version create
0:54
these node modules so this is a nice
0:57
little timeline editor where it actually
0:59
have all the options it actually shows
1:01
you in which the current time here the
1:05
total length of the audio and then we
1:07
also see this uh waveform
1:10
and then we also have these two buttons
1:12
here in order to cut the audio or
1:14
download the audio now let's suppose if
1:17
you want to actually
1:19
version it which is the latest save this
1:21
portion you basically use your mouse and
1:24
simply select this portion and now it
1:27
will select this portion right here so
1:29
now let's suppose you want to cut this
1:31
portion of this audio
1:33
by using your mouse you select whichever
1:36
portion that you want to inside the
1:38
timeline then we have this button of cut
1:41
as soon as you click the cut button your
1:43
audio will be cut
1:46
and now you will see this 31 seconds
1:48
inside the audio is cut successfully and
1:51
now you can see my curry as well as
1:55
cross platform so then we can download
1:58
this trimmed audio that you and now you
2:01
will see your output file will be
2:03
downloaded so it's a very simple audio
2:06
editor directly executing it in the
2:08
browser using fmpg web assembly library
2:12
and this is a simple ReactJS project and
2:15
if you are interested in the source code
2:17
of this project the link will be given
2:19
in the description of the video you can
2:21
directly go to it and purchase it once
2:24
you successfully purchase it you will
2:27
get a zip file automatically from Google
2:30
Drive which will have the source code
2:33
you can see the whole application is
2:35
divided into multiple components each
2:37
component is coded inside TypeScript
2:43
and let me show you the package.json
2:45
file as you can see we are using the
2:47
latest version of React which is React
2:49
18 and we also use Tailwind CSS for the
2:52
user interface and this FMPG web
2:54
assembly library for constructing this
2:57
audio editor so once you get the source
3:01
code you will be able to modify it and
3:03
add additional features on top of it so
3:07
now to run it it's very simple go to the
3:10
terminal simply say npmi so this will
3:12
install all the NodeJS modules which are
3:14
mentioned in package.json
3:17
and then you simply say npm rundev so
3:19
this will start a simple development
3:21
server locally
3:23
and now you can open your browser so if
3:26
I open this locally right here you will
3:28
see this application again you select
3:31
your audio file and then it will
3:34
construct this nice little timeline
3:36
waveform of the audio and here you can
3:39
play this which will look something like
3:41
this you can even control the audio as
3:44
well to dash master and you just
3:49
so you can control the audio as well you
3:51
can repeat this and we can stop play
3:56
you have right click and then if you
3:58
want to trim out specific portion you
4:00
use your mouse and simply select the
4:02
portion and then click the cut button
4:05
this will cut out that specific portion
4:07
the Windows that's and it basically
4:10
basically this is very simple very fast
4:11
as well and you don't need any third
4:14
party
4:16
desktop software you can use it in the
4:18
web and then click the download button
4:21
it will download that specific trimmed
4:23
out audio with the Windows line so if
4:26
you're interested guys in the source
4:28
code of this you can go to the
4:30
description link and directly purchase
4:32
it uh the link is given in the
4:34
description and
4:38
You can first of all try this tool uh in
4:40
the check out page I've given the demo
4:42
so first of all try this by visiting
4:44
this URL and just try this tool if you
4:46
are interested then you can purchase it
4:49
and also check out my website for more
4:52
tools which is freemediatools.com
4:55
which contains unlimited number of tools
4:57
regarding audio video and image
5:02
and I will be seeing you
5:05
in the next video his video URL to MP4
5:08
converter or download
5:11
you can check out this website free
5:13
media tools it has all the tools related
5:15
to MP4 you can just see MP4 to MP3 video
5:20
to MP3 video converter as well so you
5:23
can check out this website
5:24
freemediatools.com
5:27
and I will be seeing you in the next
5:29
live stream
#Music & Audio
#Programming