📖 天上雲音 使用指南
所有功能完整教學 — 從聽歌、搜尋、留言到 Podcast 自動接續
📋 目錄
🎵 基本操作
聽歌
- 首頁 → 點歌封面直接進歌曲頁
- 「音樂」分頁 → 依語言/分類篩選
- 點 ▶ 播放按鈕 → 開啟全螢幕播放器
音質切換
Premium 會員可在歌曲頁切換「標準音質 (MP3)」或「高音質 (WAV)」。
🔍 搜尋
本站支援全文搜尋,包含歌名、歌手、歌詞內文。
基本用法
- 頂部搜尋框輸入關鍵字
- 自動完成會即時顯示建議(最多 8 筆)
- 按 Enter 或點建議跳轉
進階搜尋
在結果頁可加上 ?lang=台語 或 ?lang=國語 過濾語言。
例:/search.php?q=雨聲&lang=台語
📜 歌詞同步
歌曲頁的歌詞會跟著播放進度自動滾動。當前唱的行會柔和聚焦(不會刺眼)。
- 已唱:淡灰色(保留上下文)
- 當前:左細線 + 輕微放大(柔和聚焦)
- 未唱:普通白色
❤️ 按讚、分享、留言
歌曲按讚
歌曲頁 ❤️ 按鈕 → 按一次按讚,再按取消。
留言按讚
留言下方 ❤️ 按鈕。對方會收到通知。
留言
- 歌曲頁底部留言區
- 需登入才能留言
- 到「會員中心 → 我的留言」可編輯或刪除自己的留言
分享計數
📤 分享按鈕 → FB / LINE / Twitter / 複製連結。站內會記錄分享次數。
❤️ 收藏
- 歌曲頁 ❤️ 愛心 → 加入收藏
- 「會員中心 → 收藏」可看到所有收藏的歌曲
📋 播放清單
- 歌曲頁「加入播放清單」按鈕
- 免費會員 1 個清單(20 首),Premium 無限
- 「會員中心 → 播放清單」管理
📻 Podcast 模式(自動接續)
適合睡前或工作時連續聆聽。
用法
- 歌曲頁按「📻 加入 Podcast 隊列」(需要登入)
- 重複加入多首到隊列
- 播放第一首 → 播完自動跳下一首 → 持續到隊列空
管理隊列
「會員中心 → Podcast 隊列」可重新排序、移除單首、或清空。
📖 AI 故事
歌曲頁底部「📖 AI 故事」區塊 → 按「✨ 生成故事」按鈕。
AI 會根據歌詞與情緒標籤,生成 200-300 字的短篇故事,呼應歌曲意境。
- 首次生成後會快取,再次進入直接顯示
- 每首歌只能生成一次(不會重複)
🎤 創作者頁面
每個歌手有專屬頁面,列出所有歌曲:
/artist.php?name=原創
- 顯示歌曲總數、總播放、語言、粉絲數
- 點歌名進入歌曲頁
👥 追蹤
追蹤歌手
進入創作者頁面 → 按「+ 追蹤歌手」按鈕。之後該歌手有新歌時會通知你。
追蹤會員
其他會員的個人頁面也會有「追蹤」按鈕。
通知中心
「會員中心 → 通知中心」查看所有通知(被讚、被追蹤等)。
🎯 個人化推薦
為你推薦
首頁上半部「🎯 為你推薦」— 根據你的收藏 + 聆聽紀錄推薦相似情緒的歌曲。
聽過這首的人也聽
歌曲頁底部「🎵 聽過這首的人也聽」— 根據情緒標籤 + 分類推薦相似歌曲。
依心情推薦
首頁下半部「✨ 依心情推薦」— 系統預設的 7 個心情群組(振奮、浪漫、溫暖、憂傷等)。
🛠️ 小工具
⏰ 睡眠定時器
歌曲頁 → 「⏰ 睡眠定時」 → 選 15/30/60/90 分鐘。時間到自動暫停。
⏱️ 歌曲時光機
歌曲頁 → 「⏱️ 歌曲時光機」→ 隨機跳到 30-70% 處。適合聽到一半想換個地方。
⬇️ 下載音檔
歌曲頁 → 「⬇️ 下載音檔」(需 Premium)→ 存到手機/電腦離線聽。
👤 會員中心
從右上「會員名稱 → 會員中心」進入。
包含功能
- 📊 儀表板 — 統計資料
- 🔔 通知中心 — 所有通知
- ▶️ 繼續播放 — 上次聽到一半的歌曲
- 📋 播放清單 — 你建的清單
- 📻 Podcast 隊列 — 待播清單
- ❤️ 收藏 — 喜愛的歌曲
- 📜 聆聽紀錄 — 最近聽過的
- 💬 我的留言 — 編輯 / 刪除留言
- 👤 編輯資料 — 改名、換頭貼
📺 TV 直播 / 電視牆 / YouTube 直播
把「同步聽歌」當作 電視頻道、店內撥放、YouTube 直播源 用。 16:9 寬螢幕,兩種風格可切換(電視台新聞 / 演唱會舞台)。
🎬 兩種風格
- A 電視台新聞風(預設)— 黑底紅 LIVE 標、跑馬燈新聞、嚴肅字型。像 NHK / CNN 電視台
- B 演唱會舞台風 — 粉紅霓虹、LED 牆、舞台聚光燈、左右螢光棒、emoji 飄動。 像演唱會 LED 牆
切換方法:打開 TV 介面後,右上角「A 電視台 / B 演唱會」按鈕。會用 localStorage 記住你的選擇,下次自動用該風格。
🔗 各種網址(直接複製貼上)
| 用途 | 網址 |
|---|---|
| 看 TV 直播(含所有 UI) | https://8la.name/sync/tv.php |
| A 電視台風格 | https://8la.name/sync/tv.php?style=A |
| B 演唱會風格 | https://8la.name/sync/tv.php?style=B |
| OBS 純畫面模式(給 YT 直播擷取) | https://8la.name/sync/tv.php?obs=1 |
| B 演唱會 + OBS 純畫面(推薦給 YT 直播) | https://8la.name/sync/tv.php?obs=1&style=B |
| 純視覺(不開音樂) | https://8la.name/sync/tv.php?nomute=1 |
| 手機版直播頁(觀眾掃 QR 進來用) | https://8la.name/sync/ |
🎬 YouTube 直播設定(OBS 串流)
- 下載 OBS Studio(免費)
- OBS →「來源」→「+」→「瀏覽器」
- URL 填:
https://8la.name/sync/tv.php?obs=1&style=B - 寬度 1920、高度 1080
- OBS 設定 YouTube 直播串流金鑰
- 開始錄製 / 直播
- 音訊:OBS 從其他來源擷取(virtual audio cable / 喇叭輸出),TV 介面自動不播音樂
💬 觀眾互動:彈幕
用手機掃 TV 上的「手機版 QR」進 /sync/,點右下角「彈」按鈕,輸入訊息後送出,2 秒內訊息會從右往左飄過 TV 螢幕。
- 🎨 7 種顏色可選(白/粉/青/金/綠 + 置頂/底部)
- 🛡️ 自動過濾敏感詞 + 每 5 秒限速防 spam
- 👀 訪客也能送(不用登入)
🛒 QR Code 兩種用途
- 手機版 QR(亮藍框) — 掃了進
8la.name/sync/,跟大家一起同步聽 - 歌曲 QR(一般框) — 掃了進
music-detail.php?id=N,直接聽當前這首歌,未登入可聽、可收藏
🎛 跑馬燈 / 品牌 / 標題 文字可調
管理員可在後台改:/admin/sync-tv-settings.php
- 🔴 跑馬燈全文(用
|分隔多段) - 🏷️ 品牌文字(top bar 中央)
- 📱 手機版 QR 標籤 / 標題
- 🎵 歌曲 QR 標籤 / 標題
- 💕 告白牆標題 + 筆數
- 🎨 預設風格(A 電視台 / B 演唱會)
修改後 5 分鐘內自動生效(前端每 60 秒重新讀取)。
🎬 TV 介面即時互動
- 封面:自動從 DB 拉真實歌曲封面,每 30 秒 NTP 對時跟手機版節奏一致
- 歌詞:自動從 DB 拉,按歌曲進度輪播
- 進度條:即時計算目前播放秒數
- 下一首:顯示排隊中下一首歌
- 告白牆:顯示最近 3 筆已播點歌(後台可改筆數)
- 線上人數:模擬(之後可接即時計數)
- 時鐘:即時台北時間
💡 場景建議
- 餐廳 / 咖啡廳撥放:用
?style=B+ 投影到大螢幕,氣氛好 - YouTube 直播:用
?obs=1&style=B+ OBS Studio 擷取當直播源 - 店內電視牆:用
?obs=1純畫面,OBS 處理音訊 - 粉絲互動演唱會:用手機版「彈」按鈕送彈幕到 TV
📱 裝到手機(像 App)
詳見 /pwa.php 安裝教學,有 iOS / Android / 桌面的詳細步驟。
裝好後可以:離線聽歌、從主畫面一鍵打開、收到通知。
❓ 常見 Q&A
Q: 為什麼歌詞同步時間不太準?
A: 因為歌詞檔沒有 [mm:ss] 時間標籤。系統用「字數加權」估算每行的時間,可能差 ±1-2 行。要 100% 精準需要手動加時間標籤(後台「歌詞編輯器」可加)。
Q: 留言按讚了,對方怎麼知道?
A: 對方的「通知中心」會收到「X 按讚了你的留言」通知。
Q: 我之前在哪裡留言過?
A: 「會員中心 → 我的留言」可看到所有自己的留言,並編輯/刪除。
Q: 怎麼追蹤別人?
A: 進入創作者頁面或會員個人頁面,按「追蹤」按鈕。對方發新歌時你會收到通知。
Q: Podcast 模式跟播放清單差在哪?
A: 播放清單是你手動管理、可重複聽的歌單。Podcast 隊列是播完自動跳下一首的一次性清單,適合連續聆聽。
Q: AI 故事怎麼生成的?
A: 系統從歌詞抽取關鍵意象詞與金句,套入情緒模板,生成 200-300 字故事。不使用 LLM,所以不會有 API 費用或個資問題。
Q: 怎麼下載音檔?
A: 需 Premium 會員。在歌曲頁按「⬇️ 下載音檔」即可。免費會員會看到升級 CTA。
Q: 可以離線聽嗎?
A: 兩種方式:1) 安裝 PWA 到手機,自動快取最近聽過的歌 2) 下載音檔到本地
Q: 為什麼我看不到「為你推薦」?
A: 需登入會員,且要有收藏或聆聽紀錄。沒有的話首頁會自動改顯示「依心情推薦」。
Q: 帳號被盜怎麼辦?
A: 立即改密碼(會員中心 → 編輯資料),聯絡客服 /contact.php