建立網頁版 MIDI KTV 點歌系統(Roland SC-8850)

 我成功了

這套系統是以 Patchbox OS 作為 Raspberry Pi 的 Linux 作業系統，搭配 Roland SC-8850 音源模組，利用 Python Flask 建立一個可以透過瀏覽器操作的 MIDI KTV 點歌系統。

Patchbox OS 原本就是針對 Raspberry Pi 音樂應用所設計的 Linux 系統，因此非常適合拿來當作這套 MIDI 播放系統的基礎。

本教學以以下環境為基準：

• 硬體： Raspberry Pi
• 作業系統： Patchbox OS
• 音源： Roland SC-8850
• MIDI 播放： ALSA aplaymidi
• Web Framework： Python Flask
• 曲庫： ~/midi
• 網路檔案分享： Samba
• Web 介面： Flask，使用 8080 port

整體架構如下：

手機 / 平板 / 電腦
        │
        │ Web Browser
        ▼
┌──────────────────────┐
│      Patchbox OS     │
│      Raspberry Pi    │
│                      │
│      KMIDI.py        │
│          │           │
│       Flask          │
│          │           │
│     aplaymidi        │
│          │           │
│      ~/midi          │
└──────────┬───────────┘
           │
       USB / MIDI
           │
           ▼
┌──────────────────────┐
│     Roland SC-8850   │
│       音源模組        │
└──────────────────────┘

---

一、為什麼使用 Patchbox OS？

這套系統並不是以一般桌面 Linux 為主要目標，而是使用 Patchbox OS 作為 Raspberry Pi 的基礎環境。

Patchbox OS 啟動後就是一個適合音樂設備使用的 Linux 環境，因此 Raspberry Pi 不需要連接螢幕或鍵盤，也可以作為一台獨立的 MIDI 播放主機。

在這個專案裡，Raspberry Pi 的工作非常單純：

管理 MIDI 曲庫 → 接收網頁點歌 → 呼叫 aplaymidi → 將 MIDI 傳給 SC-8850。

真正負責聲音合成的是 SC-8850，而不是 Raspberry Pi。

---

二、Patchbox OS 環境

安裝完成 Patchbox OS 並啟動 Raspberry Pi 後，可以透過 SSH 登入系統。

例如：

ssh patchbox@樹莓派IP

登入後，後續的安裝與設定都可以直接在 Patchbox OS 的終端機完成。

本教學以下指令皆以 Patchbox OS 環境為基準。

---

三、安裝 Python 3 與 Flask

Patchbox OS 本身已經是 Linux 環境，因此可以使用 Debian 系列的 apt 套件管理工具。

先更新套件來源：

sudo apt update

安裝 Python 3、pip：

sudo apt install python3 python3-pip -y

接著安裝 Flask：

sudo apt install python3-flask -y

---

四、安裝 ALSA MIDI 工具

這套系統使用 Linux 的：

aplaymidi

將 MIDI 檔案送到 SC-8850。

因此安裝：

sudo apt install alsa-utils -y

完成後，可以先確認 Patchbox OS 是否看得到 SC-8850：

aplaymidi -l

如果 SC-8850 已經透過 USB MIDI 或 MIDI 介面連接 Raspberry Pi，應該可以看到相應的 MIDI 輸出埠。

KMIDI.py 本身也會自動執行 aplaymidi -l，尋找 SC-8850、Roland 或 Edirol 等 MIDI 裝置。

---

五、建立 MIDI 曲庫

KMIDI.py 預設使用：

~/midi

作為 MIDI 曲庫。

建立資料夾：

mkdir -p ~/midi

在 Patchbox OS 中，如果登入帳號是：

patchbox

那麼實際路徑就是：

/home/patchbox/midi

MIDI 檔案可以直接放在這裡，也可以建立子資料夾分類。

例如：

/home/patchbox/midi/
├── anime/
├── game/
├── classic/
├── japanese/
└── pop/

程式會自動搜尋子目錄中的 .mid 與 .midi 檔案。

---

六、安裝 Samba，從 Windows 管理 MIDI 曲庫

如果希望使用一般 Windows 電腦管理 MIDI 曲庫，可以在 Patchbox OS 上安裝 Samba：

sudo apt update
sudo apt install samba samba-common-bin -y

建立 MIDI 資料夾：

mkdir -p /home/patchbox/midi

然後編輯：

sudo nano /etc/samba/smb.conf

加入：

[midi]
   path = /home/patchbox/midi
   browseable = yes
   writeable = yes
   create mask = 0777
   directory mask = 0777
   valid users = patchbox

設定 Samba 密碼：

sudo smbpasswd -a patchbox

重新啟動 Samba：

sudo systemctl restart smbd
sudo systemctl enable smbd

之後 Windows 就可以透過：

\\樹莓派IP\midi

直接管理 Patchbox OS 上的 MIDI 曲庫。

---

七、啟動 KMIDI

將 KMIDI.py 放在 Patchbox OS 中後，執行：

python3 KMIDI.py

程式會自動：

1. 建立 MIDI 曲庫目錄。
2. 偵測 MIDI 輸出埠。
3. 尋找 SC-8850。
4. 啟動 Flask Web Server。
5. 在 8080 port 等待瀏覽器連線。

程式最後會提供：

KTV 點歌台 → http://<樹莓派IP>:8080

KMIDI.py 的程式碼本身也明確設定 Flask 監聽所有網路介面 0.0.0.0，並使用 8080 port。

