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

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

代码语言：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;
  }
  .........完整代码请登录后点击上方下载按钮下载查看