js实现浏览器中音频可视化裁剪导出下载代码-html代码-BFW代码库

js实现浏览器中音频可视化裁剪导出下载代码

代码语言：html

所属分类：多媒体

代码描述：js实现浏览器中音频可视化裁剪导出下载代码

下面为部分代码预览，完整代码请点击下载或在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: #070b14;
            --card: #0f1520;
            --card-hover: #151d2e;
            --border: #1c2840;
            --fg: #e0e7f1;
            --muted: #5a6d8a;
            --accent: #00e5a0;
            --accent2: #00c4d4;
            --accent-dim: rgba(0,229,160,0.1);
            --accent-glow: rgba(0,229,160,0.35);
            --danger: #ff4d6a;
        }
        * { 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; }

        /* 背景装饰 */
        .glow-orb {
            position:fixed; border-radius:50%; filter:blur(140px);
            pointer-events:none; z-index:0;
        }
        .glow-orb.a { width:500px; height:500px; top:-150px; left:-100px; background:rgba(0,229,160,0.07); }
        .glow-orb.b { width:450px; height:450px; bottom:-120px; right:-80px; background:rgba(0,196,212,0.06); }
        .glow-orb.c { width:300px; height:300px; top:50%; left:60%; background:rgba(0,229,160,0.04); }

        /* 主容器 */
        .main-wrap { position:relative; z-index:1; max-width:960px; margin:0 auto; padding:32px 20px 60px; }

        /* 上传区 */
        .drop-zone {
            border:2px dashed var(--border);
            border-radius:16px;
            background:var(--card);
            transition:all .3s 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 .3s;
        }
        .drop-zone:hover, .drop-zone.drag-over {
            border-color:var(--accent);
        }
        .drop-zone:hover::before, .drop-zone.drag-over::before { opacity:1; }

        /* 波形区 */
        .waveform-wrap {
            background:var(--card);
            border:1px solid var(--border);
            border-radius:14px;
            overflow:hidden;
            position:relative;
        }
        #waveformCanvas { display:block; width:100%; cursor:default; }

        /* 时间刻度 */
        .time-ruler {
            height:28px;
            background:rgba(0,0,0,0.3);
            border-top:1px solid var(--border);
            position:relative;
            overflow:hidden;
        }
        .time-ruler canvas { display:block; width:100%; height:100%; }

        /* 信息标签 */
        .tag {
            background:var(--accent-dim);
            border:1px solid rgba(0,229,160,0.25);
            border-radius:8px;
            padding:6px 14px;
            display:inline-flex; align-items:center; gap:6px;
        }

        /* 按钮 */
        .btn {
            border:none; border-radius:10px;
            padding:10px 22px;
            font-family:'Noto Sans SC',sans-serif;
            font-size:14px; font-weight:600;
            cursor:pointer; transition:all .2s;
            display:inline-flex; align.........完整代码请登录后点击上方下载按钮下载查看