---

八、從手機或電腦開始點歌

在同一個區域網路中的手機、平板或電腦開啟瀏覽器：

http://樹莓派IP:8080

例如：

http://192.168.1.100:8080

即可進入：

SC-8850 KTV 點歌台

之後就不需要再直接操作 Raspberry Pi。

---

九、Patchbox OS 在這套系統中的角色

這套系統可以把各元件的工作分得非常清楚：

元件	工作
Patchbox OS	Raspberry Pi 的 Linux 作業系統
Raspberry Pi	執行整套控制程式
Python	執行 KMIDI.py
Flask	提供 Web 點歌介面
ALSA / aplaymidi	傳送 MIDI
Samba	管理網路 MIDI 曲庫
~/midi	儲存 MIDI 檔案
Roland SC-8850	MIDI 音源與實際發聲

因此這不是把 Raspberry Pi 當成「軟體音源」使用。

它比較接近一台：

以 Patchbox OS 為核心的網路 MIDI 點歌主機。

而 SC-8850 才是真正的硬體音源。

---

十、完整使用流程

第一次安裝：

sudo apt update
sudo apt install python3 python3-pip python3-flask alsa-utils -y

建立曲庫：

mkdir -p ~/midi

確認 SC-8850：

aplaymidi -l

啟動點歌系統：

python3 KMIDI.py

最後使用手機或電腦開啟：

http://樹莓派IP:8080

即可開始使用。

要讓樹莓派（Raspberry Pi）在開機時自動執行 KMIDI.py 網頁點歌系統，最推薦也最穩定標準的做法是使用 systemd 建立系統服務。

以下是設定開機自動啟動的完整步驟：

步驟一：建立 Service 設定檔

請打開終端機，輸入以下指令來建立並編輯一個新的服務檔案：

sudo nano /etc/systemd/system/kmidi.service

步驟二：貼上以下設定內容

[Unit] 
Description=SC-8850 KTV MIDI Web Server
After=network.target sound.target

[Service]
Type=simple
User=pi WorkingDirectory=/home/pi
ExecStart=/usr/bin/python3 /home/pi/KMIDI.py
Restart=always RestartSec=3

[Install]
WantedBy=multi-user.target

步驟三：啟用並啟動服務

sudo systemctl daemon-reload
sudo systemctl enable kmidi.service
sudo systemctl start kmidi.service

PS.檢查運行狀態

sudo systemctl restart kmidi.service
sudo systemctl stop kmidi.service

結語

這套系統的核心並不是把 SC-8850「數位化」，而是讓一台 Raspberry Pi 成為 SC-8850 的網路控制器。

Patchbox OS 負責提供穩定、精簡的 Linux 音樂環境；Python Flask 負責網頁操作；ALSA 負責 MIDI 傳輸；Samba 負責曲庫管理；最後由經典的 Roland SC-8850 負責真正的聲音。

如此一來，一台 Raspberry Pi 加上一台 SC-8850，就可以變成一套完全獨立的：

網路 MIDI KTV 點歌系統。

KMIDI.py的程式碼如下

#!/usr/bin/env python3

from flask import Flask, request, render_template_string, jsonify

import subprocess

import os

import re

import random

from pathlib import Path

import threading

import time

app = Flask(__name__)

# ===== 設定區 =====

MIDI_PORT = "24:0"

MIDI_FOLDER = Path.home() / "midi"

_port_file = Path.home() / "sc8850_port.txt"

if _port_file.exists():

    _p = _port_file.read_text().strip()

    if _p:

        MIDI_PORT = _p

# ==================

current_process = None

current_playing_path = ""

current_playing_name = ""

play_queue = []

shuffle_enabled = False

queue_lock = threading.Lock()

def safe_name(name: str) -> str:

    name = os.path.basename(name)

    name = re.sub(r'[^\w\u4e00-\u9fff\-_. ()]', '_', name)

    return name.strip() or "unnamed"

def get_rel_name(path_str: str) -> str:

    try:

        return Path(path_str).relative_to(MIDI_FOLDER).as_posix()

    except ValueError:

        return Path(path_str).name

def is_safe_midi_path(path_str: str) -> bool:

    """僅允許 ~/midi 底下的真實檔案"""

    if not path_str or not os.path.isfile(path_str):

        return False

    try:

        Path(path_str).resolve().relative_to(MIDI_FOLDER.resolve())

        return True

    except ValueError:

        return False

def send_midi_panic():

    """產生並快速播放一個包含所有聲道 All Notes Off / Reset 的極短 MIDI 檔，清除 SC-8850 殘留音"""

    try:

        header = b'MThd\x00\x00\x00\x06\x00\x00\x00\x01\x01\xe0'

        track_events = bytearray()

        for ch in range(16):

            status = 0xB0 | ch

            # CC 121: Reset All Controllers

            track_events.extend(b'\x00' + bytes([status, 0x79, 0x00]))

            # CC 64: Damper Pedal Off (取消延音)

            track_events.extend(b'\x00' + bytes([status, 0x40, 0x00]))

            # CC 123: All Notes Off (關閉所有發聲中音符)

            track_events.extend(b'\x00' + bytes([status, 0x7B, 0x00]))

        

        track_events.extend(b'\x00\xff\x2f\x00')

        track_header = b'MTrk' + len(track_events).to_bytes(4, 'big')

        midi_data = header + track_header + bytes(track_events)

        

        tmp_path = MIDI_FOLDER / ".panic_reset.mid"

        tmp_path.write_bytes(midi_data)

        subprocess.run(["aplaymidi", "-p", MIDI_PORT, str(tmp_path)], timeout=1, stderr=subprocess.DEVNULL)

    except Exception:

        pass

