Please enable JavaScript.
Coggle requires JavaScript to display documents.
情緒音樂盒 - Coggle Diagram
情緒音樂盒
🎧 音樂播放頁 (player.html)
使用 fetch 取得播放清單(JSON)
加入 D3.js / Canvas 音浪動畫
嵌入 Spotify 或 YouTube 播放器
可控制播放 / 暫停 / 下一首
依情緒切換背景顏色與主題
顯示播放中的歌曲名稱
顯示目前情緒
📖 關於本站 (about.html)
創作動機：用情緒挑音樂的想法
使用技術：
HTML5 + CSS3 + JavaScript
fetch + Spotify/YouTube API
D3.js / Canvas 視覺化
特色：結合顏色、動畫與音樂
分工：
A：前端介面設計
B：API 串接與動畫製作
😊 情緒選擇頁 (mood.html)
提示文字：「選擇你現在的心情」
四個按鈕：
😀 快樂
明亮黃色背景
播放輕快流行音樂
😢 悲傷
深藍色背景
播放抒情慢歌
😰 焦慮
紫灰背景
播放 Lo-Fi / Chill 音樂
🤩 興奮
紅橙背景
播放 EDM / 搖滾音樂
點選後 → 進入音樂播放頁
🗂️ 延伸功能 (optional)
最近播放紀錄 (LocalStorage)
自動偵測心情 (未來版本)
收藏喜歡的情緒歌單
🏠 首頁 (index.html)
網站簡介與標語
背景：柔和漸層色 + 簡單動畫
「開始體驗」按鈕 → 前往情緒選擇頁