太好了，為了幫你在日本自助旅行時，透過手機（瀏覽器）使用 text‑to‑speech（TTS） 功能讀出檔案中的文字，我整理了幾種實用工具與方案，分為「現成 App／網頁工具」與「可自行部署／開發的 GitHub 專案」。

一、現成 App / 網頁工具

Ondoku（おんどく）

• 一款日本開發的 免費網頁 TTS 應用，不需安裝，直接在瀏覽器使用 ondoku3.com。

• 支援 日語與多達 48 種語言，提供高品質 AI 朗讀，還可選擇 17 種不同日語語音 ondoku3.com。

• 可輸入文字或上傳文件，限 5,000 字免費使用，亦支援儲存音檔與商業用途 ondoku3.com。

Voice Dream Reader（iOS／macOS）

• 強大的 TTS 應用，支援以語音播放 PDF、網頁、ePub 等格式，並具備超過 186 種語音與 30 多種語言（包含日語） TechRadar。

ElevenLabs AI Reader（Android / iOS）

• 支援朗讀 PDF、文章、ePub 等各種文字內容，支援多達 32 種語言，雖未特別提及日語，但全球釋出版本可能包含 The Verge。

Speechify

• 可識別拍照文字或上傳電子檔，將文字轉換為語音播放，手機與桌面皆支援 維基百科。

二、GitHub / 自行開發專案

lewdev/speak-japanese.html

• 一個簡易的 HTML + JavaScript 頁面範例，利用瀏覽器的 Web Speech API 播放日語（ja-JP）語音，非常適合用於瀏覽器中讀取靜態文字 Gist。

Hinaser/ondoku

• 這是一款瀏覽器擴充功能，使用 ResponsiveVoice.JS，可選取文字即朗讀，包括日語語音 GitHub。

Kokoro 系列（Kokoro.js、Kokoro Web）

• 基於 WASM 的 JavaScript TTS 引擎，運行在瀏覽器端，支援本地運行（無需網路），速度快、品質高 Reddit+2Reddit+2。

• 「Kokoro Web」版是使用 SvelteKit 的開源網頁應用，可自架設（Docker 可用），架構簡潔、可支援多語言 Reddit。

mozilla/TTS

• 一個多語言的 TTS 開源框架，可訓練與使用預訓練模型，但較偏向開發與研究用途，操作較為複雜 GitHub。

總結推薦

建議

若你希望 最快速、免安裝就能在瀏覽器上使用：直接試試 Ondoku（おんどく），應該最適合你的需求。

如果你有一些開發能力，想客製化或自架體驗更流暢的 TTS 功能，可以考慮 Lewdev 的範例 或 Kokoro Web，進行部署或整合。

需要我幫你進一步找網址或操作步驟嗎？Welcome 盡管說！

你想找一份可以完全 離線執行、只透過瀏覽器端運作的純 HTML + JavaScript TTS（Text‑to‑Speech）範例，下面是幾個值得參考的專案（都可下載本地使用，不需網路）：

推薦方案：純前端 HTML + JS（離線可用）

Naman Sachdeva 的離線 TTS 網頁 App

• 完整使用 HTML、CSS、JavaScript 實作，利用瀏覽器內建的 SpeechSynthesisUtterance 進行語音合成。

• 完全不需要 API Key 或網路連線，打開本地 HTML 就能朗讀文字。

• 功能包括：選擇不同語音（由瀏覽器支援）、可調速率與音調、支援離線使用，UI 簡潔明亮 DEV Community。

• GitHub 範例：https→github.com/naman9104/TTS；Live Demo：https→naman9104.github.io/TTS。

你可以下載該專案後放在手機或平板裡的瀏覽器離線開啟，非常方便。

其他可離線使用的 JavaScript TTS 工具

text‑to‑speech‑offline（JavaScript Library）

• 一個體積很小的 JS 函式庫，透過 Web Speech API 在瀏覽器端將文字朗讀出來，支援離線使用前提為瀏覽器本身支持 TTS。

• 支援設定語言、音量、速率與音調，使用方式為 TTS(text, language, volume, rate, pitch) GitHubnpm.io。

• 適合用於簡單整合到你的 HTML 頁面中，但你仍需結合 Web Speech API 和自定義 UI 實作。

社群分享：Kokoro.js（高品質 TTS 引擎）

在 Reddit 上不少開發者提到 Kokoro WebGPU 和 Kokoro.js，能夠在瀏覽器離線運行 TTS，並且 使用 WebGPU 提升效能，聲音品質也很不錯：

“It took some time, but we finally got Kokoro TTS running w/ WebGPU acceleration! This enables real‑time text‑to‑speech without the need for a server.”
— Reddit

