原生js实现简洁浏览器录音试听下载wav代码-html代码-BFW代码库

原生js实现简洁浏览器录音试听下载wav代码

代码语言：html

所属分类：多媒体

代码描述：原生js实现简洁浏览器录音试听下载wav代码

下面为部分代码预览，完整代码请点击下载或在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>在线录音 - 导出WAV文件</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    /* --- 样式同你原来的，这里不变 --- */
    :root { --primary:#3B82F6;--primary-light:#93C5FD;--secondary:#10B981;--danger:#EF4444;--dark:#1E293B;--light:#F8FAFC;--gray-50:#F9FAFB;--gray-100:#F3F4F6;--gray-500:#6B7280;--shadow:0 4px 6px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1);}
    *{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',system-ui,sans-serif;}
    body{background:linear-gradient(to bottom right,var(--light),var(--gray-100));min-height:100vh;display:flex;flex-direction:column;}
    header{background:white;box-shadow:var(--shadow);padding:1rem 1.5rem;}
    .container{max-width:64rem;margin:0 auto;width:100%;padding:0 1rem;}
    .header-content{display:flex;justify-content:space-between;align-items:center;}
    .logo{font-size:clamp(1.5rem,3vw,2rem);font-weight:bold;color:var(--dark);display:flex;align-items:center;gap:.5rem;}
    .logo i{color:var(--primary);}
    .header-subtitle{color:var(--gray-500);font-size:.875rem;display:none;}
    @media(min-width:768px){.header-subtitle{display:block;}}
    main{flex-grow:1;padding:2rem 0;}
    .card{background:white;border-radius:.75rem;box-shadow:var(--shadow);padding:1.5rem;transition:.3s;}
    .card:hover{box-shadow:var(--shadow-lg);}
    @media(min-width:768px){.card{padding:2rem;}}
    .status-container{text-align:center;margin-bottom:2rem;}
    #status-text{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:600;color:var(--dark);}
    #recording-time{color:var(--gray-500);margin-top:.5rem;font-size:1.125rem;display:none;}
    .audio-visualizer{height:120px;width:100%;display:flex;align-items:center;justify-content:center;gap:3px;background:var(--gr.........完整代码请登录后点击上方下载按钮下载查看