# 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

贊助商連結
(adsbygoogle = window.adsbygoogle || []).push({});