feat: add packages/karaoke

[nickhsine]

Feature 描述

根據 mockup 實作卡拉 OK 元件。

互動需求說明：

1. 當元件進入 viewport 後，字卡和音檔「從頭」自動播放。
2. 當元件離開 viewport 後，音檔暫停播放。
3. 若使用者點擊過按鈕，記錄音檔的靜音狀態，當元件再次進入 viewport 時，音檔自動播放時，會透過靜音狀態來決定是否靜音。
4. 因為瀏覽器的規範，使用者尚未點擊播放按鈕前，音檔會處於靜音模式，當使用者點擊播放按鈕後，音檔會根據字卡的狀態來決定要從哪裡開始播放。

Demo:

實作細節

有兩點特殊之處需要先加以說明：

1. React 的 <audio> tag 不支援 muted 屬性，這是一個 known issue，相關討論請見 <video /> attribute needed but not guaranteed by React facebook/react#10389
2. 瀏覽器要 autoplay 的話，必須搭配靜音模式 muted={true} 才會生效

原本的實作方式是想透過 <audio autoPlay muted> 來讓瀏覽器幫忙自動播放音檔，並且記錄音檔的播放到哪裡 currentTime。但因為 muted 屬性 React 不能使用，因此，放棄該實作方式，而改用較為複雜的方法。

較為複雜的方法是：

1. 我們得自己紀錄音檔的 currentTime
2. 我們得透過 DOM element 來播放 audio.play()，暫停 audio.pause() 和開啟／靜音模式audio.muted=(true|false)

currentTime 的記錄更新是透過 setTimeout 實作，讓字卡一邊跑動畫，一邊更新 currentTime。
另外，此實作利用 intersection observer 來判斷元件是否進入 viewport。

因為有可能有多個卡拉 OK 元件出現在同一個網頁上，所以將 muted state 記錄在 window level；當使用者在其中一個卡拉 OK 元件中開啟靜音模式，其他的卡拉 OK 元件也都會一起開啟靜音模式。

TODOs

• mobile, tablet version
• add background-image

[nickhsine]

@caesarWHLee 有空請幫忙 review 一下。

[dyfu95]

Question:
我自己測試的結果，目前會有同時出現兩個音軌同時播放的情形，不確定是否需要解掉這狀況？
如下圖：當音軌一與音軌二同時在viewport中，就會同時播放

[nickhsine]

3c10d01 and 06eb881 修復了 Safari 在自動播放上的問題。
該問題只出現在 Sarafi 瀏覽器上。
假設我們有三個 Karaoke 元件在同一頁上，當使用者點擊其中一個 Karaoke 元件 A 的播放鍵後，Safari 確實可以讓被點擊的 Karaoke 元件 A 播放聲音，但當使用者往下滑，進入另一個 Karaoke 元件 B 後，Karaoke 元件 B 在執行 audio.play() 時，仍會遇到 Promise rejection 的問題。
06eb881 透過 workaround 的方式解到該問題。

[nickhsine]

Question: 我自己測試的結果，目前會有同時出現兩個音軌同時播放的情形，不確定是否需要解掉這狀況？ 如下圖：當音軌一與音軌二同時在viewport中，就會同時播放

這個我會再調整 intersection observer 的 threshold 試試看。

[nickhsine]

• 09b4902 更新 QuoteShadow 中的 useEffect 使用方式，帶入 array 避免 re-render 時 useEffect 重跑
• 92bae9e 拿掉多餘的 React.Fragment
• 238d952 將 [...audioUrls] 改成 []
• e4510bf 修掉其它 review comments

[dyfu95]

LGTM 👍 👍

[caesarWHLee]

LGTM 💯 ⭐ ✨

[nickhsine]

@caesarWHLee @dyfu95
關於 #65 (comment) commit thread，我打算用另外一個 PR 來優化 useEffect。
我先 merge 這個 PR 囉。