视频提取音频 · 视频转MP3 - AI工具�?/title> <meta name="description" content="免费在线视频提取音频工具，视频转MP3，纯本地处理不泄露隐私，支持MP4/MOV/AVI/WEBM/FLV等格�?> <style> :root{--bg:#0a0a0f;--card:#14141f;--border:#1f1f35;--text:#e8e8f0;--text2:#7c7c9a;--text3:#5a5a72;--purple:#a78bfa;--green:#34d399;--orange:#fbbf24;--red:#f87171;--green:#10b981;--orange:#f59e0b;--red:#ef4444} *{margin:0;padding:0;box-sizing:border-box} body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh} .nav{background:var(--card);border-bottom:1px solid var(--border);padding:0 20px;display:flex;align-items:center;height:56px;gap:16px} .nav a{color:var(--text2);text-decoration:none;font-size:.9rem} .nav a:hover{color:var(--text)} .nav .logo{color:var(--purple);font-weight:700;font-size:1.1rem} .container{max-width:900px;margin:0 auto;padding:32px 20px 60px} h1{font-size:1.8rem;margin-bottom:8px} .subtitle{color:var(--text2);margin-bottom:32px} .upload-zone{border:2px dashed var(--border);border-radius:16px;padding:60px 20px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:24px} .upload-zone:hover,.upload-zone.drag-over{border-color:var(--purple);background:rgba(167,139,250,.05)} .upload-zone .icon{font-size:48px;margin-bottom:12px} .upload-zone p{color:var(--text2);font-size:.9rem} .upload-zone input{display:none} .workspace{display:none} .workspace.active{display:block} .file-info{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .file-info .thumb{width:48px;height:48px;background:var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0} .file-info .detail{flex:1;min-width:0} .file-info .name{font-weight:600;word-break:break-all} .file-info .meta{color:var(--text2);font-size:.85rem;margin-top:4px} .quality-options{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:20px} .quality-options label{display:block;color:var(--text2);font-size:.8rem;margin-bottom:8px} .radio-group{display:flex;gap:12px;flex-wrap:wrap} .radio-card{flex:1;min-width:130px;padding:14px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:all .2s;text-align:center} .radio-card:hover{border-color:var(--purple)} .radio-card.selected{background:rgba(139,92,246,.1);border-color:var(--purple)} .radio-card .q-label{font-weight:600;font-size:.95rem} .radio-card .q-desc{color:var(--text2);font-size:.75rem;margin-top:4px} .radio-card .q-bitrate{color:var(--green);font-size:.72rem;margin-top:2px} .extract-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--purple),#7c3aed);border:none;border-radius:12px;color:#fff;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:16px;box-shadow:0 4px 20px rgba(139,92,246,.25)} .extract-btn:hover{transform:scale(1.01);box-shadow:0 6px 28px rgba(139,92,246,.35)} .extract-btn:active{transform:scale(.98)} .extract-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .progress-wrap{display:none;margin-bottom:20px} .progress-wrap.active{display:block} .progress-info{display:flex;justify-content:space-between;margin-bottom:6px;font-size:.85rem} .progress-info .status{color:var(--purple)} .progress-info .pct{color:var(--text2)} .progress-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden} .progress-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--green));width:0;transition:width .5s} .log-area{display:none;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:20px;font-family:monospace;font-size:.8rem;color:var(--text2);max-height:200px;overflow-y:auto;white-space:pre-wrap} .log-area.active{display:block} .result{display:none;text-align:center} .result.active{display:block} .result .preview-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px} .result .preview-wrap audio{width:100%;margin-top:12px} .result .wave-icon{font-size:3rem;margin-bottom:8px;display:block} .result .info{color:var(--text2);font-size:.85rem;margin-bottom:16px} .download-btn{display:inline-block;padding:12px 28px;background:var(--green);color:#000;text-decoration:none;font-weight:600;font-size:.95rem;border-radius:8px;transition:all .2s} .download-btn:hover{opacity:.9;transform:translateY(-1px)} .reset-link{color:var(--purple);text-decoration:none;font-size:.9rem;display:inline-block;margin-top:16px} .reset-link:hover{text-decoration:underline} .error-msg{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:12px;color:var(--red);font-size:.85rem;margin-bottom:20px;display:none} .error-msg.active{display:block} /* Loading spinner */ .loading-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(10,10,15,.85);z-index:999;justify-content:center;align-items:center;flex-direction:column} .loading-overlay.active{display:flex} .spinner{width:48px;height:48px;border:3px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:16px} @keyframes spin{to{transform:rotate(360deg)}} .loading-text{color:var(--text2);font-size:.9rem} @media(max-width:640px){.container{padding:16px 12px 40px}h1{font-size:1.4rem}.radio-group{flex-direction:column}.radio-card{min-width:auto}} </style> <script src="../../wx-browser-guard.js"></script></head> <body> <nav class="nav"> <a href="../../index.html" class="logo">�?AI工具�?/a> <a href="../../index.html">首页</a> <span style="color:var(--text2)">/</span> <span>视频提取音频</span> </nav> <div class="container"> <h1>🎵 视频提取音频 / 视频转MP3</h1> <p class="subtitle">从视频中提取音轨 · 纯本地处�?· 秒转MP3</p> <div class="upload-zone" id="uploadZone"> <span class="icon">🎬</span> <p>点击或拖拽视频文件到这里<br><small>支持 MP4 / MOV / AVI / WEBM / FLV / MKV / WMV �?/small></p> <input type="file" id="fileInput" accept="video/*"> </div> <div class="workspace" id="workspace"> <div class="file-info" id="fileInfo"></div> <div class="quality-options"> <label>音频质量</label> <div class="radio-group"> <div class="radio-card selected" data-quality="0"> <div class="q-label">🔊 高音�?/div> <div class="q-desc">VBR ~245 kbps</div> <div class="q-bitrate">-q:a 0</div> </div> <div class="radio-card" data-quality="2"> <div class="q-label">🎵 标准</div> <div class="q-desc">VBR ~190 kbps</div> <div class="q-bitrate">-q:a 2</div> </div> <div class="radio-card" data-quality="5"> <div class="q-label">📱 中等</div> <div class="q-desc">VBR ~130 kbps</div> <div class="q-bitrate">-q:a 5</div> </div> <div class="radio-card" data-quality="9"> <div class="q-label">📦 省空�?/div> <div class="q-desc">VBR ~65 kbps</div> <div class="q-bitrate">-q:a 9</div> </div> </div> </div> <button class="extract-btn" id="extractBtn">🎧 提取音频</button> <div class="error-msg" id="errorMsg"></div> <div class="progress-wrap" id="progressWrap"> <div class="progress-info"> <span class="status" id="progressStatus">加载�?..</span> <span class="pct" id="progressPct">0%</span> </div> <div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div> </div> <div class="log-area" id="logArea"></div> <div class="result" id="result"> <div class="preview-wrap"> <span class="wave-icon">🎶</span> <div style="color:var(--text2);font-size:.85rem;margin-bottom:4px">预览</div> <audio id="previewAudio" controls></audio> </div> <div class="info" id="resultInfo"></div> <a class="download-btn" id="downloadBtn" download="audio.mp3">⬇️ 下载 MP3</a> <br> <a href="javascript:location.reload()" class="reset-link">🔄 再提取一�?/a> </div> </div> </div>  <div class="loading-overlay" id="loadingOverlay"> <div class="spinner"></div> <div class="loading-text">正在加载音频引擎...</div> </div> <script> (function(){ const $=id=>document.getElementById(id); let videoFile=null, ffmpegEngine=null, selectedQuality=2; // Upload handlers $('uploadZone').addEventListener('click',()=>$('fileInput').click()); $('fileInput').addEventListener('change',e=>{if(e.target.files[0])loadVideo(e.target.files[0])}); $('uploadZone').addEventListener('dragover',e=>{e.preventDefault();$('uploadZone').classList.add('drag-over')}); $('uploadZone').addEventListener('dragleave',()=>$('uploadZone').classList.remove('drag-over')); $('uploadZone').addEventListener('drop',e=>{e.preventDefault();$('uploadZone').classList.remove('drag-over');if(e.dataTransfer.files[0])loadVideo(e.dataTransfer.files[0])}); function loadVideo(file){ videoFile=file; let ext=file.name.split('.').pop().toLowerCase(); $('fileInfo').innerHTML=` <div class="thumb">🎬</div> <div class="detail"> <div class="name">${file.name}</div> <div class="meta">${ext.toUpperCase()} · ${fmtSize(file.size)}</div> </div> `; $('uploadZone').style.display='none'; $('workspace').classList.add('active'); $('result').classList.remove('active'); $('errorMsg').classList.remove('active'); $('progressWrap').classList.remove('active'); } function fmtSize(b){return b<1024?b+'B':b<1048576?(b/1024).toFixed(1)+'KB':(b/1048576).toFixed(1)+'MB'} // Quality selection document.querySelectorAll('.radio-card').forEach(card=>{ card.addEventListener('click',()=>{ document.querySelectorAll('.radio-card').forEach(c=>c.classList.remove('selected')); card.classList.add('selected'); selectedQuality=parseInt(card.dataset.quality); }); }); // Logging function log(msg){ $('logArea').classList.add('active'); $('logArea').textContent+='['+new Date().toLocaleTimeString()+'] '+msg+'\n'; $('logArea').scrollTop=$('logArea').scrollHeight; } // Extract button $('extractBtn').addEventListener('click',startExtract); async function startExtract(){ let btn=$('extractBtn');btn.disabled=true; $('errorMsg').classList.remove('active'); $('result').classList.remove('active'); $('progressWrap').classList.add('active'); $('progressFill').style.width='0%'; $('progressPct').textContent='0%'; $('progressStatus').textContent='加载音频引擎...'; $('logArea').textContent=''; log('开始加�?FFmpeg.wasm 音频引擎...'); try { // Load FFmpeg if not already loaded if(!ffmpegEngine){ ffmpegEngine=await loadFFmpeg(); } $('progressStatus').textContent='读取视频文件...'; $('progressFill').style.width='5%'; $('progressPct').textContent='5%'; log('读取视频: '+videoFile.name+' ('+fmtSize(videoFile.size)+')'); let inExt=videoFile.name.split('.').pop().toLowerCase(); let inName='input.'+inExt; let data=new Uint8Array(await videoFile.arrayBuffer()); await ffmpegEngine.writeFile(inName, data); $('progressStatus').textContent='提取音频�?..'; $('progressFill').style.width='10%'; $('progressPct').textContent='10%'; let outName='audio.mp3'; // ffmpeg -i input.mp4 -vn -acodec libmp3lame -q:a 2 output.mp3 let args=['-i',inName,'-vn','-acodec','libmp3lame','-q:a',String(selectedQuality),outName,'-y']; log('执行: ffmpeg '+args.join(' ')); // Progress monitoring ffmpegEngine.on('progress',({progress})=>{ let pct=Math.min(99,10+Math.round(progress*89)); $('progressFill').style.width=pct+'%'; $('progressPct').textContent=pct+'%'; $('progressStatus').textContent='提取音频�?..'; }); ffmpegEngine.on('log',({message})=>{ if(message.trim()&&!message.includes('ffmpeg-core')) log(message.trim()); }); await ffmpegEngine.exec(args); $('progressFill').style.width='100%'; $('progressPct').textContent='100%'; $('progressStatus').textContent='�?提取完成�?; let outData=await ffmpegEngine.readFile(outName); log('输出音频大小: '+fmtSize(outData.length)); let blob=new Blob([outData.buffer],{type:'audio/mpeg'}); let url=URL.createObjectURL(blob); $('previewAudio').src=url; $('downloadBtn').href=url; $('downloadBtn').download=outName; $('resultInfo').innerHTML='格式: <strong>MP3</strong> · 文件大小: <strong>'+fmtSize(blob.length)+'</strong> · 质量等级: <strong>V'+selectedQuality+'</strong>'; $('result').classList.add('active'); // Cleanup temp files await ffmpegEngine.deleteFile(inName); await ffmpegEngine.deleteFile(outName); log('�?完成，临时文件已清理'); } catch(err){ log('�?错误: '+err.message); $('errorMsg').textContent='提取失败: '+err.message; $('errorMsg').classList.add('active'); $('progressStatus').textContent='提取失败'; } btn.disabled=false; } async function loadFFmpeg(){ // Show loading overlay $('loadingOverlay').classList.add('active'); log('正在下载 FFmpeg.wasm (~31MB)，请耐心等待...'); return new Promise((resolve,reject)=>{ // Check if already loaded by another tool if(window.FFmpegWASM){ initEngine(window.FFmpegWASM).then(resolve).catch(reject).finally(()=>$('loadingOverlay').classList.remove('active')); return; } if(document.getElementById('ffmpeg-script')){ // Script already loading, poll for it pollForFFmpeg().then(()=>initEngine(window.FFmpegWASM)).then(resolve).catch(reject).finally(()=>$('loadingOverlay').classList.remove('active')); return; } let script=document.createElement('script'); script.id='ffmpeg-script'; script.src='https://unpkg.com/@ffmpeg/ffmpeg@0.12.10/dist/umd/ffmpeg.js'; script.onload=()=>{ log('FFmpeg.wasm JS 加载完成'); initEngine(window.FFmpegWASM) .then(resolve) .catch(reject) .finally(()=>$('loadingOverlay').classList.remove('active')); }; script.onerror=()=>{ $('loadingOverlay').classList.remove('active'); reject(new Error('无法加载 FFmpeg.wasm，请检查网络连�?)); }; document.head.appendChild(script); }); } function pollForFFmpeg(){ return new Promise((resolve,reject)=>{ let attempts=0; let interval=setInterval(()=>{ attempts++; if(window.FFmpegWASM){ clearInterval(interval); resolve(); } else if(attempts>100){ clearInterval(interval); reject(new Error('FFmpeg.wasm 加载超时')); } },200); }); } async function initEngine(WASM){ let ffmpeg=new WASM.FFmpeg(); log('初始�?FFmpeg 引擎（单线程�?..'); await ffmpeg.load({ coreURL: 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd/ffmpeg-core.js', wasmURL: 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd/ffmpeg-core.wasm', }); log('�?FFmpeg 引擎就绪'); return ffmpeg; } })(); </script>  <div class="container"> <div class="related-tools"> <h3>🔗 你可能还需�?/h3> <div class="related-grid"> <a href="../video-convert/" class="related-card"> <span class="icon">🔄</span><span class="name">视频格式转换</span><span class="arrow">�?/span> </a> <a href="../video-to-gif/" class="related-card"> <span class="icon">🎞�?/span><span class="name">视频转GIF</span><span class="arrow">�?/span> </a> <a href="../video-watermark/" class="related-card"> <span class="icon">🏷�?/span><span class="name">视频去水�?/span><span class="arrow">�?/span> </a> <a href="../ai-video/" class="related-card"> <span class="icon">🤖</span><span class="name">AI视频生成</span><span class="arrow">�?/span> </a> </div> </div> </div> </body> </html>