Mp4Muxer实现本地视频与声音音乐音频文件合并导出mp4视频代码-html代码-BFW代码库

Mp4Muxer实现本地视频与声音音乐音频文件合并导出mp4视频代码

代码语言：html

所属分类：多媒体

代码描述：Mp4Muxer实现本地视频与声音音乐音频文件合并导出mp4视频代码，可选择保留原视频声音或使用新的音频，或者混音输出新的视频。这个是以视频时长为准来合成新视频，音频自动截断满足视频时长。

代码标签： Mp4Muxer 本地视频声音音乐音频文件合并导出 mp4 视频代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>本地视频 + MP3 合并（可保留/替换/混音）</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<style>
  :root{--bg:#f5f5f5}
  body{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);margin:0;padding:18px;color:#111}
  h1{margin:0 0 12px;font-size:20px}
  .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
  label{display:block;font-size:14px}
  input[type=file]{display:block}
  button{padding:.6rem 1rem;font-size:14px;border-radius:8px;border:1px solid #ccc;background:#fff;cursor:pointer}
  button:disabled{opacity:.5;cursor:not-allowed}
  video{background:#000;max-width:100%;border-radius:6px}
  .notice{font-size:13px;color:#666}
  .controls{margin:8px 0}
  #canvasPreview{display:none}
  .out{margin-top:12px}
  .small{font-size:13px;color:#555}
  .danger{color:#b30}
  .success{color:#0a0}
  a.download{margin-left:12px}
</style>
</head>
<body>
  <h1>本地视频 + MP3 合并（支持保留/替换/混音）</h1>

  <div class="row">
    <div>
      <label>选择视频（含或不含原声）：</label>
      <input id="videoFile" type="file" accept="video/*">
    </div>
    <div>
      <label>选择 MP3（用于替换或混音）：</label>
      <input id="audioFile" type="file" accept="audio/*,audio/mpeg">
    </div>
  </div>

  <div class="row controls">
    <label style="margin-right:12px">音频处理方式：</label>
    <label><input type="radio" name="mode" value="replace" checked> 用 MP3 替换（如果未选 MP3 则无声）</label>
    <label><input type="radio" name="mode" value="mix"> 混音（视频原声 + MP3）</label>
    <label><input type="radio" name="mode" value="keep"> 仅保留视频原声（忽略 MP3）</label>
    <label><input type="radio" name="mode" value="silent"> 无声视频</label>
  </div>

  <div class="row">
    <button id="startBtn" disabled>开始合成</button>
    <a id="download" class="download" download="merged_video.mp4">下载（合成后出现）</a>
    <div class="notice small">注意：需在支持 WebCodecs 的现代 Chromium 浏览器中使用（Chrome/Edge 的新版本）。音频将按视频时长截断。</div>
  </div>

  <div class="out">
    <div style="display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start">
      <div>
        <label>合成预览：</label><br>
        <video id="preview" controls width="640" height="360"></video>
      </div>
      <div style="min-width:240px">
        <p class="small">视频.........完整代码请登录后点击上方下载按钮下载查看