↓






Javascript Reel Maker

Champak Roy August 04, 2025

🎥 JavaScript Reel Maker – Make Reels Online

This simple Reel Maker lets you create vertical (9:16) image/video reels with overlay text and background music. You can export your creation as a GIF or MP4 (WebM) with just a few clicks!

This simple Reel Maker lets you create vertical (9:16) image/video reels with overlay text and background music.

👉 Hosted on GitHub Pages  |  Built by Champak

Explaining the Code

🎥 Build Your Own Reel Maker Using JavaScript (with Music + Export)

Want to create reels like Instagram or YouTube Shorts using your own images, video clips, and background music — right from your browser? Here's a step-by-step breakdown of how our JavaScript Reel Maker works, from file selection to exporting as GIF or MP4.

🔧 1. HTML Inputs

The app starts with file input options and a message box:

<input type="file" id="mediaInput" accept="image/*,video/*" multiple />
<input type="text" id="reelText" placeholder="Enter your message..." />
<input type="file" id="bgMusic" accept="audio/*" />
  • mediaInput: Upload multiple images or videos
  • reelText: Your custom message (e.g., “Happy Diwali 🎉”)
  • bgMusic: Background audio file (e.g., MP3)

🎨 2. CSS Styling

To simulate a reel-like look (9:16 format), we use the following styles:

.reel-container {
  width: 270px;
  height: 480px;
  background: black;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  animation: fadeZoom 1s ease;
}

.reel-overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  text-shadow: 1px 1px 3px black;
}

This ensures clean formatting, overlay text, and a fade-zoom animation.

⚙️ 3. JavaScript Logic

➡️ createReel()

Shows selected media one by one with the overlayed message.

function createReel() {
  const files = document.getElementById('mediaInput').files;
  const text = document.getElementById('reelText').value;
  const musicFile = document.getElementById('bgMusic').files[0];

  // Play optional music
  if (musicFile) {
    const reader = new FileReader();
    reader.onload = e => {
      const audio = new Audio(e.target.result);
      audio.play();
    };
    reader.readAsDataURL(musicFile);
  }

  // Show each media for 2 seconds
  ...
}

🎵 Plays audio

🖼️ Displays image or video

🖼️ 4. Export to GIF with gif.js

This uses a JavaScript library gif.js to compile selected images into a looping GIF.

const gif = new GIF({
  workers: 2,
  quality: 10,
  workerScript: "js/gif.worker.js"
});

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.fillText(text, 20, canvas.height - 30);
gif.addFrame(canvas, { delay: 2000 });

After rendering, the user can download:

link.download = 'reel.gif';

🎥 5. Export as MP4 using MediaRecorder

This draws slides onto a canvas, then records it:

const stream = canvas.captureStream(30);
const recorder = new MediaRecorder(stream);

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.fillText(text, 20, canvas.height - 30);

After rendering each frame:

const blob = new Blob(chunks, { type: 'video/webm' });
link.download = 'reel.webm';

🎶 6. Add Background Music to MP4

This combines the canvas video with music loaded via WebAudio:

const audioContext = new AudioContext();
audioContext.decodeAudioData(buffer, function(decodedBuffer) {
  const sourceNode = audioContext.createBufferSource();
  sourceNode.buffer = decodedBuffer;
  sourceNode.connect(audioDest);
  sourceNode.start();
});

Then merge both tracks:

const mixedStream = new MediaStream([
  ...videoStream.getVideoTracks(),
  ...audioSource.stream.getAudioTracks()
]);

The final MP4 (WebM) file includes music and visuals — perfect for sharing!

🚀 Live Demo (Try It Now!)

Built with ❤️ by Champak
View source on GitHub

Post a Comment

0 Comments

Me
↑