通常用 Rive 一陣子後，就會有人開始說「啊我們來加個聲音試試看好了」，畢竟無論是用 Rive 做 hero, icon, 還是遊戲什麼的，加上一點聲音會讓整體的完成度上升很多，例如這種感覺

在這個 context 底下，聲音可以大致上分成音樂 & 音效兩種，音樂是類似 BGM，比較長的、循環播放的，音效則是類似關門聲、腳步聲那種，依附於某些環境、透過事件觸發的。今天會分別說明在用 Rive 的時候，這兩種聲音要怎麼實作比較好，以及一些注意事項。

要先有使用者互動

首先要提到的是，為了避免大家上網三不五時就被嚇到，瀏覽器原則上禁止自動播放聲音，在使用者跟網頁互動前，網頁是不會有聲音的，這個小知識大家應該或多或少有聽過。

實務上會遇到的情況是，有些快樂好朋友會問說「啊可是 Netflix 跟 Youtube 都可以自動播放ㄟ我們也要」、「啊我三姑的四舅他隔壁的二舅媽我其實也跟他不熟啦但是我聽說他一輩子都沒過上網啊怎麼他 Iphone 上面的 Youtube 也可以自動播放什麼 MEI 你不要唬我」，有些前端熊熊被問到這個問題，可能當下還沒想清楚怎麼回比較好，可能就不小心被嗨賴或是答應下來一些東西，有點尷尬。

實際上瀏覽器針對「自動播放聲音」這件事有兩個機制，一個是他會幫每個網站算分數，Media Engagement Index，MEI，如果你常常去某個網站，這個分數就會變高，高到一定的程度，瀏覽器就會允許自動播放聲音。除此之外，瀏覽器也對某些大網站有白名單，例如 Netflix 或 Youtube，這些白名單自始自終就允許自動播放聲音，就算你根本沒去過也一樣。這樣想也蠻合理的，都是自己人，Chrome 擋 Youtube 幹嘛。

通常我們做的網站，應該都不會在這些白名單裡面啦，大廠工程師應該不會來看我的文章。所以除非你很確定你的 MEI 很高，不然原則上要先讓使用者跟你的網站互動，例如 click, touchstart 等等，才能有音樂 & 音效。

通常設計師會在 Rive 檔裡面做一些小巧思，吸引使用者去點畫面，例如這個乒乓球，或是剛剛那個奇怪的音速小子，有一個突兀的 start demo 按鈕，或如果是 SPA 的話，點卡片或分頁轉 router，通常也可以算是有互動，也可以播放聲音。總之如果要在 Rive 加上聲音的話，要記得這件事。

音樂：傳統 web 的做法

先有使用者互動後，網站就可以播放聲音了。聲音可以分成音樂跟音效，循環播放的是音樂。音樂我們還是用傳統 web 的做法，看是要用 HTMLAudioElement, Web Audio API, 還是人家包好的 library 都可以。

做在 Rive 檔裡面也可以，但是不能中途停止播放，所以如果要做靜音或卡歌的話，不是完全做不到，但是比較複雜一點。對 Rive 檔來說，聲音比較像是一種 state（反正有限狀態機嘛什麼都是 state😊），不是一組播放聲音的 API，所以他比較沒有 audio.play() 的概念，他比較像是把這個 state display 給你看。他不是在播放音樂，而是在顯示音樂。

音效：寫在 Rive 檔裡面

透過事件或互動觸發的是音效，這部分最好直接請設計師大大寫在 Rive 檔裡面，直接包成一包讓前端一起引入就好。

當然前端要自己接 Rive 檔吐的 event 或監聽什麼其他東西再播音效，也不是不可以，就會比較複雜一點，溝通成本也會增加，用 Rive 的優勢就不見了。而且畢竟是前端自己收到訊號後接的，所以跟寫在 Rive 檔裡面比起來，通常應該會慢一個 frame 甚至更多，有些金耳朵可能會不滿意，有些人可能天生就比較厲害，差 4ms 也感覺的出來這樣。

做好 preload & cache

這部分後來發現有點長，寫在明後兩天好了🙈🙈🙈

總之在 Rive 的世界裡面，音樂音效的實作對前端來說，是真的沒什麼太難的地方，畢竟都是設計師大大的工🙈，知道一些基本概念 & 最佳實踐，不要重新造輪子，繞一大圈才發現還是笨方法比較好用，這樣應該就很夠了。