def find_midi_files():

    files = []

    if not MIDI_FOLDER.exists():

        return files

    for p in MIDI_FOLDER.rglob("*"):

        if p.is_file() and p.suffix.lower() in (".mid", ".midi"):

            rel = p.relative_to(MIDI_FOLDER)

            files.append({"path": str(p), "name": str(rel)})

    files.sort(key=lambda x: x["name"].lower())

    return files

def list_dirs():

    dirs = ["."]

    if not MIDI_FOLDER.exists():

        return dirs

    for p in MIDI_FOLDER.rglob("*"):

        if p.is_dir():

            rel = str(p.relative_to(MIDI_FOLDER))

            if rel and rel != ".":

                dirs.append(rel)

    dirs.sort()

    return dirs

def detect_midi_port():

    """用 aplaymidi -l 偵測 SC-8850 / Roland，更新 MIDI_PORT"""

    global MIDI_PORT

    try:

        out = subprocess.check_output(

            ["aplaymidi", "-l"], text=True, stderr=subprocess.DEVNULL

        )

    except Exception as e:

        return False, f"無法執行 aplaymidi：{e}"

    priority, others = [], []

    for line in out.splitlines():

        line_lower = line.lower()

        if "client" in line_lower and "port" in line_lower:

            continue

        parts = line.split()

        if not parts or not re.match(r"^\d+:\d+$", parts[0]):

            continue

        port = parts[0]

        if "through" in line_lower or "system" in line_lower:

            continue

        if any(k in line_lower for k in ["8850", "sc-8850", "sc8850", "roland", "edirol"]):

            priority.append(port)

        else:

            others.append(port)

    candidates = priority + others

    if not candidates:

        return False, "未找到 SC-8850 或其他 MIDI 輸出埠，請確認已接上並開機"

    port = candidates[0]

    MIDI_PORT = port

    try:

        (Path.home() / "sc8850_port.txt").write_text(port + "\n")

    except Exception:

        pass

    return True, f"✓ 已偵測到 MIDI 埠：{port}"

def _start_play_unlocked(path: str):

    """在已持有 queue_lock 時呼叫：開始播放指定檔"""

    global current_process, current_playing_path, current_playing_name

    subprocess.run(["pkill", "-f", "aplaymidi"], stderr=subprocess.DEVNULL)

    send_midi_panic()  # 🧹 切歌/換歌時自動清除上一首殘留音與雜音

    current_playing_path = path

    current_playing_name = get_rel_name(path)

    current_process = subprocess.Popen(["aplaymidi", "-p", MIDI_PORT, path])

def _queue_or_play_unlocked(path: str):

    """在已持有 queue_lock 時呼叫：沒在播就播，有在播就加入佇列尾"""

    global current_process, play_queue

    if current_process is None or current_process.poll() is not None:

        if os.path.isfile(path):

            _start_play_unlocked(path)

    else:

        if path not in play_queue:

            play_queue.append(path)

def monitor_playback():

    global current_process, current_playing_path, current_playing_name, play_queue, shuffle_enabled

    while True:

        time.sleep(1)

        with queue_lock:

            if current_process is not None:

                ret = current_process.poll()

                if ret is not None:

                    current_process = None

                    current_playing_path = ""

                    current_playing_name = ""

                    

                    if play_queue:

                        next_path = play_queue.pop(0)

                        if os.path.isfile(next_path):

                            _start_play_unlocked(next_path)

                    elif shuffle_enabled:

                        all_files = find_midi_files()

                        if all_files:

                            candidates = [f["path"] for f in all_files if f["path"] != current_playing_path]

                            if not candidates:

                                candidates = [f["path"] for f in all_files]

                            if candidates:

                                next_path = random.choice(candidates)

                                if os.path.isfile(next_path):

                                    _start_play_unlocked(next_path)

threading.Thread(target=monitor_playback, daemon=True).start()

def play_next_in_queue_or_start(target_path: str):

    """外部呼叫：加鎖後點歌或排隊"""

    if not is_safe_midi_path(target_path):

        return False

    with queue_lock:

        _queue_or_play_unlocked(target_path)

    return True

def skip_current():

    """切歌：只停目前這首，保留佇列，由 monitor 播下一首（或隨機曲）"""

    global current_process, current_playing_path, current_playing_name, play_queue, shuffle_enabled

    with queue_lock:

        subprocess.run(["pkill", "-f", "aplaymidi"], stderr=subprocess.DEVNULL)

        send_midi_panic()  # 🧹 手動切歌時清除雜音

        current_process = None

        current_playing_path = ""

        current_playing_name = ""

        if play_queue:

            next_path = play_queue.pop(0)

            if os.path.isfile(next_path):

                _start_play_unlocked(next_path)

        elif shuffle_enabled:

            all_files = find_midi_files()

            if all_files:

                next_path = random.choice(all_files)["path"]

                if os.path.isfile(next_path):

                    _start_play_unlocked(next_path)