且有用戶指出：

“Load that TTS demo page. Deactivate WiFi or Internet. IT works offline! Download that page and it works too.”
— Reddit

這代表 Kokoro 確實可以下載後完全在本地（離線環境）使用，但技術門檻較高，需要確保瀏覽器支援 WebGPU 或採用 WASM fallback。

總結對照表

建議你可以這樣做

1. 快速上手：先下載 Naman 的 HTML 範例，放到手機/平板本地開啟試試，看是否滿足你的需求。

2. 進階整合：如果想讓 UI 更符合你操作習慣，再考慮自行整合 text‑to‑speech‑offline 或 Web Speech API。

3. 追求高音質：若你有更高音質需求與較熟悉前端技術，可研究 Kokoro.js，下載 demo 並確認離線是否穩定。

若你需要我幫你取得範例 HTML 檔案、改寫代碼嵌入特定語言（例如設定 lang="ja-JP"）或操控朗讀速度與音調，我可以協助！

你問的是「Google 翻譯在瀏覽器端的語音播放功能（TTS）能否離線使用」，答案是：不行，除非你的裝置內建了本地 TTS 語音引擎。

為什麼 Google 翻譯的語音無法離線使用？

Google 翻譯在網頁版裡提供的朗讀功能，是透過網路連線向 Google 的伺服器請求音訊回傳的。如果瀏覽器中該語音是「遠端服務」（remote service），則必須在線才能使用 Stack Overflow。

可離線朗讀的替代方式：Web Speech API + 本地語音引擎

其實瀏覽器支援 TTS 是透過 Web Speech API（speech‑synthesis），而真正執行合成語音的是作業系統或瀏覽器所在平台的語音引擎。有些系統（像 Windows、macOS、iOS、部分 Linux）內建有 TTS 引擎，即使無網路也能工作 RedditStack Overflow。

也就是說，如果你的裝置上安裝了本地語音包（例如，Ubuntu 裝了 eSpeakNG、Windows 有內建語音），那麼使用 JavaScript 的 SpeechSynthesisUtterance 仍然能在無網路狀態下朗讀。

總結

建議

若你希望能在無網路狀態下使用文字朗讀功能，以下兩種方式較實用：

1. 使用純前端的 Web Speech API（SpeechSynthesisUtterance），並確保你的裝置已安裝離線語音引擎（例如 eSpeakNG）。

2. 考慮前面提到的離線 TTS 專案（像是 Kokoro.js／Kokoro WebGPU），完全運作在瀏覽器端，無需網路。

若你需要我提供簡單的範例程式碼，或協助你檢查裝置是否已具備本地語音支持，隨時告訴我喔！

你問的兩個問題我分別回覆如下：

是否 Android 或 iPhone 支援離線語音引擎？

Android
是的，Android 內建或可安裝離線 TTS（Text‑to‑Speech）引擎。例如：

• Android 通常預裝 Speech Services by Google（即 Google TTS），雖然語音資料需要下載，但一旦安裝完成就能離線使用維基百科。

• 在開放平台 F‑Droid 與 Play 商店中，也有一些免費或付費的離線 TTS 引擎，如 eSpeakNG、RHVoice、IVONA Kindle TTS、Vocalizer 等，它們在某些語言上品質不錯，也能離線朗讀RedditAccessible Android維基百科。

• 根據 Reddit 網友分享，還有一些本地 neural TTS 引擎專案（像 Piper 與 Sherpa‑ONNX）也提供 APK 可在 Android 上離線運作Reddit。

iPhone（iOS）
iOS 自 iOS 7 起就提供 內建的 TTS API，支援離線語音合成使用，無需網路即可朗讀文字Apple Developer。

Kokoro.js 的簡單使用範例（在瀏覽器端離線執行）

Kokoro.js 是一套能在瀏覽器中完全本地執行的 TTS 庫（使用 WASM 或 WebGPU），可離線使用。

以下是一個基本的 HTML + JavaScript 實作範例，可儲存成 offline-kokoro.html，在已下載模型與庫後即可離線使用：

html
複製編輯
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>Kokoro.js 離線 TTS Demo</title>
  <script type="module">
    import { KokoroTTS } from './kokoro-js.js'; // 將 kokoro-js 放在本地相對路徑

    async function speak() {
      const tts = await KokoroTTS.from_pretrained(
        'onnx-community/Kokoro-82M-v1.0-ONNX',
        { dtype: 'q8', device: 'wasm' }
      );
      const text = document.getElementById('inputText').value || 'こんにちは、世界！';
      const audio = await tts.generate(text, { voice: 'af_heart' });
      const blob = new Blob([await audio.arrayBuffer()], { type: 'audio/wav' });
      const url = URL.createObjectURL(blob);
      const player = new Audio(url);
      player.play();
    }
  </script>
