Up next in 10
Build a Vue.js Audio Timeline Editor to Trim & Split Using FFMPEG WASM & Web Audio API in Browser
Mar 5, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-vue-js-audio-timeline-editor-to-trim-split-using-ffmpeg-wasm-web-audio-api-in-browser/
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to the Vue.js
0:03
project of audio splitter or audio
0:06
editor for actually splitting and
0:08
trimming your audio files directly in
0:09
the browser. So we are running this Vue
0:11
project on local host 5173 and there are
0:15
two options for splitting the audio.
0:17
First option is using this web audio API
0:20
and the second one is fmpp web assembly.
0:23
So this actually is the interface of the
0:25
application completely responsive and
0:28
you can either use any of these options.
0:30
So let me use fmpp web assembly. So as
0:32
soon as you do this the interface of the
0:34
application something looks like this.
0:36
You actually select your audio file to
0:39
actually trim and split. So right here
0:42
you will select the audio file and right
0:45
here the audio will play.
0:48
It will construct the actual waveform of
0:51
the audio.
0:54
So if I click the play button,
0:58
let me turn off turn on the audio. So if
1:01
you want to purchase the source code of
1:03
this project, the link is given in the
1:05
description. You can directly purchase
1:06
it. After purchasing it, you will get
1:08
the source code from Google Drive. So
1:10
this is essentially the full directory
1:12
structure of the project. So you will
1:14
see each component is coded directly in
1:17
uh the view files and you can add more
1:21
features and also you can modify the
1:24
source code once you get this. So these
1:26
are set of commands here for running the
1:28
project dev the build commands as well
1:31
for deploying the project and we are
1:33
using the latest version of view FM fmpg
1:37
web assembly library we are also using
1:40
and uh
1:43
now this actually you can actually split
1:47
by simply clicking on the actual
1:50
timeline. So right here you play the
1:53
>> Today in this tutorial I will be
1:55
introducing to a new offline PDF editor
1:58
which is built inside purely in Java
2:00
then play pause everything and
2:05
you can just adjust its position. You
2:09
can press the mouse just wherever. So as
2:13
soon as you change it the duration
2:15
starting and the ending duration will
2:16
change. So another another segment you
2:20
want to do simply click on that to add
2:23
the split point and you can long press
2:26
it to adjust it. So it will create these
2:29
little mini segments of the audio and
2:32
you can preview this as well by clicking
2:34
the preview button
2:41
and then you simply click this button
2:43
generate and download all segments. So
2:46
now MPG will individually download all
2:49
these segments.
2:51
All the processing directly happens in
2:53
the browser. It's a single page client
2:55
side kind of an application. So there is
2:57
no back end or server side.
3:00
So you can click clear all to actually
3:02
clear out all the segments.
3:06
Uh hello friends. Today in this tutorial
3:08
I will be introducing to a new offline
3:10
P. So it's really simple. You will see
3:13
that
3:21
you can adjust this timeline.
3:26
So this is the first way. So now if you
3:29
want to use the web audio API method,
3:32
this also is the again you repeat the
3:35
process. you select the audio file and
3:37
this time it will construct the waveform
3:41
by using the web audio API. So you will
3:43
see that now you can play this. Uh hello
3:45
friends today in this tutorial I will be
3:47
introducing to a new offline PDF editor
3:49
which is built inside purely in
3:51
JavaScript using swelt.
3:54
Again you do the same thing just
3:56
wherever you need to split you click
3:58
[snorts] and long press you can adjust
4:00
the position of it as well. So now it
4:03
will again click these create these many
4:05
segments. Again you click the download
4:07
button to download those segments. So
4:09
now this time it's using the web audio
4:11
API. The previous one was using this
4:15
ffmpg web assembly library to actually
4:18
execute ffmpg directly in the browser.
4:21
This is actually using the web audio API
4:24
for actually constructing this waveform
4:26
that you see. And this makes it easy for
4:29
you to trim and split your long audio
4:32
files.
4:34
So essentially this is the application.
4:37
You can easily purchase it. If you still
4:40
face any issues, I you can message me. I
4:42
will definitely help you in running this
4:44
project. And if you're looking forward
4:47
for building a view editor in FMPPG,
4:51
this will be a great starting point. It
4:53
will save you a lot of time and you can
4:56
later on can add more features on top of
4:58
this project as well. So these are all
5:02
the components which are pre-coded by me
5:05
from scratch.
5:07
So you can easily edit these features or
5:11
edit the design as well. So
5:15
you can first of all as you load the
5:17
application it actually loads this ffmpg
5:21
web assembly library. So as soon as you
5:23
load the application it actually loads
5:25
this library. So once it loads this
5:27
successfully then the application start
5:30
and then you select your audio file and
5:33
in a matter of seconds you can actually
5:36
split your and trim out trim out the
5:39
necessary portion of your audio. Uh as
5:42
you click generate so all the segments
5:45
will get downloaded. So you'll see that.
5:47
So this application will save you a lot
5:50
of time as well. So many of times you do
5:53
need to split and trim your audio files.
5:55
So this is really useful application.
5:59
The interface is uh very much
6:01
responsive. So it will definitely work
6:04
on all devices as well. So
6:07
the link is given guys. You can directly
6:09
purchase the source code of this project
6:12
and uh
6:17
specifically Vue.js project as well. So
6:19
it's a really popular framework.
6:23
It's really fast as well. It doesn't
6:25
take too much time. As you select the
6:27
audio file, it instantly creates the
6:29
waveform.
6:36
The interface is quite simple. So
6:39
uh hello friends. Today in this tutorial
6:50
So these are two methods which are used.
6:53
First is fmpp web assembly and web audio
6:56
API. So both the methods works
7:00
perfectly. But uh so this is a great
7:03
thing I implemented both the methods. So
7:06
that's why.
7:08
So this is the project guys. Definitely
7:10
check it out.