feat(download): 后端支持 Range 分块; 前端引入多线程分块下载加速音频加载

README.md

@@ -33,55 +33,6 @@ http://<服务器IP>/
 - 创建 `systemd` 服务，使用 `gunicorn` 直接监听 `0.0.0.0:80`
 - 开放防火墙 `80/tcp`（如系统启用了 `ufw`）
 
-## 全命令部署（使用 Docker 部署 MongoDB）
-
-适用系统：Ubuntu 20.04+/22.04+/24.04（需 root），MongoDB 通过 Docker 启动，其余步骤照常。
-
-1. 安装 Docker 并启动：
-   ```bash
-   sudo apt update
-   sudo apt install -y docker.io
-   sudo systemctl enable --now docker
-   ```
-2. 启动 MongoDB 容器（持久化到 `/srv/taiko-web-mongo`，监听 `27017`）：
-   ```bash
-   sudo mkdir -p /srv/taiko-web-mongo
-   sudo docker run -d \
-     --name taiko-web-mongo \
-     --restart unless-stopped \
-     -v /srv/taiko-web-mongo:/data/db \
-     -p 27017:27017 \
-     mongo:6
-   ```
-   如需开启认证，可加上：
-   ```bash
-   -e MONGO_INITDB_ROOT_USERNAME=<用户名> -e MONGO_INITDB_ROOT_PASSWORD=<强密码>
-   ```
-   并在应用侧通过环境变量指定 Host：
-   ```bash
-   export TAIKO_WEB_MONGO_HOST=127.0.0.1:27017
-   ```
-3. 安装并启动 Redis（照常）：
-   ```bash
-   sudo apt install -y redis-server
-   sudo systemctl enable --now redis-server
-   ```
-4. 准备项目与虚拟环境（照常）：
-   ```bash
-   sudo mkdir -p /srv/taiko-web
-   sudo rsync -a --delete --exclude '.git' --exclude '.venv' . /srv/taiko-web/
-   sudo python3 -m venv /srv/taiko-web/.venv
-   sudo /srv/taiko-web/.venv/bin/pip install -U pip
-   sudo /srv/taiko-web/.venv/bin/pip install -r /srv/taiko-web/requirements.txt
-   sudo cp /srv/taiko-web/config.example.py /srv/taiko-web/config.py
-   ```
-5. 赋予 80 端口绑定权限并启动：
-   ```bash
-   sudo setcap 'cap_net_bind_service=+ep' /srv/taiko-web/.venv/bin/python3
-   export TAIKO_WEB_MONGO_HOST=${TAIKO_WEB_MONGO_HOST:-127.0.0.1:27017}
-   sudo /srv/taiko-web/.venv/bin/gunicorn -b 0.0.0.0:80 app:app
-   ```
-
 ## 手动部署（可选）
 
 1. 安装依赖：
@@ -143,30 +94,3 @@ docker run --detach \
 ---
 
 如需将监听接口改为仅内网或增加并发工作数（例如 `--workers 4`），可在 `setup.sh` 或 `systemd` 服务中调整。
-## 歌曲类型（Type）
-
-- 可选枚举：
-  - 01 Pop
-  - 02 Anime
-  - 03 Vocaloid
-  - 04 Children and Folk
-  - 05 Variety
-  - 06 Classical
-  - 07 Game Music
-  - 08 Live Festival Mode
-  - 09 Namco Original
-  - 10 Taiko Towers
-  - 11 Dan Dojo
-
-### 上传要求
-- 上传表单新增必填字段 `song_type`，取值为上述枚举之一
-- 成功后将写入 MongoDB `songs.song_type`
-
-### API 扩展
-- `GET /api/songs?type=<歌曲类型>` 按类型过滤返回启用歌曲
-- 示例：`/api/songs?type=02%20Anime`
-- 返回项包含 `song_type` 字段
-
-### 前端切换
-- 在歌曲选择页顶部显示当前歌曲类型标签
-- 使用左右跳转（Shift+左右或肩键）自动切换类型并刷新列表

app.py

@@ -28,6 +28,7 @@ import tjaf
 
 from functools import wraps
 from flask import Flask, g, jsonify, render_template, request, abort, redirect, session, flash, make_response, send_from_directory
+import mimetypes
 from flask_caching import Cache
 from flask_session import Session
 from flask_wtf.csrf import CSRFProtect, generate_csrf, CSRFError
@@ -45,19 +46,6 @@ def take_config(name, required=False):
         return None
 
 app = Flask(__name__)
-SONG_TYPES = [
-    "01 Pop",
-    "02 Anime",
-    "03 Vocaloid",
-    "04 Children and Folk",
-    "05 Variety",
-    "06 Classical",
-    "07 Game Music",
-    "08 Live Festival Mode",
-    "09 Namco Original",
-    "10 Taiko Towers",
-    "11 Dan Dojo",
-]
 
 def get_remote_address() -> str:
     return flask.request.headers.get("CF-Connecting-IP") or flask.request.headers.get("X-Forwarded-For") or flask.request.remote_addr or "127.0.0.1"
