js实现edge浏览器中调用语音识别与文字转语音及openai api实现ai语音唤醒问答助手代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js实现edge浏览器中调用语音识别与文字转语音及openai api实现ai语音唤醒问答助手代码，可设置唤醒词，然后直接给我说话，调用openai的兼容api来问答获取回复后，调用浏览器内tts播放声音。有svg卡通人物说话动画形象。

代码标签： js edge 浏览器调用语音识别文字转语音 openai api ai 语音唤醒问

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

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pixie 小精灵 · 语音 AI 助手</title>
<style>
  :root{
    --pixie-size: 180px;
    --blue:#6aa8ff;
    --blue-dark:#3a7bff;
    --pink:#ff7fbf;
    --bg: #0f1220;
    --card: #15192f;
    --text:#dbe4ff;
    --muted:#94a3b8;
    --ring:#7cafff;
  }
  html,body { height:100%; background:linear-gradient(180deg,#0b0e1a,#10142a 40%,#0b0e1a); color:var(--text); margin:0; font:14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans SC", "PingFang SC"; }
  .app { position:fixed; inset:0; display:flex; }
  /* 控制面板 */
  .panel {
    position: fixed; right: 16px; top: 16px; width: 340px; background: var(--card); border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.35); padding: 14px; backdrop-filter: blur(4px);
  }
  .panel h3 { margin: 0 0 10px; font-size: 16px; }
  .row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
  .row label { width: 78px; color: var(--muted); flex-shrink: 0; }
  .row input[type="text"], .row input[type="password"], .row select {
    flex:1; padding:8px 10px; border-radius: 10px; border:1px solid rgba(255,255,255,.08); background:#0f1330; color:#e8eeff; outline:none; min-width: 0;
  }
  .row input::placeholder{ color:#6b7aa6; }
  .btn {
    border:1px solid rgba(255,255,255,.12); background:#1a2150; color:#e8eeff; padding:8px 12px; border-radius:10px; cursor:pointer;
  }
  .btn.primary { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); border-color: transparent; }
  .btn.warn { background:#512020; }
  .btn:disabled { opacity:.6; cursor:not-allowed; }
  .switch { display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
  .switch input { appearance:none; width:38px; height:22px; border-radius:999px; background:#3b3f66; position:relative; outline:none; transition:.2s; }
  .switch input:checked { background:linear-gradient(135deg, var(--blue), var(--blue-dark)); }
  .switch input::after { content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:white; transition:.2s; }
  .switch input:checked::after { transform: translateX(16px); }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

  /* 对话显示 */
  .log {
    margin-top: 10px; max-height: 180px; overflow:auto; background: #0f1330; border:1px solid rgba(255,255,255,.06);
    border-radius: 10px; padding:10px; white-space: pre-wrap;
  }
  .log .usr { color:#8de88d; }
  .log .bot { color:#9dc1ff; }
  .log small { color:#7182b5; }

  /* 小精灵容器（右下角） */
  .pixie-wrap {
    position: fixed; right: 22px; bottom: 22px; width: var(--pixie-size); height: var(--pixie-size);
    display:flex; align-items:center; justify-content:center; user-select:none;
  }
  .pixie-btn {
    position:absolute; inset: -8px; border-radius: 18px; background: radial-gradient(120px 80px at 60% 30%, rgba(122,154,255,.25), transparent 70%);
    border:1px solid rgba(255,255,255,.05); cursor: pointer;
  }
  .hint {
    position:absolute; bottom: calc(100% + 8px); right: 0; background: #11163a; color:#c9d8ff;
    border:1px solid rgba(255,255,255,.06); border-radius: 10px; padding:6px 8px; font-size:12px;
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
  }

  /* SVG 动画态 */
  .pixie { width: 100%; height: 100%; filter: drop-shadow(0 8px 18px rgba(82,121,255,.35)); }
  .idle .floaty { animation: float 3s ease-in-out infinite; }
  .idle .blink { animation: blink 6s infinite; transform-origin: center; }
  .listening .ring { opacity: 1; animation: pulse 1.2s ease-in-out infinite; }
  .speaking .mouth { animation: talk 180ms infinite; transform-origin: 100px 118px; }
  .speaking .wing-l { animation: wing 1.2s ease-in-out infinite; transform-origin: 68px 100px; }
  .speaking .wing-r { animation: wing 1.2s ease-in-out infinite reverse; transform-origin: 132px 100px; }
  .wake .halo { animation: halo 700ms ease-out; opacity:1; }
  .thinking .sparkle { animation: sparkle 1.2s ease-in-out infinite; opacity:1; }

  .ring, .halo, .sparkle { opacity: 0; }
  .ears, .wing-l, .wing-r { filter:url(#glow); }

  @keyframes float { 0%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } 100%{ transform: translateY(0); } }
  @keyframes blink {
    0%, 94%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } 96% { transform: scaleY(1); }
  }
  @keyframes talk { 0%{ transform: scaleY(1);} 50%{ transform: scaleY(0.6);} 100%{ transform: scaleY(1);} }
  @keyframes wing { 0%{ transform: rotate(0deg);} 50%{ transform: rotate(6deg);} 100%{ transform: rotate(0deg);} }
  @keyframes pulse {
    0%{ transform: scale(.92); opacity:.65; } 50%{ transform: scale(1.03); opacity:.9; } 100%{ transform: scale(.92); opacity:.65; }
  }
  @keyframes halo { 0%{ transform: scale(.5); opacity:0; } 100%{ transform: scale(1.4); opaci.........完整代码请登录后点击上方下载按钮下载查看