js+css实现调用openai的api生成曲子的电子器弹奏练习学习程序代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：js+css实现调用openai的api生成曲子的电子器弹奏练习学习程序代码，可录制新曲，还可ai生成新的曲子，还可进入练习模式进行弹奏引导，支持所有兼容openai协议的api。

代码标签： js css 调用 openai api 生成曲子电子器弹奏练习学习程序代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>电子琴 · 录音 · 练习 · OpenAI 生成</title>
<style>
  :root {
    --bg: #0e0f13;
    --card: #161821;
    --card-2: #1e2230;
    --text: #e8e8ef;
    --muted: #a9afc6;
    --accent: #7c9cff;
    --ok: #34d399;
    --warn: #f59e0b;
    --err: #ef4444;
    --whiteKey: #f7f7fb;
    --whiteKeyActive: #dbeafe;
    --blackKey: #1a1a1f;
    --blackKeyActive: #374151;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; padding: 0;
    background: linear-gradient(180deg, #0e0f13, #0d1220);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft Yahei", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  }
  header {
    padding: 16px 20px;
    border-bottom: 1px solid #232635;
    background: rgba(22,24,33,0.8);
    position: sticky; top: 0; backdrop-filter: blur(6px);
  }
  header h1 {
    margin: 0; font-size: 18px; font-weight: 600;
    display: flex; align-items: center; gap: 10px;
  }
  header h1 .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; }
  .container {
    max-width: 1100px; margin: 0 auto; padding: 16px; display: grid; gap: 16px;
    grid-template-columns: 1.1fr 0.9fr;
  }
  .card {
    background: var(--card);
    border: 1px solid #232635;
    border-radius: 12px;
    padding: 14px;
  }
  .card h2 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
  .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  label.small { font-size: 12px; color: var(--muted); }
  input[type="text"], input[type="number"], input[type="password"], select, textarea {
    background: var(--card-2); border: 1px solid #2b2f42; color: var(--text);
    padding: 8px 10px; border-radius: 8px; outline: none; min-width: 0;
  }
  input[type="checkbox"] { transform: translateY(1px); }
  button {
    background: #2a2f47; color: var(--text); border: 1px solid #3a4060;
    padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: .15s;
  }
  button:hover { filter: brightness(1.08); transform: translateY(-1px); }
  button.primary { background: #3b5bfd; border-color: #4a63ff; }
  button.ghost { background: transparent; }
  button.danger { background: #402126; border-color: #73333d; color: #ffb4bf; }
  button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
  .pill { background: #20263b; color: var(--muted); padding: 4px 8px; border-radius: 999px; font-size: 12px; }
  /* Piano */
  .piano-wrap { padding: 10px; }
  .piano {
    position: relative; height: 220px; background: #11131a; border-radius: 12px;
    border: 1px solid #2a2e42; overflow: hidden; user-select: none;
  }
  .white-keys, .black-keys { position: absolute; left: 0; right: 0; }
  .white-keys { bottom: 0; top: 0; display: flex; align-items: end; padding: 0 8px; gap: 2px; }
  .white-key {
    position: relative; flex: 1 1 0; height: 190px; background: var(--whiteKey);
    border-radius: 6px; border: 1px solid #cbd5e1; box-shadow: inset 0 -3px 0 rgba(0,0,0,.06);
  }
  .white-key.active { background: var(--whiteKeyActive); border-color: #93c5fd; }
  .white-key.hint { box-shadow: inset 0 0 0 3px #93c5fd, 0 0 18px rgba(147,197,253,.6); }
  .white-key.good { box-shadow: inset 0 0 0 3px #34d399, 0 0 18px rgba(52,211,153,.6); }
  .white-key.bad  { box-shadow: inset 0 0 0 3px #ef4444, 0 0 18px rgba(239,68,68,.6); }
  .white-note { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 12px; color: #666c80; }
  .black-keys { top: 0; height: 120px; pointer-events: none; }
  .black-key {
    position: absolute; width: 28px; height: 120px; background: linear-gradient(#11131a, #05060a);
    border-radius: 6px; border: 1px solid #2f3448; box-shadow: inset 0 -3px rgba(0,0,0,.5);
    pointer-events: auto;
  }
  .black-key.active { background: var(--blackKeyActive); border-color: #475569; }
  .black-key.hint { box-shadow: inset 0 0 0 3px #93c5fd, 0 0 18px rgba(147,197,253,.6); }
  .black-key.good { box-shadow: inset 0 0 0 3px #34d399, 0 0 18px rgba(52,211,153,.6); }
  .black-key.bad  { box-shadow: inset 0 0 0 3px #ef4444, 0 0 18px rgba(239,68,68,.6); }
  .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 11px;
    background: #101420; color: #a0a8c0; border: 1px solid #2a2f47; padding: 2px 6px; border-radius: 6px; }
  .help { color: var(--muted); font-size: 12px; }
  .list { display: flex; flex-direction: column; gap: 8px; }
  .item {
    background: var(--card-2); border: 1px solid #2b2f42; border-radius: 10px; padding: 10px;
    display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  }
  .item-title { font-weight: 600; }
  .item-sub { color: var(--muted); font-size: 12px; }
  .right-actions { display: flex; gap: 8px; align-items: center; }
  .status { color: var(--muted); font-size: 13px; margin-top: 6px; min-height: 18px; }
  .divider { height: 1px; background: #262b3f; margin: 8px 0; }
  .badge { font-size: 11px; background: #21273e; color: #a9b1d6; border: 1px solid #2f3654; padding: 2px 6px; border-radius: 999px; }
  @media (max-width: 980px) {
    .container { grid-template-columns: 1fr; }
  }
</style>
</head>
<body>
  <header>
    <h1>
      <span class="dot"></span>
      电子琴 · 录音 · 练习 · OpenAI 生成
      <span class="pill">C4 ~ B5 · 单音</span>
    </h1>
  </header>

  <div class="container">
    <div class="card">
      <h2>弹奏与录音</h2>
      <div class="row" style="gap:14px; align-items:flex-end;">
        <div>
          <label class="small">速度 BPM</label><br />
          <input type="number" id="bpm" min="40" max="220" step="1" value="96" style="width:90px" />
        </div>
        <div>
          <label class="small">量化&.........完整代码请登录后点击上方下载按钮下载查看