# Apple Apple 是蘋果 - 技術筆記
# 版本更新
# 1.0
# 技術筆記
# 前端
# Vue
用 Vue 3 來試試看，用起來是跟 Vue 2 差不多，不過這是個功能簡單的小網站，應該無法體驗出差異。
目前遇到的問題就是 Vue Google Adsense (opens new window) 沒辦法用，好像是 vue-script2 (opens new window) 不支援 Vue 3 。那這邊我就隨便把 AdSense 塞在 index.html 就好了，暫時先這樣，之後再想看看怎樣解決這個問題。
# 播放器
播放器的部分就是用原生的 audio tag ，操作播放器就用 DOM API (opens new window) 的 play() 就可以了，另外在 Vue 要取得 audio tag 的 DOM element 可以用 Vue ref (opens new window) 這個屬性，像這樣。
<audio id="sentence" ref='audio' controls></audio>
接著就可以用 this.$refs.audio 取得播放器的 DOM element ，就可以呼叫它的 DOM API method 。
play: function () {
this.$refs.audio.play()
}
# Web share API
在播放到第五個單字時會跳出一個 modal ，上面會有 call to action ，其中有一個 share 的功能是用 Web Share API 做的，Web Share API 我之前有介紹過 (opens new window)，很方便不用加一堆 code 就可以呼叫手機原生的 share 功能。
# 贊助
最後一個就是贊助連結啦，這邊我是用 Buy Me A Coffee (opens new window) 因為藍新信用卡商店申請不過，原因好像是說目前對於這種純贊助型的商店審核很嚴，那這邊就換一個國外的服務來試試看吧！
# Frontend Tech Stack
- vue 3.0.0-rc.11
- bootstrap 4.5.2
- axios 0.20.0
# 後端
# Google Cloud Text-to-Speech API
Google TTS 提供兩種 Voice type，分別是 Basic 跟 WaveNet ， WaveNet 產出的語音檔比較自然，可以到 Google 的網頁 (opens new window)試聽不同 type 產出的語音檔。
WaveNet 是 DeepMind 公司開發的技術，是採用深度學習的方式產生語音檔，詳細的部分可以到維基百科 (opens new window)去看。
Google TTS 支援的語音與語言可以到這個連結 (opens new window)看（每個語言都可以試聽）。
目前 Google TTS 只能從同一種語言的文字產出同一種語言的語音，意思就是說只能從英文文字產出英文語音，或是中文文字產出中文語音，中英夾雜就會唸的很奇怪。
所以我的做法是英文中文分開送給 Google ，產生兩個語音檔後再接成一個語音檔。
# audioconcat
這是用來合併兩的語音檔的，這個 package 有依賴 ffmpeg ，系統必須先安裝 ffmpeg，是用 ffmpeg 的指令合併兩個語音檔。
# Backend Tech Stack
- Node.js v12.18.4
- koa 2.13.0
- audioconcat (opens new window) 0.1.3
- @google-cloud/text-to-speech 3.1.0
