我寫了一個超快速上 CC 字幕的程式，免費送給大家 使用教學！

哈囉我是wiwi官大為，歡迎收看nicechord好和弦， 我寫了一個可以讓 YouTuber 們更快速上影片CC字幕的程式， 我今天要來免費分享給大家並且教你如何使用！ 這個影片是由好和弦 NiceChord. com 免費而且沒有廣告地提供給你， 你知道我們除了好和弦、檸檬卷之外，現在還多了一個「NiceLemon 好檸檬」頻道嗎？ 在那個頻道我們會開直播聊天玩遊戲，還會上其他跟音樂無關的廢片哦， 如果你想來跟我們一起玩的話，就也來訂閱好檸檬吧！ 三個頻道都要按下小鈴鐺哦！ 今天的影片主題是關於 CC 字幕， 就是你在下面可以自由開關的字幕（如果你用電腦版的話，按鍵盤的 C 就可以開關字幕囉）， 我不曉得你平常看 YouTube 影片的時候有沒有習慣把 CC 字幕打開， 根據我的後台數據顯示，好和弦的觀眾大概只有40%會在我的影片打開字幕。 對於影片創作者來說，為什麼應該要上字幕這件事， Joeman 有一個非常好的影片在討論這個問題， 他這部影片主要的重點就是在說： 1. 上字幕可以讓觀眾在無法打開聲音的時候也能看片。 2.

華語的口音有很多種，台灣以外的觀眾可能會不習慣台灣的腔調，所以需要字幕的協助。 3. 如果你影片的運鏡很單調的話，字幕可以引開觀眾的注意力，讓影片好像沒有那麼無聊。 關於第三點我是不知道啦，但是前兩點我都很同意， 總之 Joeman 的結論就是，如果是中文的影片你就應該上字幕就對了。 其實我也知道我應該要上字幕， 但如果你是我的長期訂閱者，你應該也有發現， 好和弦頻道經營了5年多來，也是到最近幾個月我才開始上字幕的。 但是為什麼我一直不上字幕呢？ 原因只有一個，那就是上字幕真的太太太太太花時間了。 你光是要把影片裡面講的每一個字都打出來就已經很想死了， 而且你以爲字打出來就好了嗎？沒有，你的工作才正要開始。 一般 YouTuber 把字幕加進影片裡的工作流程， 我所知道的大概最大宗的就是以下三種吧： 第一種就是直接使用像是 Final Cut 或是 Premiere 內建的字幕功能， 就是你在時間軸裡面找到你講話的點， 然後就直接把字幕一句一句打在時間軸上面， 然後再用滑鼠調整他的開始結束位置。 就像是 Joeman 的影片當中秀出的這個方法： 第二種是使用YouTube後台提供的 CC 字幕工具， 也是一樣他會秀出你的影片時間軸跟聲波， 你就要用滑鼠框出每一句話的時間點，然後一句一句把字幕打上去。 有用過這個工具的人應該都知道， 如果你的影片有點長，句數很多的話，這個工具跑的非常非常慢， 光是上下捲動左邊的文字區都會頓頓的，很煩，會弄到很想罵髒話。 第三種是使用專門的上字幕軟體像是 Aegisub， 他執行速度比YouTube的後台好滿多的， 但是同樣的你還是要一句一句用滑鼠框出講話的時間點。 我覺得以上三個工作流程，最沒有效率的地方就是， 你要去用滑鼠拖拉的方式來設定每一句字幕出現的時間， 影片要一直播放暫停播放暫停， 然後手還要在滑鼠跟鍵盤之間一直切換來切換去很累。 我心目中理想的上字幕流程， 應該是我可以先把全部的字幕打好， 一句話一行，存成純文字檔， 然後我就直接播放影片，影片講一句話我就按一個鍵跳到下一行， 影片播完一次字幕就上完，完全不用停下來，這樣子該有多好啊！ 然後我就到處搜尋到底有沒有程式可以讓我這樣子做， 我找了很久都沒有找到，於是我就決定自己寫一個自己的字幕工具了。 要寫字幕程式，首先要先去了解一下字幕檔到底是怎麼運作的， 結果我發現超簡單， 以大家最常使用的 SRT 格式的字幕檔爲例， 如果你用文字編輯器把它打開，你會發現他只是一個一般的文字檔而已。 然後他每一句字幕，都是由三行文字組成的： 第一行只是行數，就是1234567照順序下去而已。 第二行是開始跟結束時間點，他的格式是「小時、冒號、分鐘、冒號、秒、逗號、毫秒」，然後中間有兩個橫線加上一個大於符號。 第三行就是實際上的字幕。 所以要做出我想要的那種即時上字幕程式應該不會很困難， 我只要用瀏覽器播影片， 影片播放的當中，你一定可以用程式碼得到他現在正在播放的秒數嘛！ 那我只要設定，當我按鍵盤的某個鍵的時候，他就把當時的秒數記錄下來， 然後整部片每一句話的秒數都記錄下來之後， 結合預先打好的文字，輸出一個符合 SRT 格式的字幕檔案就可以了。 於是我就用 JavaScript 寫了這個大約才100行的小程式， 我已經自己試用一段時間了， 我最近幾個月有上CC字幕的影片都是用這個工具上的， 用這個程式的話，從你打好字，直到最終的SRT字幕檔，真的只需要剛好一部影片的時間喔！ 我接下來就要教你如何安裝跟使用， 我會用 Mac 來示範，但是我的程式在 Windows 和 Linux 也都是可以用的， 你總共需要安裝三個東西，分別是： Node. js node 的 http-server 跟我的程式本身 安裝 Node.