</head>
<body>
  <h1>Kokoro.js 離線 TTS</h1>
  <textarea id="inputText" rows="4" cols="40">こんにちは、世界！</textarea><br/>
  <button onclick="speak()">讀出文字</button>
</body>
</html>

這個範例中：

• 使用 KokoroTTS.from_pretrained() 載入模型（如 "onnx-community/Kokoro-82M-v1.0-ONNX"），可選擇 device: "wasm"（目前最穩定）npmjs.comkdjingpai.com。

• 呼叫 .generate() 並指定 voice，生成 WAV 語音，透過 JavaScript Blob 與 Audio 物件播放。

若你需要更完整的框架，可參考以下兩個 GitHub 專案，它們皆提供 React 或 Svelte 應用，下載模型一次後即可在瀏覽器完全離線運行：

• fajrmn/kokoro‑on‑browser：React + Vite 應用，完全離線運作RedditGitHub。

• mikeesto/kokoro‑web：使用 Svelte 與 Transformers.js 的離線瀏覽器 TTS 應用GitHub。

總結

• Android、iOS 皆支援離線語音引擎：Android 可利用系統或第三方引擎，iOS 有內建 TTS API；兩者可離線使用。

• Kokoro.js 提供純瀏覽器離線 TTS 解決方案，以上範例已說明如何以 HTML + JS 實作。

若你希望我幫你改寫範例、更換日文語音（例如 lang: "ja-JP"）、或協助整合 UI，隨時告訴我，我可以協助你進一步建立功能完整的離線朗讀頁面！

你問的這兩部分都可以回覆：

1. Android／iPhone 是否支援離線語音引擎？

是的，Android 和 iOS 裝置都可以實現離線 TTS 功能：

• Android：通常預載「Speech Services by Google」TTS 引擎，只要下載語音資料，就能在離線模式使用。也有許多第三方 TTS，如 eSpeakNG、RHVoice、IVONA 等，可以安裝後供離線使用。

• iOS（iPhone）：自 iOS 7 起，已經具備內建 TTS API，可以在完全離線的情況下朗讀文字，無需網路支援。

2. 純前端、無框架、無伺服器的 Kokoro 離線 TTS 範例

雖然 Kokoro.js 常見於 React/Vite 等專案，但其實完全可以在純前端 HTML + JS 中使用，不需架設 server，也不需框架，只要直接引入打包好的 JS 檔即可。以下是基於 tts.rocks 提供的最簡範例：

完整的 offline-kokoro.html 範例

html
複製編輯
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Kokoro 离线 TTS（纯前端）</title>
</head>
<body>
  <h1>Kokoro 离线 TTS 示例</h1>
  <textarea id="text" rows="4" cols="50">こんにちは、世界！</textarea><br>
  <button id="speak">朗读</button>

  <script type="module">
    import { KokoroTTS, TextSplitterStream, detectWebGPU } from './kokoro-bundle.es.js';

    let tts;

    async function init() {
      const useGpu = await detectWebGPU();
      const device = useGpu ? "webgpu" : "wasm";
      const dtype = device === "wasm" ? "q8" : "fp32";
      tts = await KokoroTTS.from_pretrained("onnx-community/Kokoro-82M-v1.0-ONNX", {
        dtype,
        device
      });
    }

    async function speak() {
      const text = document.getElementById('text').value;
      const streamer = new TextSplitterStream();
      streamer.push(text);
      streamer.close();

      const stream = tts.stream(streamer, {
        voice: Object.keys(tts.voices)[0],
        streamAudio: false
      });

      for await (const { audio } of stream) {
        if (!audio) continue;
        const blob = audio.toBlob();
        const url = URL.createObjectURL(blob);
        const audioEl = new Audio(url);
        await audioEl.play();
      }
    }

    document.getElementById('speak').onclick = speak;

    init();
  </script>
</body>
</html>

說明：

• 使用 kokoro-bundle.es.js（須預先下載並放在相同目錄），無需任何框架或伺服器環境，只需瀏覽器即可使用。

• 此範例會先判斷支援 WebGPU（若有則走 faster 路徑），否則 fallback 到 WebAssembly（WASM）。

• 採用串流方式 (TextSplitterStream) 處理長段文字，分段生成語音，即使文本較長也能逐段播放，提升使用體驗。

• 同樣支持中文、日文等多語言輸入（視模型語言支援而定）GitHubKDjingpainpm。

總結

如果你需要進一步優化，例如預載模型、加入下載進度 UI、支援選擇語音、調整語速等，我可以繼續幫你補充！