@@ -103,7 +91,6 @@ sess.init_app(app)
 db = client[take_config('MONGO', required=True)['database']]
 db.users.create_index('username', unique=True)
 db.songs.create_index('id', unique=True)
-db.songs.create_index('song_type')
 db.scores.create_index('username')
 
 
@@ -494,13 +481,7 @@ def route_api_preview():
 @app.route(basedir + 'api/songs')
 @app.cache.cached(timeout=15)
 def route_api_songs():
-    type_q = flask.request.args.get('type')
-    query = {'enabled': True}
-    if type_q:
-        if type_q not in SONG_TYPES:
-            return abort(400)
-        query['song_type'] = type_q
-    songs = list(db.songs.find(query, {'_id': False, 'enabled': False}))
+    songs = list(db.songs.find({'enabled': True}, {'_id': False, 'enabled': False}))
     for song in songs:
         if song['maker_id']:
             if song['maker_id'] == 0:
@@ -806,7 +787,33 @@ def send_assets(ref):
 
 @app.route(basedir + "songs/<path:ref>")
 def send_songs(ref):
-    return cache_wrap(flask.send_from_directory("public/songs", ref), 604800)
+    path = os.path.normpath(os.path.join("public/songs", ref))
+    if not os.path.isfile(path):
+        return abort(404)
+    rng = flask.request.headers.get("Range")
+    if rng and re.match(r"^bytes=\d+-\d*$", rng):
+        size = os.path.getsize(path)
+        m = re.match(r"bytes=(\d+)-(\d*)", rng)
+        start = int(m.group(1))
+        end = int(m.group(2) or size - 1)
+        start = max(0, start)
+        end = min(size - 1, end)
+        with open(path, "rb") as f:
+            f.seek(start)
+            data = f.read(end - start + 1)
+        mime = mimetypes.guess_type(path)[0] or "application/octet-stream"
+        resp = flask.Response(data, 206, mimetype=mime)
+        resp.headers["Content-Range"] = f"bytes {start}-{end}/{size}"
+        resp.headers["Accept-Ranges"] = "bytes"
+        resp.headers["Cache-Control"] = "public, max-age=604800, s-maxage=604800"
+        resp.headers["CDN-Cache-Control"] = "max-age=604800"
+        return resp
+    resp = flask.send_from_directory("public/songs", ref)
+    res = flask.make_response(resp)
+    res.headers["Accept-Ranges"] = "bytes"
+    res.headers["Cache-Control"] = "public, max-age=604800, s-maxage=604800"
+    res.headers["CDN-Cache-Control"] = "max-age=604800"
+    return res
 
 @app.route(basedir + "manifest.json")
 def send_manifest():
@@ -873,12 +880,6 @@ def upload_file():
         db_entry['enabled'] = True
         pprint.pprint(db_entry)
 
-        # 必要な歌曲类型
-        song_type = flask.request.form.get('song_type')
-        if not song_type or song_type not in SONG_TYPES:
-            return flask.jsonify({'error': 'invalid_song_type'})
-        db_entry['song_type'] = song_type
-
         # mongoDBにデータをぶち込む（重複IDは部分更新で上書きし、_id を不変に保つ）
         coll = client['taiko']["songs"]
         try:

public/src/js/abstractfile.js

@@ -51,6 +51,55 @@ class RemoteFile{
 			request.responseType = "arraybuffer"
 		})
 	}