def stop_midi():

    """停止並清空佇列"""

    global current_process, current_playing_path, current_playing_name, play_queue

    with queue_lock:

        subprocess.run(["pkill", "-f", "aplaymidi"], stderr=subprocess.DEVNULL)

        send_midi_panic()  # 🧹 停止播放時徹底讓音源機安靜

        current_process = None

        current_playing_path = ""

        current_playing_name = ""

        play_queue.clear()

HTML = r"""

<!DOCTYPE html>

<html lang="zh-Hant">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>SC-8850 KTV 點歌系統</title>

  <style>

    :root {

      --bg: #0f1117;

      --card: #1a1d27;

      --border: #2a2e3a;

      --text: #e8eaed;

      --muted: #9aa0a6;

      --accent: #f43f5e;

      --accent-hover: #e11d48;

      --success: #34d399;

      --danger: #f87171;

      --warning: #fbbf24;

      --info: #38bdf8;

      --purple: #a855f7;

    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {

      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", sans-serif;

      background: var(--bg);

      color: var(--text);

      min-height: 100vh;

      padding: 20px 14px 48px;

      line-height: 1.5;

    }

    .container { max-width: 720px; margin: 0 auto; }

    header { text-align: center; margin-bottom: 16px; }

    header h1 {

      font-size: 1.7rem; font-weight: 700;

      background: linear-gradient(135deg, #fb7185, #38bdf8);

      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;

    }

    header p { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }

    .now-playing-box {

      background: linear-gradient(135deg, rgba(244,63,94,0.15), rgba(56,189,248,0.15));

      border: 1px solid var(--accent);

      border-radius: 14px;

      padding: 14px 18px;

      margin-bottom: 16px;

      display: none;

      align-items: center;

      justify-content: space-between;

      gap: 12px;

      box-shadow: 0 4px 20px rgba(244,63,94,0.15);

    }

    .np-info { display: flex; align-items: center; gap: 12px; min-width: 0; }

    .np-icon { font-size: 1.8rem; animation: bounce 1s infinite alternate; flex-shrink: 0; }

    @keyframes bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-4px); } }

    .np-title { font-size: 0.8rem; color: var(--muted); letter-spacing: 1px; }

    .np-song { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--success); }

    .tabs {

      display: flex; gap: 8px; margin-bottom: 14px;

      background: var(--card); padding: 4px; border-radius: 12px; border: 1px solid var(--border);

    }

    .tab-btn {

      flex: 1; padding: 10px; border: none; background: transparent; color: var(--muted);

      font-weight: 600; font-size: 0.95rem; border-radius: 8px; cursor: pointer; transition: all 0.2s;

    }

    .tab-btn.active { background: var(--accent); color: white; }

    .tab-content { display: none; }

    .tab-content.active { display: block; }

    .search-box { margin-bottom: 14px; position: relative; }

    .search-input {

      width: 100%; background: var(--card); border: 1px solid var(--border);

      color: var(--text); border-radius: 12px; padding: 12px 16px 12px 42px;

      font-size: 0.95rem; outline: none;

    }

    .search-input:focus { border-color: var(--accent); }

    .search-icon {

      position: absolute; left: 14px; top: 50%; transform: translateY(-50%);

      font-size: 1.1rem; color: var(--muted); pointer-events: none;

    }

    .panel {

      background: var(--card); border: 1px solid var(--border); border-radius: 12px;

      padding: 12px 16px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 10px;

      align-items: center; justify-content: space-between;

    }

    .panel select {

      background: var(--bg); border: 1px solid var(--border); color: var(--text);

      border-radius: 8px; padding: 8px 12px; font-size: 0.9rem;

    }

    .actions, .actions-secondary {

      display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;

    }

    .btn {

      flex: 1; min-width: 90px; padding: 10px 12px;

      border: none; border-radius: 10px; font-size: 0.88rem; font-weight: 600; cursor: pointer;

      transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px;

    }

    .btn-primary { background: var(--accent); color: white; }

    .btn-primary:hover { background: var(--accent-hover); }

    .btn-success { background: var(--success); color: #000; }

    .btn-success:hover { background: #2bc387; }

    .btn-danger {

      background: rgba(248,113,113,0.15); color: var(--danger);

      border: 1px solid rgba(248,113,113,0.3);

    }

    .btn-danger:hover { background: rgba(248,113,113,0.25); }

    .btn-warning {

      background: rgba(251,191,36,0.15); color: var(--warning);

      border: 1px solid rgba(251,191,36,0.3);

    }

    .btn-warning:hover { background: rgba(251,191,36,0.25); }

    .btn-secondary {

      background: var(--card); color: var(--text); border: 1px solid var(--border);

    }

    .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

    .btn-info {

      background: rgba(56,189,248,0.15); color: var(--info);

      border: 1px solid rgba(56,189,248,0.3);

    }

    .btn-info:hover { background: rgba(56,189,248,0.25); }

    

    .btn-shuffle {

      background: rgba(168,85,247,0.15); color: var(--purple);

      border: 1px solid rgba(168,85,247,0.3);

    }

    .btn-shuffle:hover { background: rgba(168,85,247,0.25); }

    .btn-shuffle.active {

      background: var(--purple); color: white; border-color: var(--purple);

      box-shadow: 0 0 12px rgba(168,85,247,0.4);

    }

    .status {

      display: none; padding: 12px 16px; border-radius: 10px; margin-bottom: 14px; font-size: 0.9rem;

      background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.3); color: var(--success);

    }

    .status.error {

      background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.3); color: var(--danger);

    }

    .section-header {

      display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;

    }

    .section-header h2 { font-size: 1.05rem; font-weight: 600; }

    .section-header span { color: var(--muted); font-size: 0.85rem; }

    .file-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }

    .file-item {

      background: var(--card); border: 1px solid var(--border); border-radius: 12px;

      padding: 10px 14px; display: flex; align-items: center; gap: 10px;

    }

    .file-item:hover { border-color: var(--accent); background: rgba(244,63,94,0.04); }

    .file-item.playing { border-color: var(--success); background: rgba(52,211,153,0.08); }

    .file-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }

    .file-details { min-width: 0; flex: 1; }

    .file-name { font-weight: 500; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .file-path { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

    .ktv-btn {

      background: var(--accent); color: white; border: none; border-radius: 8px;

      padding: 6px 12px; font-size: 0.82rem; font-weight: 600; cursor: pointer; flex-shrink: 0;

    }

    .ktv-btn:hover { background: var(--accent-hover); }

    .empty {

      text-align: center; padding: 36px 20px; color: var(--muted);

      background: var(--card); border-radius: 12px; border: 1px solid var(--border);

    }

    input[type="file"] { display: none; }

    input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }

    .modal-bg {

      display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100;

      align-items: center; justify-content: center; padding: 16px;

    }

    .modal-bg.show { display: flex; }

    .modal {

      background: var(--card); border: 1px solid var(--border); border-radius: 16px;

      padding: 24px; width: 100%; max-width: 360px;

    }

    .modal h3 { margin-bottom: 14px; font-size: 1.1rem; }

    .modal input {

      width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text);

      border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; outline: none;

    }

    .modal input:focus { border-color: var(--accent); }

    .modal-actions { display: flex; gap: 10px; }

    .modal-actions .btn { flex: 1; }

  </style>

</head>

<body>

  <div class="container">

    <header>

      <h1>SC-8850 KTV 點歌台</h1>

      <p>埠 <span id="portLabel">-</span> · 點歌排隊 · 隨機播放 · 重新偵測</p>

    </header>

    <div class="now-playing-box" id="npBox">

      <div class="np-info">

        <div class="np-icon">🎤</div>

        <div>

          <div class="np-title">正在熱唱中</div>

          <div class="np-song" id="npSong">-</div>

        </div>

      </div>

      <button class="btn btn-warning" style="flex:0;padding:6px 12px;font-size:0.82rem;" onclick="skipPlay()">⏭ 切歌</button>

    </div>

    <div class="tabs">

      <button class="tab-btn active" onclick="switchTab('songs')">🎵 點歌目錄</button>

      <button class="tab-btn" onclick="switchTab('queue')" id="queueTabBtn">📜 已點清單 (0)</button>

    </div>

    <div class="status" id="status"></div>

    <div class="tab-content active" id="tabSongs">

      <div class="search-box">

        <span class="search-icon">🔍</span>

        <input type="text" class="search-input" id="searchInput"

               placeholder="輸入關鍵字搜尋曲名或分類..." oninput="filterList()">

      </div>

      <div class="panel">

        <div style="display:flex;align-items:center;gap:8px;flex:1;flex-wrap:wrap;">

          <label style="color:var(--muted);font-size:0.88rem;">上傳至：</label>

          <select id="uploadDir" style="flex:1;min-width:110px;max-width:160px;">

            <option value=".">根目錄</option>

          </select>

          <button class="btn btn-secondary" style="flex:0;min-width:auto;padding:8px 10px;font-size:0.82rem;" onclick="showNewDir()">＋ 新增資料夾</button>

        </div>

      </div>

      <div class="actions">

        <button class="btn btn-success" onclick="queueSelected()">➕ 勾選加入清單</button>

        <button class="btn btn-secondary" onclick="toggleSelectAll()">☑ 全選/取消</button>

        <button class="btn btn-primary" onclick="document.getElementById('fileInput').click()">📤 上傳(插播)</button>

      </div>

      <div class="actions-secondary">

        <button class="btn btn-warning" onclick="skipPlay()">⏭ 切歌</button>

        <button class="btn btn-shuffle" id="shuffleBtn" onclick="toggleShuffle()">🔀 隨機播放：關</button>

        <button class="btn btn-danger" onclick="stopPlay()">⏹ 停止並清空</button>

        <button class="btn btn-info" onclick="redetectMidi()">🔌 重新偵測</button>

      </div>

      <div class="section-header">

        <h2>全部曲庫</h2>

        <span id="count"></span>

      </div>

      <ul class="file-list" id="fileList"></ul>

    </div>

    <div class="tab-content" id="tabQueue">

      <div class="actions" style="margin-bottom: 14px;">

        <button class="btn btn-danger" onclick="clearQueue()">🗑 清空已點清單</button>

        <button class="btn btn-secondary" onclick="pollStatus()">🔄 重新整理</button>

      </div>

      <div class="section-header">

        <h2>等待播放佇列</h2>

        <span id="queueCount">0 首</span>

      </div>

      <ul class="file-list" id="queueList"></ul>

    </div>

    <input type="file" id="fileInput" accept=".mid,.midi" multiple>

  </div>

  <div class="modal-bg" id="dirModal">

    <div class="modal">

      <h3>新增音樂資料夾</h3>

      <input type="text" id="newDirName" placeholder="例如：anime、gs_classics" maxlength="40">

      <div class="modal-actions">

        <button class="btn btn-secondary" onclick="hideNewDir()">取消</button>

        <button class="btn btn-primary" onclick="createDir()">建立</button>

      </div>

    </div>

  </div>

  <script>

    let allFiles = [];

    let currentQueue = [];

    let currentPlaying = "";

    let isShuffleOn = false;

    const statusEl = document.getElementById('status');

    const fileList = document.getElementById('fileList');

    const queueList = document.getElementById('queueList');

    const countEl = document.getElementById('count');

    const queueCount = document.getElementById('queueCount');

    const queueTabBtn = document.getElementById('queueTabBtn');

    const uploadDir = document.getElementById('uploadDir');

    const npBox = document.getElementById('npBox');

    const npSong = document.getElementById('npSong');

    const searchInput = document.getElementById('searchInput');

    const portLabel = document.getElementById('portLabel');

    const fileInput = document.getElementById('fileInput');

    const shuffleBtn = document.getElementById('shuffleBtn');

    function showStatus(msg, isError) {

      statusEl.style.display = 'block';

      statusEl.textContent = msg;

      statusEl.className = 'status' + (isError ? ' error' : '');

      clearTimeout(window._st);

      window._st = setTimeout(() => { statusEl.style.display = 'none'; }, 3500);

    }

    function switchTab(tabName) {

      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));

      document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

      if (tabName === 'songs') {

        document.querySelectorAll('.tab-btn')[0].classList.add('active');

        document.getElementById('tabSongs').classList.add('active');

      } else {

        document.querySelectorAll('.tab-btn')[1].classList.add('active');

        document.getElementById('tabQueue').classList.add('active');

      }

    }

    fileInput.addEventListener('change', () => {

      if (fileInput.files.length) uploadFiles(fileInput.files);

      fileInput.value = '';

    });

    async function uploadFiles(fileListObj) {

      const dir = uploadDir.value || '.';

      let ok = 0;

      for (const file of fileListObj) {

        const fd = new FormData();

        fd.append('midi', file);

        fd.append('dir', dir);

        try {

          const res = await fetch('/upload', { method: 'POST', body: fd });

          if (res.ok) ok++;

        } catch (e) {}

      }

      loadList();

      pollStatus();

      if (ok) showStatus(`✓ 成功上傳 ${ok} 個檔案（插播）`);

    }

    async function queueSingle(path) {

      try {

        const res = await fetch('/queue/add', {

          method: 'POST',

          headers: { 'Content-Type': 'application/json' },

          body: JSON.stringify({ path })

        });

        showStatus(await res.text(), !res.ok);

        pollStatus();

      } catch (e) { showStatus('點歌失敗', true); }

    }

    async function queueSelected() {

      const checkboxes = document.querySelectorAll('#fileList .file-checkbox:checked');

      if (!checkboxes.length) {

        showStatus('請先勾選要點播的歌曲', true);

        return;

      }

      const paths = Array.from(checkboxes).map(cb => cb.dataset.path);

      try {

        const res = await fetch('/queue/add_batch', {

          method: 'POST',

          headers: { 'Content-Type': 'application/json' },

          body: JSON.stringify({ paths })

        });

        showStatus(await res.text(), !res.ok);

        checkboxes.forEach(cb => { cb.checked = false; });

        pollStatus();

      } catch (e) { showStatus('批次點歌失敗', true); }

    }

    async function priorityQueue(index) {

      try {

        await fetch('/queue/priority', {

          method: 'POST',

          headers: { 'Content-Type': 'application/json' },

          body: JSON.stringify({ index })

        });

        showStatus('⚡ 已設為下一首優先');

        pollStatus();

      } catch (e) {}

    }

    async function removeQueue(index) {

      try {

        await fetch('/queue/remove', {

          method: 'POST',

          headers: { 'Content-Type': 'application/json' },

          body: JSON.stringify({ index })

        });

        pollStatus();

      } catch (e) {}

    }

    async function clearQueue() {

      if (!confirm('確定要清空所有已點等待清單嗎？')) return;

      try {

        await fetch('/queue/clear', { method: 'POST' });

        showStatus('已清空排隊清單');

        pollStatus();

      } catch (e) {}

    }

    async function toggleShuffle() {

      try {

        const res = await fetch('/toggle_shuffle', { method: 'POST' });

        const data = await res.json();

        isShuffleOn = data.shuffle;

        updateShuffleUI();

        showStatus(isShuffleOn ? '🔀 已開啟背景隨機播放' : '🔀 已關閉背景隨機播放');

      } catch (e) { showStatus('切換隨機播放失敗', true); }

    }

    function updateShuffleUI() {

      if (isShuffleOn) {

        shuffleBtn.classList.add('active');

        shuffleBtn.textContent = '🔀 隨機播放：開';

      } else {

        shuffleBtn.classList.remove('active');

        shuffleBtn.textContent = '🔀 隨機播放：關';

      }

    }

    async function skipPlay() {

      try {

        const res = await fetch('/skip', { method: 'POST' });

        showStatus(await res.text());

        pollStatus();

      } catch (e) { showStatus('切歌失敗', true); }

    }

    async function stopPlay() {

      if (!confirm('停止播放並清空全部佇列？')) return;

      try {

        await fetch('/stop', { method: 'POST' });

        showStatus('已停止並清空佇列');

        pollStatus();

      } catch (e) {}

    }

    async function redetectMidi() {

      if (!confirm('將停止目前播放並重新偵測 SC-8850 埠號，確定？')) return;

      showStatus('正在重新偵測 MIDI…');

      try {

        const res = await fetch('/redetect_midi', { method: 'POST' });

        showStatus(await res.text(), !res.ok);

        pollStatus();

      } catch (e) { showStatus('偵測失敗', true); }

    }

    function toggleSelectAll() {

      const boxes = document.querySelectorAll('#fileList .file-item:not([style*="display: none"]) .file-checkbox');

      if (!boxes.length) return;

      const allChecked = Array.from(boxes).every(cb => cb.checked);

      boxes.forEach(cb => { cb.checked = !allChecked; });

    }

    function filterList() {

      const keyword = searchInput.value.toLowerCase().trim();

      const items = document.querySelectorAll('#fileList .file-item');

      let visible = 0;

      items.forEach(item => {

        const name = (item.dataset.name || '').toLowerCase();

        if (!keyword || name.includes(keyword)) {

          item.style.display = '';

          visible++;

        } else {

          item.style.display = 'none';

        }

      });

      countEl.textContent = keyword

        ? `符合 ${visible} / 共 ${allFiles.length} 首`

        : (allFiles.length ? `${allFiles.length} 首` : '');

    }

    async function pollStatus() {

      try {

        const res = await fetch('/status');

        const data = await res.json();

        currentPlaying = data.playing_name || '';

        currentQueue = data.queue || [];

        isShuffleOn = data.shuffle;

        updateShuffleUI();

        if (data.midi_port) portLabel.textContent = data.midi_port;

        if (currentPlaying) {

          npBox.style.display = 'flex';

          npSong.textContent = currentPlaying;

        } else {

          npBox.style.display = 'none';

        }

        queueTabBtn.textContent = `📜 已點清單 (${currentQueue.length})`;

        queueCount.textContent = `${currentQueue.length} 首`;

        if (!currentQueue.length) {

          queueList.innerHTML = `<li class="empty">目前沒有人在排隊，趕快去點歌吧！</li>`;

        } else {

          queueList.innerHTML = '';

          currentQueue.forEach((qItem, idx) => {

            const li = document.createElement('li');

            li.className = 'file-item';

            li.innerHTML = `

              <div style="font-weight:700;color:var(--accent);min-width:24px;">#${idx + 1}</div>

              <div class="file-info">

                <div class="file-details">

                  <div class="file-name">${qItem.name}</div>

                  <div class="file-path">${qItem.folder || ''}</div>

                </div>

              </div>

              <button class="btn btn-warning" style="flex:0;padding:6px 10px;font-size:0.78rem;" data-i="${idx}">⚡插播</button>

              <button class="btn btn-danger" style="flex:0;padding:6px 10px;font-size:0.78rem;" data-r="${idx}">退歌</button>

            `;

            li.querySelector('[data-i]').onclick = () => priorityQueue(idx);

            li.querySelector('[data-r]').onclick = () => removeQueue(idx);

            queueList.appendChild(li);

          });

        }

        document.querySelectorAll('#fileList .file-item').forEach(item => {

          if (item.dataset.name === currentPlaying) item.classList.add('playing');

          else item.classList.remove('playing');

        });

      } catch (e) {}

    }

    async function loadDirs() {

      const res = await fetch('/dirs');

      const dirs = await res.json();

      uploadDir.innerHTML = '';

      dirs.forEach(d => {

        const opt = document.createElement('option');

        opt.value = d;

        opt.textContent = d === '.' ? '根目錄 (~/midi)' : d;

        uploadDir.appendChild(opt);

      });

    }

    async function loadList() {

      try {

        const res = await fetch('/list');

        allFiles = await res.json();

        fileList.innerHTML = '';

        countEl.textContent = allFiles.length ? `${allFiles.length} 首` : '';

        if (!allFiles.length) {

          fileList.innerHTML = `<li class="empty">~/midi 目錄尚無 MIDI 檔</li>`;

          return;

        }

        allFiles.forEach(f => {

          const parts = f.name.split('/');

          const name = parts.pop();

          const folder = parts.length ? parts.join('/') + '/' : '';

          const li = document.createElement('li');

          li.className = 'file-item';

          li.dataset.name = f.name;

          li.innerHTML = `

            <div class="file-info">

              <input type="checkbox" class="file-checkbox">

              <div class="file-details">

                <div class="file-name">${name}</div>

                ${folder ? `<div class="file-path">${folder}</div>` : ''}

              </div>

            </div>

            <button class="ktv-btn" type="button">➕ 點歌</button>

          `;

          li.querySelector('.file-checkbox').dataset.path = f.path;

          li.querySelector('.ktv-btn').onclick = () => queueSingle(f.path);

          fileList.appendChild(li);

        });

        filterList();

        pollStatus();

      } catch (e) {

        fileList.innerHTML = '<li class="empty">無法讀取曲庫清單</li>';

      }

    }

    function showNewDir() {

      document.getElementById('dirModal').classList.add('show');

      document.getElementById('newDirName').value = '';

      document.getElementById('newDirName').focus();

    }

    function hideNewDir() {

      document.getElementById('dirModal').classList.remove('show');

    }

    async function createDir() {

      const name = document.getElementById('newDirName').value.trim();

      if (!name) { showStatus('請輸入目錄名稱', true); return; }

      try {

        const res = await fetch('/mkdir', {

          method: 'POST',

          headers: { 'Content-Type': 'application/json' },

          body: JSON.stringify({ name })

        });

        const text = await res.text();

        showStatus(text, !res.ok);

        if (res.ok) {

          hideNewDir();

          await loadDirs();

          uploadDir.value = name;

        }

      } catch (e) { showStatus('建立失敗', true); }

    }

    loadDirs();

    loadList();

    setInterval(pollStatus, 2000);

  </script>

</body>

</html>

"""

