js实现浏览器中提取mp4视频音频导出下载代码-html代码-BFW代码库

js实现浏览器中提取mp4视频音频导出下载代码

代码语言：html

所属分类：多媒体

代码描述：js实现浏览器中提取mp4视频音频导出下载代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频声音提取器</title>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;600;700;900&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        :root {
            --bg: #08090e;
            --bg2: #0d0f16;
            --card: #11131c;
            --card2: #161923;
            --border: #1e2235;
            --border2: #2a2e48;
            --fg: #e4e8f1;
            --muted: #5e6585;
            --accent: #ff8c42;
            --accent2: #ffb347;
            --accent-dim: rgba(255,140,66,0.1);
            --accent-glow: rgba(255,140,66,0.35);
            --green: #34d399;
            --green-dim: rgba(52,211,153,0.1);
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family:'Noto Sans SC',sans-serif;
            background:var(--bg);
            color:var(--fg);
            min-height:100vh;
            overflow-x:hidden;
        }
        .mono { font-family:'JetBrains Mono',monospace; }

        /* 背景 */
        .bg-layer {
            position:fixed; inset:0; z-index:0; pointer-events:none;
            background:
                radial-gradient(ellipse 600px 500px at 15% 10%, rgba(255,140,66,0.06), transparent),
                radial-gradient(ellipse 500px 400px at 85% 80%, rgba(255,179,71,0.04), transparent),
                radial-gradient(ellipse 300px 300px at 50% 50%, rgba(52,211,153,0.02), transparent);
        }

        /* 网格纹理 */
        .grid-pattern {
            position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.03;
            background-image:
                linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 60px 60px;
        }

        .main-wrap { position:relative; z-index:1; max-width:980px; margin:0 auto; padding:32px 20px 80px; }

        /* 上传区 */
        .drop-zone {
            border:2px dashed var(--border2);
            border-radius:20px;
            background:linear-gradient(135deg, var(--card) 0%, var(--card2) 100%);
            transition:all .35s ease;
            cursor:pointer;
            position:relative;
            overflow:hidden;
        }
        .drop-zone::before {
            content:''; position:absolute; inset:0;
            background:radial-gradient(circle at 50% 50%, var(--accent-dim), transparent 70%);
            opacity:0; transition:opacity .35s;
        }
        .drop-zone:hover, .drop-zone.drag-over {
            border-color:var(--accent);
            transform:translateY(-2px);
            box-shadow:0 8px 40px rgba(255,140,66,0.08);
        }
        .drop-zone:hover::before, .drop-zone.drag-over::before { opacity:1; }

        /* 视频/音频容器 */
        .media-panel {
            background:var(--card);
            border:1px solid var(--border);
            border-radius:16px;
            overflow:hidden;
        }
        .media-panel video, .media-panel audio {
            display:block; width:100%; background:#000;
        }

        /* 波形 */
        .waveform-box {
            background:var(--bg2);
            border:1px solid var(--border);
            border-radius:14px;
            overflow:hidden;
            position:relative;
        }
        #waveCanvas { display:block; width:100%; }

        /* 标签 */
        .tag {
            display:inline-flex; align-items:center; gap:6px;
            padding:5px 14px; border-radius:8px;
            font-size:13px; font-weight:600;
        }
        .tag-orange { background:var(--accent-dim); border:1px solid rgba(255,140,66,0.2); color:var(--accent); }
        .tag-green { background:var(--green-dim); border:1px solid rgba(52,211,153,0.2); color:var(--green); }
        .tag-muted { background:rgba(94,101,133,0.1); border:1px solid v.........完整代码请登录后点击上方下载按钮下载查看