聲音合成器 – 快速訓練外語數字聽力

Introduction

一個可以自動透過 web speech synthesis API,產生隨機外語數字發音的基礎應用。

學外語的時候,明明從0~9都倒背如流,但每次遇到數字稍微大一點,不僅聽到之後很久才能夠轉換並理解,即便是對著文章上的數字要唸出來,都要稍微想一下,無法像母語一樣反射動作。

這可能是歸因於,數字在我們生活中都是隨機出現的:2,350,000、891、1,976等,並不會有像是搭配詞(collocation)頻率出現的特性,導致我們一直難以適應並快速反應。

Do it!

有了上面這樣的「需求」,決定透過「大量訓練」來讓自己適應,於是花一點時間,簡單打造一個「外語數字聽力訓練機」:

  1. 可以選擇發音語系
  2. 可以選擇產生的數字格式(如萬位數)
  3. 可以重複聽

Demo

speechSynthesis

Live DemoView on Github

What’s the Difficulty?

難處其實在 UI design,而不在技術的實踐門檻,因為 speech synthesis API 有自己的 Demo,可以看到其實基本的功能都有了,照著他 Github 上面的 code,很簡單就可以刻出一個。

UI 的難在於,因為我想設計一個可以讓使用者「自己選擇要幾位數」、「自己選擇某幾個位數填0」的機制,這樣才不會每次都在練習一些,其實很少出現在生活中的數字(如: 543,981,550),初學者也可以從十位數、百位數一路往前推進。

為了以上的需求,找了一陣子才確定使用 Bootstrap 4 的 checkbox button,兼具 checkbox 一開一關的特性,以及 button 比較能夠呈現出「一排按鈕代表一排數字」的外觀。

Note

這方面 TTS(Text To Speech) 的應用算滿常見的,但拿來訓練外語數字聽力就是獨樹一幟,可能有人覺得沒必要,但一方面分享的本意就是拋磚引玉,也許其他人有更好的想法,都歡迎以此為基礎更加強化,另一方面,起碼我需要呀:)

另外,對於英語數字不熟悉的人,可以參考這篇文章哦!

Reference

Web_Speech_API
speechSynthesis