js 非常簡單， 你只要到 http://nodejs. org 去下載他最新的 LTS 版本安裝包就可以了， 它跟一般其他的軟體一樣，下載之後你就點開檔案，一直按下一步就可以安裝完了。 第二步是要安裝網頁伺服器，也就是 http-server 這個套件， 如果你是用 Mac 的話，打開你的終端機， 輸入「npm install -g http-server」， 按下 enter，應該幾秒鐘就裝好了。 第三步就是去下載我的小程式，我會在影片說明附上 Github 連結， 你要按右邊的綠色「Clone or Download」按鈕，然後選 Download ZIP， 下載之後把壓縮檔解開，放在你電腦裡面的任何一個資料夾都可以。 這樣子就全部安裝完成了，以上的事情你只要做一次就好， 接下來我們就來說程式要怎麼用。 首先你要先打好所有的字幕， 一句話一行，存為純文字檔， 然後把檔案名稱叫做 subs. txt，丟到跟我的程式同一個資料夾。 然後把你要上字幕的影片檔案，檔案名稱改為 video.

mp4， 同樣也是複製到跟我的程式同一個資料夾。 接著打開你的 Mac 的終端機，先輸入 cd，後面空一格， 然後把剛才那個資料夾拉進終端機的視窗裡面，他就會自動填上資料夾的路徑。 按下 Enter，終端機這邊應該就會進到那個資料夾了， 然後你輸入 http-server -p 1234， 這個的意思是說，我要在這個資料夾打開一個網頁主機，所以我們才能執行我的程式。 然後你就打開瀏覽器，不管你是用 Google Chrome 還是 Firefox 還是 Safari 都可以， 在網址輸入 localhost:1234，就可以進到程式囉！ 我的這個工具沒有設計漂亮的介面， 他就是一個空白的網頁，然後裡面有一個可以自由調大小的文字框，和一個影片在下面這樣而已。 你可以先對這個影片按右鍵，然後選擇「顯示播放控制」，這樣你就會看到影片的播放按鈕。 上面這個文字框是這樣子， 在第一行我有寫一個「目前」的字樣，表示右邊的這一句話是「目前」的字幕， 然後我下面會顯示接下來的四句話，讓您有心理準備接下來會講什麼這樣子。 字幕右邊的數字就是秒數，我已經把第一句的開頭預設成0秒， 那你看下面有很多寫 null 的地方就表示他還沒有秒數。 然後你就只要播放這個影片，一邊盯著文字框這邊看。 當影片一講到第二行開頭一兩個字的那個瞬間，你就按一下鍵盤上面的字母 K。 當你按下字母K，我的程式會同時標記當下這個時間點，是目前這一句的結尾，以及第二行的開頭， 也就是說如果你的字幕是連續出現的話，你就不需要特別設定每一句字幕的結束點， 反正你按 K 的時候，我的程式就會自動結束這一句，然後開始下一句就對了。 那如果你的兩行字幕不是緊接著出現的話， 你可以按下字母 L 來提早結束目前這一句，然後下一句出現的時候你再按 K 就可以了。 就這樣這麼簡單而已，你就一邊播放一邊盯著文字框的第二行的部分， 只要他一講到第二行的開頭一兩個字，你就按一下字母 K，然後隨着影片播完你的字幕就全部上完了。 然後你不用擔心你的反應太慢的問題，當你按K的時候，我的程式會把字幕上在你按K之前的0.