Up next in 10
Build a FFMPEG WASM Images to Slideshow Video Editor With Audio in Browser Using HTML & JavaScript
Jun 25, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-ffmpeg-wasm-images-to-slideshow-video-editor-with-audio-in-browser-using-html-javascript/
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:02
uh hello guys welcome to this video So
0:05
in this video I will show you a new tool
0:07
that I deployed on my website uh which
0:10
lets you convert your images into a
0:13
slideshow or a video and you can even
0:16
mix audio as well So this is the tool
0:19
which is developed in HTML CSS and
0:22
JavaScript No serverside code is
0:24
involved This editor directly runs in
0:26
the browser We have used ffmpg web
0:29
assembly library So the interface looks
0:32
something like this So it is also
0:34
deployed on my website free media tools
0:36
as well So just go to this tool right
0:40
here It's called as images to video
0:42
maker
0:44
So the interface looks something like
0:46
this You drag and drop multiple images
0:49
that needs to be there in the slideshow
0:52
Let me select these four images As I
0:55
select these four images you will see
0:56
for each image you can control the
0:58
amount of duration it appears in the
1:01
video using the slider So by default it
1:04
will appear for 3 seconds each image You
1:08
can even provide individual audio as
1:10
well for this image
1:13
So then we also have the option to add a
1:16
background music or audio file
1:20
Let me add this by choosing an MP3 file
1:24
And then we can control the audio of
1:26
this MP3 file using this slider And then
1:29
at the bottom side you will see this
1:31
button here of generate preview So as
1:34
soon as you click the generate preview
1:35
button the fmpg processing will start
1:38
and this
1:40
uh it will show you this progress bar
1:42
and once the processing is complete you
1:45
will see this message that your preview
1:46
has generated successfully in this video
1:49
player
1:50
and if I play this video hello guys
1:52
welcome to this video So in this video I
1:54
will show you a Canva clone remove
1:57
background from image kind of offline
1:59
editor that I developed inside HTML and
2:01
JavaScript as so as you can see each
2:03
image appears for 3 seconds and also the
2:06
background audio is also there which is
2:08
my voice recording you can put any
2:10
background music any song and then you
2:13
can download this video this MP4 video
2:18
So uh hello guys welcome to this video
2:21
So in this video I will show you a
2:24
capline editor that I downloaded So you
2:26
can try out this tool uh
2:28
freemediatools.com/im
2:30
imagestovideo editor If you need the to
2:32
purchase the source code of this project
2:34
the link is given in the description and
2:37
once you purchase it this is a single
2:39
index html file there
2:43
So all these uh binaries of fmpp web
2:47
assembly I compiled this into a single
2:49
folder This will be the complete
2:51
directory structure of the source code
2:53
files you will get after that you
2:55
purchase it automatically from Google
2:57
drive So this is the entirety of the
3:00
editor
3:01
It's almost 638 lines of code here So
3:05
you can easily modify it and also look
3:07
at how I built this editor and also run
3:10
this locally as well So it's easy to
3:12
deploy as well So you can see now we are
3:15
running it on local host Again you
3:17
repeat the process You select your bunch
3:19
of images Let me select these five
3:22
images
3:23
And then you can put your background
3:25
music MP3 file and then click generate
3:29
preview Instantly your video will be
3:31
created It's very good tool for content
3:33
creators that want to generate uh videos
3:38
such as the slideshow videos which you
3:41
can see that uh hello guys welcome to
3:43
this video So in this video I will show
3:45
you a Canva Then you can download this
3:49
video inside your machine So without any
3:51
editor you can do this entirely in the
3:53
browser itself and uh you can mix audio
3:57
and images and create a simple MP4 video
4:01
So you can try out this tool The link is
4:03
given in the description and then if you
4:05
need to get the source code you can
4:08
directly purchase it and you will get
4:10
this full source code
4:14
So you can see that So it's entirely
4:16
inside HTML CSS and JavaScript No site
4:19
no serverside code is involved So the
4:23
hosting will also be very easy if you
4:25
want to host this tool later on after
4:27
making some changes And as you can see
4:29
we are using ffmpg web assembly If you
4:32
don't know about ffmpg it's a command
4:34
line processing library Originally it is
4:38
designed for command line but there is a
4:40
solution which is fmpp web assembly
4:42
which makes it possible to use it
4:44
directly in the browser
4:46
So essentially we are using this to make
4:50
this application directly in the browser
4:54
to make these videos from images and
4:56
audio And thank you very much for
4:58
watching this video and I will be seeing
5:01
you guys in the next live stream