GitHub: https://github.com/zongronghuang/asmr-player ======================================================= Demo: https://asmr-player-312716.web.app ======================================================= 內含 ASMR 效果的音訊及相符的背景圖片 (從 Unsplash 隨機取得)，為使用者營造視覺及聽覺上皆帶來沉浸式的放鬆體驗。 採用 React 前端框架及 React 生態系函式庫打造的應用程式。使用 Firebase 進行部署、使用者身份驗證及存取音訊資源，採用 serverless 架構達成前後端分離。 ======================================================= - 從 Firebase Cloud Storage 存取八種環境音效 - 可在兩種背景中切換：CSS 動態漸層背景及 Unsplash 相片 - 可拖曳的音樂播放控制器面板，提供三種播放模式 (專輯循環播放、單曲循環播放及隨機播放) - 具備動畫效果的側邊選單，能夠切換背景圖片及取得更多圖片資訊 - 採用 Facebook 及 Google 提供的使用者驗證機制 (透過 Firebase API 達成)，搭配 react-router-dom 進行設計 - 可離線使用 (顯示 CSS 動態漸層背景) 及連線使用 (隨機取得 Unsplash 圖片) - 使用 React Hooks、自訂 Hook 及利用Emotion.js 建立的 styled components - 使用 Firebase 部署、使用者驗證及雲端儲存空間，在 serverless 架構下達成前後端分離的設計 - 採用嚮應式設計，符合桌面及行動裝置使用