Mp4Muxer实现canvas动画+本地音频mp3声音合并输出mp4视频代码-html代码-BFW代码库

Mp4Muxer实现canvas动画+本地音频mp3声音合并输出mp4视频代码

代码语言：html

所属分类：多媒体

代码描述：Mp4Muxer实现canvas动画+本地音频mp3声音合并输出mp4视频代码

代码标签： Mp4Muxer canvas 动画本地音频 mp3 声音合并输出 mp4 视频代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>本地MP3+Canvas合成MP4（音视频同步版）</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<style>
body{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f5f5f5;margin:0;padding:2rem}
h3{margin-top:0}
button{padding:.6rem 1.2rem;font-size:1rem}
input[type=file]{margin:.5rem 0}
video{width:320px;height:240px;background:#000}
</style>
</head>
<body>

<h3>1. 选择本地 MP3</h3>
<input id="audioFile" type="file" accept="audio/mp3,audio/mpeg"/>

<h3>2. 合成 MP4</h3>
<button id="generate" disabled>开始合成</button>
<a id="download" download="video.mp4" style="margin-left:1rem;">下载</a>

<br/><br/>
<video id="video" controls width="600" height="400"></video>
<p class="time">
  视频.........完整代码请登录后点击上方下载按钮下载查看