js如何在浏览器中分割和裁剪音视频文件保存下载？
网友回复
使用ffmpeg.js实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音视频分割与裁剪</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
button { margin: 5px; padding: 8px 16px; }
#output { margin-top: 20px; }
</style>
</head>
<body>
<h1>音视频分割与裁剪</h1>
<input type="file" id="fileInput" accept="audio/*,video/*" />
<br />
<h3>裁剪</h3>
<label>开始时间 (秒): <input type="number" id="startTime" value="10" min="0" /></label>
<label>持续时间 (秒): <input type="number" id="duration" value="20" min="1" /></label>
<button onclick="trimFile()">裁剪文件</button>
<h3>分割</h3>
<label>分割间隔 (秒): <input type="number" id="segmentTime" value="10" min="1" /></label>
<button onclick="splitFile()">分割文件</button>
<div id="output"></div>
<!-- 通过 CDN 加载 ffmpeg.wasm -->
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.10.1/dist/ffmpeg.min.js"></script>
<script>
const { createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true }); // 初始化 ffmpeg 实例
let fileData = null; // 存储上传的文件数据
// 文件选择事件
document.getElementById('fileInput').addEventListener('change', async (e) => {
const file = e.target.files[0];
if (file) {
fileData = await file.arrayBuffer(); // 读取文件为 ArrayBuffer
alert('文件已加载，请选择裁剪或分割操作');
}
});
// 加载 ffmpeg
async function loadFFmpeg() {
if (!ffmpeg.isLoaded()) {
await ffmpeg.load();
console.log('ffmpeg.wasm 已加载');
}
}
// 裁剪文件
async function trimFile() {
const startTime = document.get...点击查看剩余70%
by 钱端世界
我知道答案，我要回答
私活外包
最新提问
如何编写一个chrome插件实现多线程高速下载大文件？
cdn版本的vue在网页中出现typeerror错误无法找到错误代码位置怎么办？
pywebview能否使用webrtc远程控制共享桌面和摄像头？
pywebview6.0如何让窗体接受拖拽文件获取真实的文件路径？
如何在linux系统中同时能安装运行apk的安卓应用？
python有没有离线验证码识别ocr库？
各家的ai图生视频及文生视频的api价格谁最便宜？
openai、gemini、qwen3-vl、Doubao-Seed-1.6在ui截图视觉定位这款哪家更强更准？
如何在linux上创建一个沙箱隔离的目录让python使用？
pywebview如何使用浏览器自带语音识别与webspeech 的api？