+	arrayBufferFast(threads){
+		var t = threads || 4
+		var head = new XMLHttpRequest()
+		head.open("HEAD", this.url)
+		var headPromise = pageEvents.load(head).then(() => {
+			if(head.status !== 200){
+				return Promise.reject()
+			}
+			var len = parseInt(head.getResponseHeader("Content-Length"))
+			if(!len || len < 262144){
+				return this.arrayBuffer()
+			}
+			var chunk = Math.ceil(len / t)
+			var ranges = []
+			for(var i = 0; i < t; i++){
+				var start = i * chunk
+				var end = Math.min(len - 1, (i + 1) * chunk - 1)
+				if(start > end){ break }
+				ranges.push([start, end])
+			}
+			var promises = ranges.map(r => {
+				var req = new XMLHttpRequest()
+				req.open("GET", this.url)
+				req.responseType = "arraybuffer"
+				req.setRequestHeader("Range", "bytes=" + r[0] + "-" + r[1])
+				return pageEvents.load(req).then(() => {
+					if(req.status !== 206 && req.status !== 200){
+						return Promise.reject()
+					}
+					return req.response
+				})
+			})
+			return Promise.all(promises).then(parts => {
+				var total = 0
+				for(var i = 0; i < parts.length; i++){
+					total += parts[i].byteLength
+				}
+				var out = new Uint8Array(total)
+				var offset = 0
+				for(var i = 0; i < parts.length; i++){
+					out.set(new Uint8Array(parts[i]), offset)
+					offset += parts[i].byteLength
+				}
+				return out.buffer
+			})
+		})
+		head.send()
+		return headPromise.catch(() => this.arrayBuffer())
+	}
 	read(encoding){
 		if(encoding){
 			return this.blob().then(blob => readFile(blob, false, encoding))

public/src/js/songselect.js

@@ -386,32 +386,6 @@ class SongSelect{
 		}
 		
 		this.songSelect = document.getElementById("song-select")
-		this.songTypes = [
-			"01 Pop",
-			"02 Anime",
-			"03 Vocaloid",
-			"04 Children and Folk",
-			"05 Variety",
-			"06 Classical",
-			"07 Game Music",
-			"08 Live Festival Mode",
-			"09 Namco Original",
-			"10 Taiko Towers",
-			"11 Dan Dojo",
-		]
-		this.songTypeIndex = Math.max(0, Math.min(this.songTypes.length - 1, +(localStorage.getItem("songTypeIndex") || 0)))
-		this.typeLabel = document.createElement("div")
-		this.typeLabel.style.position = "absolute"
-		this.typeLabel.style.top = "8px"
-		this.typeLabel.style.left = "12px"
-		this.typeLabel.style.padding = "4px 8px"
-		this.typeLabel.style.background = "rgba(0,0,0,0.5)"
-		this.typeLabel.style.color = "#fff"
-		this.typeLabel.style.borderRadius = "6px"
-		this.typeLabel.style.fontSize = "14px"
-		this.typeLabel.style.zIndex = "10"
-		this.songSelect.appendChild(this.typeLabel)
-		this.updateTypeLabel()
 		var cat = this.songs[this.selectedSong].originalCategory
 		this.drawBackground(cat)
 		
@@ -562,20 +536,24 @@ class SongSelect{
 				this.toSession()
 			}else if(name === "left"){
 				if(shift){
-					if(!repeat){ this.changeType(-1) }
+					if(!repeat){
+						this.categoryJump(-1)
+					}
 				}else{
 					this.moveToSong(-1)
 				}
 			}else if(name === "right"){
 				if(shift){
-					if(!repeat){ this.changeType(1) }
+					if(!repeat){
+						this.categoryJump(1)
+					}
 				}else{
 					this.moveToSong(1)
 				}
 			}else if(name === "jump_left" && !repeat){
-				this.changeType(-1)
+				this.categoryJump(-1)
 			}else if(name === "jump_right" && !repeat){
-				this.changeType(1)
+				this.categoryJump(1)
 			}else if(name === "mute" || name === "ctrlGamepad"){
 				this.endPreview(true)
 				this.playBgm(false)
@@ -619,23 +597,6 @@ class SongSelect{
 			}
 		}
 	}
-
-	updateTypeLabel(){
-		this.setAltText(this.typeLabel, this.songTypes[this.songTypeIndex])
-	}
-
-	changeType(delta){
-		this.songTypeIndex = (this.songTypeIndex + delta + this.songTypes.length) % this.songTypes.length
-		localStorage.setItem("songTypeIndex", this.songTypeIndex)
-		this.updateTypeLabel()
-		var type = encodeURIComponent(this.songTypes[this.songTypeIndex])
-		loader.ajax("api/songs?type=" + type).then(resp => {
-			var songs = JSON.parse(resp)
-			assets.songsDefault = songs
-			assets.songs = assets.songsDefault
-			new SongSelect(false, false, this.touchEnabled)
-		}).catch(() => {})
-	}
 	
 	mouseDown(event){
 		if(event.target === this.selectable || event.target.parentNode === this.selectable){

public/src/js/soundbuffer.js

@@ -1,4 +1,4 @@
-class SoundBuffer{
+class SoundBuffer{
 	constructor(...args){
 		this.init(...args)
 	}
@@ -12,7 +12,8 @@
 	}
 	load(file, gain){
 		var decoder = file.name.endsWith(".ogg") ? this.oggDecoder : this.audioDecoder
-		return file.arrayBuffer().then(response => {
+		var promise = typeof file.arrayBufferFast === "function" ? file.arrayBufferFast(4) : file.arrayBuffer()
+		return promise.then(response => {
 			return new Promise((resolve, reject) => {
 				return decoder(response, resolve, reject)
 			}).catch(error => Promise.reject([error, file.url]))

public/upload/index.html

@@ -16,21 +16,6 @@
 
       <label for="file_music">音楽ファイル:</label>
       <input type="file" name="file_music" accept=".ogg,.mp3,.wav" required>
-
-      <label for="song_type">曲のタイプ:</label>
-      <select name="song_type" required>
-        <option value="01 Pop">01 Pop</option>
-        <option value="02 Anime">02 Anime</option>
-        <option value="03 Vocaloid">03 Vocaloid</option>
-        <option value="04 Children and Folk">04 Children and Folk</option>
-        <option value="05 Variety">05 Variety</option>
-        <option value="06 Classical">06 Classical</option>
-        <option value="07 Game Music">07 Game Music</option>
-        <option value="08 Live Festival Mode">08 Live Festival Mode</option>
-        <option value="09 Namco Original">09 Namco Original</option>
-        <option value="10 Taiko Towers">10 Taiko Towers</option>
-        <option value="11 Dan Dojo">11 Dan Dojo</option>
-      </select>
     </form>
 
     <button type="button" onclick="uploadFiles()">今すぐ投稿！ (1分ほどかかる場合があります)</button>