TTS 持續串流播放器 (中斷不中斷播放版)

📡 WebSocket 協定指令

🔗 Connect
發起 WS 握手，建立持久連線，server 回傳 session.created。

🔌 Disconnect
發送 Close Frame (1000)，正常關閉 WS 連線。

🚀 tts.start
清空佇列、中止當前，立刻開始新生成。

⏩ tts.enqueue
加入佇列尾端，不中斷當前，依序等待執行。

🛑 tts.cancel
只停當前生成，佇列其餘任務繼續依序執行。

🛑 tts.cancel_all
中止當前並清空整個佇列，所有任務取消。

🖥️ 客戶端本機操作（含 AudioBuffer 控制）

🔇 清空並靜音
送 tts.cancel 停生成＋立即清除本機 AudioBuffer（純客戶端）。

🔄 重置
重新載入頁面，重建所有狀態與連線。

⚠️ 注意：tts.cancel / tts.cancel_all 只停止 Server 端生成，Client 端已緩衝音訊仍會播完。如需立即靜音，請使用 🔇 清空並靜音。

📋 情境一：排隊連播

🔗 連線 WebSocket

↓

🚀 tts.start "文字A"

↓ server: tts.starting → tts.ready

⚙️ 生成A → 串流播A

播放中，同時可送

⏩ tts.enqueue "文字B"

↓ server: tts.queued，B 進佇列

A 完成後自動執行...

↓

⚙️ 生成B → 串流播B

↓

✅ tts.done

🔁 情境二：中斷重送

🔗 連線 WebSocket

↓

🚀 tts.start "文字A"

↓

⚙️ 生成A → 播A 進行中...

任意時刻再送

🚀 tts.start "文字B"

A 立刻中止、佇列清空

↓ server: tts.starting → tts.ready

⚙️ 生成B → 串流播B

↓

✅ tts.done

✂️ 情境三：中斷生成

🚀 start "A" + ⏩ enqueue "B"

↓

⚙️ 生成A → 播A
B 在佇列等候

🛑 tts.cancel

A 生成停止
播完已緩衝音訊

↓

⚙️ B 自動接續

↓

✅ B done

🛑 tts.cancel_all

A 停止
B 從佇列移除

↓

🚫 B 取消不執行

↓

🔕 cancelled_all

⚠️ 兩者皆只停 Server 生成，已緩衝音訊仍播完。
立即靜音 → 點 🔇 清空並靜音

🔌 情境四：連線與斷線

○ 未連線（燈號滅）

↓

🔗 點擊「連線 WebSocket」

↓ server 回傳: session.created

● 已連線（燈號綠燈閃爍）

可送出 tts.start / tts.enqueue...

結束連線

🔌 手動點「斷線」

close(1000)
主動中止

⏱️ Idle 逾時

server 踢掉
onclose 觸發

↓

○ 未連線（燈號滅）

↓

🔗 重新連線

🔄 重置頁面

🎙️ TTS 持續串流播放器