Build a FFMPEG WASM Audacity Clone Audio Editor to Trim & Apply Effects in Browser Using HTML & JS
Jun 26, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-ffmpeg-wasm-audacity-clone-audio-editor-to-trim-apply-effects-in-browser-using-html-js/
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:03
uh hello guys welcome to this uh video
0:05
So in this video I will show you a audio
0:08
editor that I developed inside the
0:10
browser and it is deployed on my website
0:14
as well freemediatools.com You can check
0:16
out it's has all the effects of a
0:20
typical audio editor It's Audacity clone
0:23
you may say Audacity is a very popular
0:28
audio editor for Windows but this works
0:30
in the browser I built it using HTML CSS
0:33
and JavaScript So you can check out this
0:35
tool
0:36
freemediatools.com/ultimateauudioeditor
0:40
So it is using ffmppg in the background
0:43
and uh this is the UI interface So here
0:45
you will load your MP3 file or wave file
0:48
any sort of audio file and then it will
0:51
initialize the ffmppg library and then
0:54
construct the timeline of the audio So
0:56
here you can perform all the basic
0:58
operations such as you can trim a
1:00
portion of the audio This is the
1:02
timeline that it constructs right here
1:05
and if you just want to export you can
1:08
web application or local host So it's a
1:11
single stat So we have the play and the
1:14
stop button and we have this typical
1:15
timeline So if you just want to ex trim
1:19
out this portion of the video you can do
1:22
this using the timeline and then we have
1:24
these button here export audio So what
1:26
it will do is will trim out that portion
1:29
and it will download the audio file So
1:31
this is all happening on the browser
1:33
side No server side you see running this
1:36
single no server side code is involved
1:40
Then on the left hand side you will see
1:42
all these audio effects which are there
1:44
Here you can adjust the volume of the
1:46
original audio by using these slider If
1:49
you want to increase the volume you can
1:51
even do that as well
1:54
or decrease the audio
2:00
So you can see running
2:03
So after you adjust it you just need to
2:06
click this button here preview effects
2:08
So just need to and now so you can see
2:12
running this web application
2:15
and here we can adjust the reverb effect
2:18
here We can enable this as well We can
2:21
adjust the speed of the audio as well We
2:24
can using using the slider If I apply
2:27
this effect this video I'll show you
2:30
this video I'll show you You can see
2:33
that So using the slider here
2:40
so in this easy way you can adjust all
2:43
these features
2:45
So if you need the full source code of
2:47
this application the link is given in
2:49
the description guys
2:52
You can directly purchase the full
2:53
source code After purchasing it you will
2:56
get this uh zip file which will contain
2:58
these two folders This is the main file
3:01
which is your index HTML file So this is
3:04
your audio editor
3:07
It's almost I think it's 757 lines of
3:11
code here and we actually compiled all
3:15
the ffmpg binaries fmpg web assembly
3:18
binaries So this will be the source code
3:21
you will get You can simply run this
3:23
local host as well Simply open this
3:26
project locally
3:29
So again you repeat the process You
3:31
actually import the audio file and then
3:35
we can even apply
3:37
pitch We have the pitch filter right
3:40
here You can increase the pitch of the
3:42
audio
3:44
So it will apply this to the whole audio
3:47
file
3:53
Uh hello guys welcome to this video So
3:55
in this video I'll show you I So you can
3:57
see you can take any audio song as well
4:00
any music
4:03
You can lower the pitch here as well It
4:06
is all happening due to FMPG library
4:09
that we are using it
4:12
Uh hello guys welcome to this video So
4:14
in this video I'll show you I basic so
4:17
all these effects are there We have the
4:18
fading effect noise reduction as well
4:21
You can actually reduce this noise here
4:24
if you have background noise You have
4:26
reverb effect as well which is very much
4:29
useful
4:32
So you can basically try out this bass
4:35
effect all these it's advanced audio
4:38
editor that I developed can before
4:40
purchasing it you can check out this on
4:42
my website and then you can you will get
4:46
the full source code here
4:49
So if you're interested you can purchase
4:50
it Thank you very much for watching this
4:53
uh live stream
#Music & Audio
#Online Media
#Multimedia Software
