websim.ai 語音API 最小唸出語音範例展示了如何利用網頁中的 JavaScript 調用瀏覽器的 SpeechSynthesis API 來將指定文本轉換為語音

日期：

最小唸出語音範例

這是一段測試文字，用於測試語音合成功能。

 

詳細解說

  1. 文件類型與語言宣告

    • <!DOCTYPE html>
      這行告知瀏覽器這是一份 HTML5 文件，瀏覽器將根據 HTML5 標準解析文件內容。

    • <html lang="zh-Hant">
      <html> 標籤包住整個 HTML 文件，lang="zh-Hant" 指定語言為繁體中文，幫助瀏覽器與搜尋引擎理解文件內容所使用的語言。

  2. Head 區塊

    • <head> 區塊內設定文件的元資料：

      • <meta charset="UTF-8">
        設定字符編碼為 UTF-8，確保中文等多國語言能正確顯示。

      • <title>最小唸出語音範例</title>
        定義瀏覽器分頁標題為「最小唸出語音範例」。

  3. Body 區塊

    • <body> 是文件的主要內容區域，所有使用者可見的元素都放在此區。

    • <p id="text">這是一段測試文字，用於測試語音合成功能。</p>
      定義一個段落 <p>，內含要進行語音朗讀的文字。此段落設定了 id="text"，便於 JavaScript 透過 document.getElementById 方法取得內容。

    • 兩個 <button> 按鈕：

      • <button onclick="readText()">朗讀</button>
        當使用者點擊此按鈕時，會觸發 readText() 函式，開始朗讀文本。

      • <button onclick="stopText()">停止</button>
        點擊此按鈕則會觸發 stopText() 函式，用以停止朗讀。

  4. JavaScript 區塊

    • <script>...</script> 包含所有與語音朗讀功能有關的 JavaScript 程式碼。

    • readText() 函式