@app.route("/")

def index():

    return render_template_string(HTML)

@app.route("/list")

def list_files():

    return jsonify(find_midi_files())

@app.route("/dirs")

def dirs():

    return jsonify(list_dirs())

@app.route("/status")

def status():

    with queue_lock:

        queue_data = []

        for p in play_queue:

            queue_data.append({

                "path": p,

                "name": Path(p).name,

                "folder": get_rel_name(p),

            })

        return jsonify({

            "playing_name": current_playing_name,

            "queue": queue_data,

            "midi_port": MIDI_PORT,

            "shuffle": shuffle_enabled,

        })

@app.route("/toggle_shuffle", methods=["POST"])

def toggle_shuffle():

    global shuffle_enabled

    with queue_lock:

        shuffle_enabled = not shuffle_enabled

    return jsonify({"shuffle": shuffle_enabled})

@app.route("/queue/add", methods=["POST"])

def queue_add():

    data = request.get_json() or {}

    path = data.get("path", "")

    if not is_safe_midi_path(path):

        return "檔案不存在或不在允許目錄", 400

    play_next_in_queue_or_start(path)

    return f"✓ 已將「{Path(path).name}」加入點歌佇列"

@app.route("/queue/add_batch", methods=["POST"])

def queue_add_batch():

    data = request.get_json() or {}

    paths = data.get("paths", [])

    if not paths:

        return "未選擇任何檔案", 400

    count = 0

    with queue_lock:

        for p in paths:

            if not is_safe_midi_path(p):

                continue

            _queue_or_play_unlocked(p)

            count += 1

    return f"✓ 已成功將 {count} 首歌加入排隊清單"

