M4S Merger Tool (Web) | 中文
✅ No Installation (Click-to-use) | No Data Upload | Bilingual (CN/EN) | Fast & Free
✅ Video Merging | Audio Merging | Audio & Video Muxing
✅ .M4S | .MP4 | .MP3
- 🌐 Online Version (Click-to-Use) ➡️ This Repo | https://github.com/MaxMiksa/M4S-Merger-Tools-Web
- 🖥️ Offline Version (Portable) ➡️ Desktop Counterpart | https://github.com/MaxMiksa/M4S-Merger-Tools
| Feature | Description |
|---|---|
| Zero Installation | Runs entirely in the browser. No need to download Python, FFmpeg, or executable files. |
| Privacy First | Files are processed locally using WebAssembly. Your media never leaves your device. |
| Modern UI/UX | Features an elegant "Dark SaaS" style with a frosted glass aesthetic. Supports Light, Dark, and System Default themes. |
| Flexible Merging | Supports merging video fragments, audio fragments separately, or muxing them into the final MP4. |
| Bilingual Support | Full support for Simplified Chinese and English (UI and logs). |
| Blazing Fast Processing | v2.0.0 Upgrade: Intelligent Stream Copy technology, boosting speed by 10x+. Defaults to Copy mode with automatic fallback for compatibility. |
1. Requirements & Limitations
- Browser: Requires a modern browser (Chrome, Edge, Firefox).
- SharedArrayBuffer: The server hosting this application must send the
Cross-Origin-Opener-Policy: same-originandCross-Origin-Embedder-Policy: require-corpresponse headers for FFmpeg WASM to function correctly. - Memory: Merging very large files may consume significant RAM, as the files need to be loaded into browser memory.
2. Development Stack
Packages & Frameworks:
- Core Framework: React 19 (
react,react-dom) - Build Tool: Vite (
vite) - Styling: Tailwind CSS v3 (
tailwindcss), PostCSS (postcss), Autoprefixer (autoprefixer) - Language: TypeScript (
typescript) - Icons: Lucide React (
lucide-react)
Interfaces & Services:
- FFmpeg WASM: The project uses the WebAssembly version of FFmpeg for in-browser video/audio processing.
- Core files are located in
public/scripts/ffmpeg/(ffmpeg.min.js,ffmpeg-core.js, etc.). - The service is encapsulated in
services/ffmpegService.ts, providing methods likeload()(load FFmpeg) andmergeFiles()(merge video/audio). - It interacts via the global
window.FFmpegobject (typical usage for FFmpeg WASM v0.11.x or similar versions).
- Core files are located in
Languages:
- TypeScript: (
.ts,.tsx) Primary development language. - HTML/CSS: (
.html,.css) Basic structure and styling.
3. Developer Guide
-
Clone the Repository
git clone https://github.com/MaxMiksa/M4S-Merger-Tools-Web.git cd M4S-Merger-Tool -
Install Dependencies
npm install
-
Start the Development Server
npm run dev
-
Open in Browser Visit
http://localhost:5173(or the port displayed in the terminal).
4. License
This project is licensed under the MIT License - see the LICENSE file for details.
Issues and Pull Requests are welcome!
For any questions or suggestions, please contact Zheyuan (Max) Kong (Carnegie Mellon University, Pittsburgh, PA).
Welcome to submit Issues and Pull Requests!
Any questions or suggestions? Please contact Max Kong (Carnegie Mellon University, Pittsburgh, PA).
Zheyuan (Max) Kong: kongzheyuan@outlook.com | zheyuank@andrew.cmu.edu