js+css实现浏览器中选择本地音乐实时麦克风跟唱k歌评分代码-html代码-BFW代码库

js+css实现浏览器中选择本地音乐实时麦克风跟唱k歌评分代码

代码语言：html

所属分类：多媒体

代码描述：js+css实现浏览器中选择本地音乐实时麦克风跟唱k歌评分代码

下面为部分代码预览，完整代码请点击下载或在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>浏览器 K 歌打分 Demo</title>
  <style>
    :root{
      --bg:#071018;
      --panel:#0d1722;
      --panel2:#0b141d;
      --line:#1f3345;
      --text:#e9f3ff;
      --muted:#99b9d5;
      --green:#4ade80;
      --cyan:#38bdf8;
      --yellow:#facc15;
      --orange:#fb923c;
      --red:#ef4444;
      --purple:#a78bfa;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: "Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top, #10263a 0%, #071018 40%, #050b11 100%);
    }
    .container{
      width:min(1240px, calc(100% - 24px));
      margin:20px auto 40px;
    }
    h1{
      margin:0 0 12px;
      font-size:32px;
      font-weight:800;
      letter-spacing:.5px;
    }
    .subtitle{
      color:var(--muted);
      line-height:1.7;
      margin-bottom:14px;
    }
    .panel{
      background:linear-gradient(180deg, rgba(14,24,35,.95), rgba(10,18,27,.92));
      border:1px solid var(--line);
      border-radius:18px;
      padding:16px;
      margin-bottom:16px;
      box-shadow:0 10px 30px rgba(0,0,0,.25);
    }
    .row{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:center;
      margin-bottom:12px;
    }
    .row:last-child{margin-bottom:0}
    input[type="file"]{
      flex:1 1 320px;
      background:#08131d;
      color:var(--text);
      border:1px solid var(--line);
      border-radius:12px;
      padding:10px 12px;
    }
    button{
      border:none;
      padding:10px 16px;
      border-radius:12px;
      font-size:15px;
      font-weight:700;
      color:white;
      cursor:pointer;
      transition:.18s ease;
    }
    button:hover{transform:translateY(-1px)}
    button:disabled{
      opacity:.45;
      cursor:not-allowed;
      transform:none;
    }
    #analyzeBtn{background:linear-gradient(135deg,#06b6d4,#2563eb)}
    #startBtn{background:linear-gradient(135deg,#22c55e,#16a34a)}
    #stopBtn{background:linear-gradient(135deg,#f59e0b,#ea580c)}
    #resetBtn{background:linear-gradient(135deg,#64748b,#475569)}

    label.sliderWrap{
      display:flex;
      align-items:center;
      gap:10px;
      background:#09131d;
      border:1px solid var(--line);
      padding:10px 12px;
      border-radius:12px;
      color:var(--muted);
      min-width:280px;
      flex:1 1 320px;
    }
    input[type="range"]{
      flex:1;
    }
    audio{
      width:100%;
      filter:invert(0) hue-rotate(0deg);
    }
    .status{
      color:var(--muted);
      line-height:1.7;
      min-height:28px;
      white-space:pre-line;
    }
    progress{
      width:100%;
      height:12px;
      border:none;
      border-radius:999px;
      overflow:hidden;
      background:#0b141d;
    }
    progress::-webkit-progress-bar{
      background:#0b141d;
    }
    progress::-webkit-progress-value{
      background:linear-gradient(90deg,#22c55e,#38bdf8);
    }
    .cards{
      display:grid;
      grid-template-columns:repeat(5, minmax(140px,1fr));
      gap:12px;
      margin-bottom:16px;
    }
    .card{
      background:linear-gradient(180deg,#0b141d,#09121a);
      border:1px solid var(--line);
      border-radius:16px;
      padding:14px;
      min-height:98px;
    }
    .card .label{
      color:var(--muted);
      font-size:13px;
      margin-bottom:8px;
    }
    .card .value{
      font-size:30px;
      font-weight:800;
      line-height:1.15;
      word-break:break-word;
    }
    .scoreLive{color:var(--yellow)}
    .scoreFinal{color:var(--green)}
    .mini{
      font-size:13px;
      color:var(--muted);
      margin-top:6px;
    }
    .panelTitle{
      margin:0 0 10px;
      font-size:18px;
      font-weight:800;
    }
    canvas{
      width:100%;
      display:block;
      background:#08131b;
      border:1px solid var(--line);
      border-radius:14px;
    }
    #pitchCanvas{height:360px}
    #gaugeCanvas{height:110px}
    .resultBox{
      font-size:16px;
      line-height:1.8;
      color:#d9ecff;
    }
    .tips{
      margin-top:8px;
      color:var(--muted);
      line-height:1.8;
      font-size:14px;
    }
    .badge{
      display:inline-block;
      padding:3px 10px;
      border-radius:999px;
      background:#122234;
      border:1px solid #25415f;
      color:#b9d8f5;
      font-size:12px;
      margin-right:8px;
      margin-bottom:6px;
.........完整代码请登录后点击上方下载按钮下载查看