@app.route("/queue/priority", methods=["POST"])

def queue_priority():

    data = request.get_json() or {}

    idx = data.get("index")

    if idx is None:

        return "Invalid index", 400

    with queue_lock:

        if 0 <= idx < len(play_queue):

            item = play_queue.pop(idx)

            play_queue.insert(0, item)

    return "OK"

@app.route("/queue/remove", methods=["POST"])

def queue_remove():

    data = request.get_json() or {}

    idx = data.get("index")

    if idx is None:

        return "Invalid index", 400

    with queue_lock:

        if 0 <= idx < len(play_queue):

            play_queue.pop(idx)

    return "OK"

@app.route("/queue/clear", methods=["POST"])

def queue_clear():

    with queue_lock:

        play_queue.clear()

    return "OK"

@app.route("/skip", methods=["POST"])

def skip():

    skip_current()

    return "⏭ 已切歌"

@app.route("/stop", methods=["POST"])

def stop():

    stop_midi()

    return "⏹ 已停止並清空佇列"

@app.route("/redetect_midi", methods=["POST"])

def redetect_midi():

    stop_midi()

    time.sleep(0.3)

    ok, msg = detect_midi_port()

    return msg, (200 if ok else 400)

@app.route("/upload", methods=["POST"])

def upload():

    f = request.files.get("midi")

    if not f or not f.filename or not f.filename.lower().endswith((".mid", ".midi")):

        return "檔案格式錯誤", 400

    sub = request.form.get("dir", ".").strip() or "."

    sub = sub.replace("..", "").strip("/")

    target_dir = MIDI_FOLDER if sub in ("", ".") else (MIDI_FOLDER / sub)

    try:

        target_dir.resolve().relative_to(MIDI_FOLDER.resolve())

    except ValueError:

        target_dir = MIDI_FOLDER

    target_dir.mkdir(parents=True, exist_ok=True)

    fname = safe_name(f.filename)

    save_path = target_dir / fname

    if save_path.exists():

        stem, suf = save_path.stem, save_path.suffix

        n = 1

        while save_path.exists():

            save_path = target_dir / f"{stem}_{n}{suf}"

            n += 1

    f.save(str(save_path))

    path_str = str(save_path)

    with queue_lock:

        if current_process is None or current_process.poll() is not None:

            _start_play_unlocked(path_str)

        else:

            if path_str in play_queue:

                play_queue.remove(path_str)

            play_queue.insert(0, path_str)

    return f"✓ 已上傳並設為插播：{save_path.name}"

@app.route("/mkdir", methods=["POST"])

def mkdir():

    data = request.get_json() or {}

    name = safe_name(data.get("name", ""))

    if not name or name in (".", ".."):

        return "目錄名稱無效", 400

    path = MIDI_FOLDER / name

    if path.exists():

        return f"目錄已存在：{name}", 400

    path.mkdir(parents=True, exist_ok=False)

    return f"✓ 已建立 ~/midi/{name}"

if __name__ == "__main__":

    MIDI_FOLDER.mkdir(parents=True, exist_ok=True)

    ok, msg = detect_midi_port()

    print(msg)

    print(f"MIDI 資料夾：{MIDI_FOLDER}")

    print(f"使用 MIDI 埠：{MIDI_PORT}")

    print("KTV 點歌台 → http://MIDIbox:8080")

    app.run(host="0.0.0.0", port=8080, debug=False)