Web Speech API 的第三篇，也是最後一篇。

我想要結合 openAI API 以及前面兩篇的 SpeechRecognition 和 SpeechSynthesis，做出一個陪我聊天的 AI 好朋友 XDD，讓我們來一步一步打造吧！

實做一個 AI 好朋友

要將 Web Speech API 與 OpenAI API 結合，實現語音互動聊天，我們簡易的步驟如下：

1. 將使用者說的話轉成文字
2. 使用該文字作為 OpenAI API 的請求
3. 接收回應後，再將回應轉換為語音。

HTML 的部分非常簡單，同樣考量安全限制，使用者必須點選按鈕才可以開始說話：

<button id="talkButton">說話</button>
<p id="response">等待語音輸入...</p>

JavaScript 這邊，寫完之後發現很難拆解，所以我將全部程式碼放上來，大家可以參考註解：

let voices = []
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
const utterance = new SpeechSynthesisUtterance();
const apiKey = '你的 API key';

recognition.lang = 'zh-TW';
utterance.lang = 'zh-TW';

// 透過 onvoiceschanged 取得 voices 列表
window.speechSynthesis.onvoiceschanged = function () {
  voices = window.speechSynthesis.getVoices();
};

document.getElementById('talkButton').addEventListener('click', function () {
  recognition.start();
});

recognition.onresult = async function (event) {
  const command = event.results[0][0].transcript;
  document.getElementById('response').textContent = '你說的話: ' + command;

  // 呼叫 OpenAI API
  const openAIResponse = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: 'gpt-4o',
      messages: [{
        'role': 'system',
        // 這邊可以修改成你希望 AI 扮演的角色
        'content': "你是一個很好的談心事的朋友，請以溫暖且堅定的口氣對話。"
      }, {
        'role': 'user',
        'content': command
      }],
      max_tokens: 300
    })
  });

  const data = await openAIResponse.json();
  const aiResponse = data.choices[0].message.content;

  // 更新網頁顯示
  document.getElementById('response').textContent = 'AI 回應: ' + aiResponse;

  // 使用 SpeechSynthesis 播放 AI 的回應
  utterance.text = aiResponse;
  utterance.voice = voices.filter(voice => voice.lang === 'zh-TW')[1];
  window.speechSynthesis.speak(utterance);
};

recognition.onerror = function (event) {
  console.error('語音識別錯誤:', event.error);
};

這些都是前面兩篇有提過的流程，所以實作起來並不困難，難的反而是要怎麼設定 OpenAI 的角色，才能讓他如我所願地成為我的 AI 好朋友 XD。

或者也可以當個吐槽好朋友：

messages: [{
  'role': 'system',
  'content': "你熱愛吐槽，對我說的話總是能雞蛋裡挑骨頭，找出許多負面的東西，但同時你又是我非常好的朋友，請帶著毒舌卻帶有一絲溫暖的對話。"
}, {
  'role': 'user',
  'content': command
}],

當我跟他說今天心情不好時，這是他回我的 XD：

哦，別告訴我你又在為那些微不足道的事煩惱了。拜託，你要不要先理理頭髮，那亂糟糟的樣子就像你的心情一樣。不過話說回來，我還是關心你的，畢竟我也不想每天跟一個情緒失控的朋友打交道。說吧，到底是什麼事，讓我幫你吐槽一下，說不定會讓你心情好點。

完蛋了，我怎麼覺得吐槽好朋友比較真實 😂。

有興趣的朋友可以自己修改 content 玩玩看，期待大家打造出來的 AI 朋友唷。

範例程式碼

範例程式碼：https://mukiwu.github.io/web-api-demo/speech2.html

小結

以上，有任何問題都歡迎留言討論