---
title: "邁向國際化！如何幫實況加上即時翻譯字幕！"
tags: OBS
description: "VTuber 實況裡常看到的那個"
image: "https://pbs.twimg.com/media/D2j7SrZUgAAeofe.jpg"
---

{%hackmd @f6bfb5/biKBG-dnSQajGm3NZj38Fg %}

 

- [總覽](/s/1lhI9SqjRzepld5qyOMHKw)

## 介紹

↓ 這個裡面的字幕效果，可以從 1:30 開始看：

{%youtube mmZs3rg8zEc%}

## [音声認識字幕ちゃん（西村良太）](http://www.sayonari.com/trans_asr/asr.html)

音声認識字幕ちゃん有分成舊的穩定版以及新的測試版，本文僅介紹新的測試版，音声認識字幕ちゃん透過網址列讀取相關設定參數，但測試版也有提供操作互動介面。

### 設定辨識功能

1. 開啟[測試版](https://sayonari.coresv.com/ninshikiChan/20210822_config.html)頁面
2. 調整相關設定，相關用詞翻譯會放置於下方
（※ 設定修改之後需要重新整理辨識頁面）
3. 點選最下面的「別窓で開く」於新分頁開啟辨識頁面
4. 網站會要求使用麥克風權限，選擇「允許」
5. 開啟實況軟體，擷取該辨識頁面，並使用色塊鍵去背
（※ 由於需要存取麥克風，OBS 的瀏覽器來源無法使用）
6. 完成

### 相關用詞

| 日文 | 中文 |
| ---------- | ------------ |
| フチ色 | 外框色 |
| サイズ | 字體大小 |
| ウェイト | 字體粗細 |
| 縁取り | 字體外框大小 |
| テキスト | 文字 |
| フォント名 | 字體名稱 |
| ミリ秒 | 毫秒 |

字體名稱搜尋方式可參考 [如何查詢可套用至 font-family 上的字體名稱](https://f6bfb5.github.io/how-to-check-font-family-name-in-computer)

### 設定翻譯功能

1. 想使用翻譯功能則需要[於此](https://script.google.com/)另外申請 Google Script 的 API-KEY
2. 點選左上角的「New Project」
3. 複製以下程式碼，覆蓋掉右方文字欄原有的程式碼

function doGet(e) {
  var p = e.parameter;
  var translatedText = LanguageApp.translate(p.text, p.source, p.target);
  return ContentService.createTextOutput(translatedText);
}

4. 點擊右上角的「Deploy」→ 選擇「New deployment」
5. 點擊左上角的齒輪 → 選擇「Web app」
6. 下方的「Excute as」選擇「Me」，「Who can access」選擇「Anyone」
7. 點選下方的「Deploy」，複製結果頁面的「Deploy ID」
8. 貼至測試版頁面的「Google Script API-KEY」欄
9. 點選最下面的「別窓で開く」於新分頁開啟辨識頁面
10. 完成

<style>
.red {
color: red;
}
</style>

## [Speech to Text Webcam Overlay](https://1heisuzuki.github.io/speech-to-text-webcam-overlay/)

此網站原本是為了遠端工作設計的，會直接在視訊畫面上顯示自己說話的字幕辨識，但也可以關閉攝影機或設定單色背景當成純辨識字幕。

相較於音声認識字幕ちゃん，此網站不需要設定太多東西即可使用，缺點是只能顯示一種語言。

### 設定方式

1. 網站會要求使用攝影機和麥克風權限，選擇「允許」
2. 點選下方的「単色背景表示/非表示」
3. 最下方的「音声認識」可以選擇辨識來源的語言
4. 最下方右方的「翻譯」可以選擇翻譯目標的語言