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>Audio Trimmer — 音频裁剪工具</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#08080c;
  --surface:#0e0e14;
  --surface-2:#14141c;
  --surface-3:#1c1c28;
  --accent:#00e87b;
  --accent-dim:rgba(0,232,123,.1);
  --accent-glow:rgba(0,232,123,.25);
  --text:#e8e4dc;
  --text-muted:#6b6660;
  --text-dim:#3a3835;
  --border:#1c1c28;
}
html{font-size:16px}
body{
  font-family:'DM Mono',monospace;
  background:radial-gradient(ellipse at 15% 8%,rgba(0,232,123,.04) 0%,transparent 45%),
             radial-gradient(ellipse at 85% 92%,rgba(80,50,200,.03) 0%,transparent 45%),var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;justify-content:center;
  padding:40px 20px 60px;
}
body::before{
  content:'';position:fixed;inset:0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.03;pointer-events:none;z-index:9999;
}
.app{width:100%;max-width:880px;animation:fadeIn .8s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.header{margin-bottom:32px}
.header h1{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.03em;margin-bottom:6px}
.header p{font-size:.82rem;color:var(--text-muted);font-weight:300;letter-spacing:.01em}

/* ─── Drop Zone ─── */
.dropzone{
  border:2px dashed var(--surface-3);border-radius:16px;
  padding:72px 40px;text-align:center;cursor:pointer;
  transition:all .3s ease;animation:borderPulse 3s ease infinite;
}
.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:var(--accent-dim);animation:none}
@keyframes borderPulse{0%,100%{border-color:var(--surface-3)}50%{border-color:var(--text-dim)}}
.dropzone-icon{font-size:3.2rem;margin-bottom:14px;opacity:.45;filter:grayscale(.3)}
.dropzone p{font-size:1rem;color:var(--text);margin-bottom:6px;font-weight:500}
.dropzone span{font-size:.8rem;color:var(--text-muted);disp.........完整代码请登录后点击上方下载按钮下载查看