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" .........完整代码请登录后点击上方下载按钮下载查看