js+css实现ai生成的音乐曲子调子试听下载wav、midi文件代码-html代码-BFW代码库

js+css实现ai生成的音乐曲子调子试听下载wav、midi文件代码

代码语言：html

所属分类：多媒体

代码描述：js+css实现ai生成的音乐曲子调子试听下载wav、midi文件代码，这是ai生成的曲子。

代码标签： js css ai 生成音乐曲子调子试听下载 wav midi 文件代码

下面为部分代码预览，完整代码请点击下载或在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>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #0B0B12;
    --card: #13131F;
    --card2: #1A1A2B;
    --accent: #FF6B35;
    --accent2: #FFB84D;
    --accent3: #06D6A0;
    --text: #F0F0F5;
    --muted: #7A7A9E;
    --border: #2A2A40;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }
  h1, h2, h3 { font-family: 'Fredoka One', cursive; }

  /* 背景动画 */
  .bg-orbs {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  }
  .bg-orbs .orb {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.12;
    animation: orbFloat 12s ease-in-out infinite alternate;
  }
  .bg-orbs .orb:nth-child(1) { width:500px;height:500px;background:var(--accent);top:-10%;left:-5%;animation-delay:0s; }
  .bg-orbs .orb:nth-child(2) { width:400px;height:400px;background:var(--accent2);bottom:-10%;right:-5%;animation-delay:-4s; }
  .bg-orbs .orb:nth-child(3) { width:350px;height:350px;background:var(--accent3);top:40%;left:50%;animation-delay:-8s; }
  @keyframes orbFloat {
    0% { transform: translate(0,0) scale(1); }
    50% { transform: translate(30px,-40px) scale(1.1); }
    100% { transform: translate(-20px,30px) scale(0.95); }
  }

  .main-container { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 24px 16px; }

  /* 可视化Canvas */
  #vizCanvas {
    width: 100%; height: 260px; border-radius: 16px;
    background: linear-gradient(180deg, rgba(19,19,31,0.9), rgba(11,11,18,0.95));
    border: 1px solid var(--border);
    display: block;
  }

  /* 进度条 */
  .progress-wrap {
    position: relative; height: 6px; background: var(--card2); border-radius: 3px;
    cursor: pointer; margin-top: 12px; overflow: hidden;
  }
  .progress-fill {
    height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-radius: 3px; width: 0%; transition: width 0.1s linear;
  }

  /* 按钮基础 */
  .btn-icon {
    width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    transition: all 0.2s ease;
  }
  .btn-icon:hover { transform: scale(1.1); }
  .btn-icon:active { transform: scale(0.95); }
  .btn-play {
    background: linear-gradient(135deg, var(--accent), #FF8F5E);
    color: #fff; box-shadow: 0 4px 20px rgba(255,107,53,0.35);
  }
  .btn-play:hover { box-shadow: 0 6px 30px rgba(255,107,53,0.5); }
  .btn-stop {
    background: var(--card2); color: var(--muted); border: 1px solid var(--border);
  }
  .btn-stop:hover { color: var(--text); border-color: var(--muted); }

  /* 导出按钮 */
  .btn-export {
    padding: 12px 24px; border-radius: 12px; border: 1px solid var(--border);
    background: var(--card2); color: var(--text); font-family: 'Nunito',sans-serif;
    font-weight: 700; font-size: 15px; cursor: pointer;
    transition: all 0.25s ease; display: flex; align-items: center; gap: 8px;
  }
  .btn-export:hover {
    background: var(--card); border-color: var(--accent); color: var(--accent);
    box-shadow: 0 4px 16px rgba(255,107,53,0.15).........完整代码请登录后点击上方下载按钮下载查看