diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..87d8519
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+*.mkv
+*.mp4
+*.mp3
+*.aac
+http_demo
+!assets/*.mp3
diff --git a/assets/audio01.mp3 b/assets/audio01.mp3
new file mode 100644
index 0000000..8111a76
Binary files /dev/null and b/assets/audio01.mp3 differ
diff --git a/assets/audio02.mp3 b/assets/audio02.mp3
new file mode 100644
index 0000000..2628810
Binary files /dev/null and b/assets/audio02.mp3 differ
diff --git a/assets/cover.jpg b/assets/cover.jpg
new file mode 100644
index 0000000..9ab15a2
Binary files /dev/null and b/assets/cover.jpg differ
diff --git a/assets/info.json b/assets/info.json
new file mode 100644
index 0000000..b67a85f
--- /dev/null
+++ b/assets/info.json
@@ -0,0 +1,198 @@
+{
+    "streams": [
+        {
+            "index": 0,
+            "codec_name": "h264",
+            "codec_long_name": "H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10",
+            "profile": "High",
+            "codec_type": "video",
+            "codec_tag_string": "avc1",
+            "codec_tag": "0x31637661",
+            "width": 1920,
+            "height": 1080,
+            "coded_width": 1920,
+            "coded_height": 1080,
+            "closed_captions": 0,
+            "film_grain": 0,
+            "has_b_frames": 2,
+            "sample_aspect_ratio": "27:32",
+            "display_aspect_ratio": "3:2",
+            "pix_fmt": "yuvj420p",
+            "level": 40,
+            "color_range": "pc",
+            "color_space": "bt470bg",
+            "chroma_location": "center",
+            "field_order": "progressive",
+            "refs": 1,
+            "is_avc": "true",
+            "nal_length_size": "4",
+            "id": "0x1",
+            "r_frame_rate": "25/1",
+            "avg_frame_rate": "25/1",
+            "time_base": "1/12800",
+            "start_pts": 0,
+            "start_time": "0.000000",
+            "duration_ts": 1721856,
+            "duration": "134.520000",
+            "bit_rate": "728434",
+            "bits_per_raw_sample": "8",
+            "nb_frames": "3363",
+            "extradata_size": 55,
+            "disposition": {
+                "default": 1,
+                "dub": 0,
+                "original": 0,
+                "comment": 0,
+                "lyrics": 0,
+                "karaoke": 0,
+                "forced": 0,
+                "hearing_impaired": 0,
+                "visual_impaired": 0,
+                "clean_effects": 0,
+                "attached_pic": 0,
+                "timed_thumbnails": 0,
+                "non_diegetic": 0,
+                "captions": 0,
+                "descriptions": 0,
+                "metadata": 0,
+                "dependent": 0,
+                "still_image": 0,
+                "multilayer": 0
+            },
+            "tags": {
+                "language": "und",
+                "handler_name": "VideoHandler",
+                "vendor_id": "[0][0][0][0]",
+                "encoder": "Lavc61.19.101 libx264"
+            },
+            "side_data_list": [
+                {
+                    "side_data_type": "ICC Profile"
+                }
+            ]
+        },
+        {
+            "index": 1,
+            "codec_name": "aac",
+            "codec_long_name": "AAC (Advanced Audio Coding)",
+            "profile": "LC",
+            "codec_type": "audio",
+            "codec_tag_string": "mp4a",
+            "codec_tag": "0x6134706d",
+            "sample_fmt": "fltp",
+            "sample_rate": "44100",
+            "channels": 2,
+            "channel_layout": "stereo",
+            "bits_per_sample": 0,
+            "initial_padding": 0,
+            "id": "0x2",
+            "r_frame_rate": "0/0",
+            "avg_frame_rate": "0/0",
+            "time_base": "1/44100",
+            "start_pts": 0,
+            "start_time": "0.000000",
+            "duration_ts": 5833724,
+            "duration": "132.283991",
+            "bit_rate": "130883",
+            "nb_frames": "5698",
+            "extradata_size": 5,
+            "disposition": {
+                "default": 1,
+                "dub": 0,
+                "original": 0,
+                "comment": 0,
+                "lyrics": 0,
+                "karaoke": 0,
+                "forced": 0,
+                "hearing_impaired": 0,
+                "visual_impaired": 0,
+                "clean_effects": 0,
+                "attached_pic": 0,
+                "timed_thumbnails": 0,
+                "non_diegetic": 0,
+                "captions": 0,
+                "descriptions": 0,
+                "metadata": 0,
+                "dependent": 0,
+                "still_image": 0,
+                "multilayer": 0
+            },
+            "tags": {
+                "language": "und",
+                "handler_name": "SoundHandler",
+                "vendor_id": "[0][0][0][0]"
+            }
+        },
+        {
+            "index": 2,
+            "codec_name": "aac",
+            "codec_long_name": "AAC (Advanced Audio Coding)",
+            "profile": "LC",
+            "codec_type": "audio",
+            "codec_tag_string": "mp4a",
+            "codec_tag": "0x6134706d",
+            "sample_fmt": "fltp",
+            "sample_rate": "44100",
+            "channels": 2,
+            "channel_layout": "stereo",
+            "bits_per_sample": 0,
+            "initial_padding": 0,
+            "id": "0x3",
+            "r_frame_rate": "0/0",
+            "avg_frame_rate": "0/0",
+            "time_base": "1/44100",
+            "start_pts": 0,
+            "start_time": "0.000000",
+            "duration_ts": 5833724,
+            "duration": "132.283991",
+            "bit_rate": "132605",
+            "nb_frames": "5698",
+            "extradata_size": 5,
+            "disposition": {
+                "default": 0,
+                "dub": 0,
+                "original": 0,
+                "comment": 0,
+                "lyrics": 0,
+                "karaoke": 0,
+                "forced": 0,
+                "hearing_impaired": 0,
+                "visual_impaired": 0,
+                "clean_effects": 0,
+                "attached_pic": 0,
+                "timed_thumbnails": 0,
+                "non_diegetic": 0,
+                "captions": 0,
+                "descriptions": 0,
+                "metadata": 0,
+                "dependent": 0,
+                "still_image": 0,
+                "multilayer": 0
+            },
+            "tags": {
+                "language": "und",
+                "handler_name": "SoundHandler",
+                "vendor_id": "[0][0][0][0]"
+            }
+        }
+    ],
+    "format": {
+        "filename": "dual-tracks.mp4",
+        "nb_streams": 3,
+        "nb_programs": 0,
+        "nb_stream_groups": 0,
+        "format_name": "mov,mp4,m4a,3gp,3g2,mj2",
+        "format_long_name": "QuickTime / MOV",
+        "start_time": "0.000000",
+        "duration": "134.520000",
+        "size": "16756214",
+        "bit_rate": "996503",
+        "probe_score": 100,
+        "tags": {
+            "major_brand": "isom",
+            "minor_version": "512",
+            "compatible_brands": "isomiso2avc1mp41",
+            "encoder": "Lavf61.7.100"
+        }
+    }
+}
\ No newline at end of file
diff --git a/assets/run.sh b/assets/run.sh
new file mode 100644
index 0000000..1ea4f7d
--- /dev/null
+++ b/assets/run.sh
@@ -0,0 +1,26 @@
+# # 1. 生成视频
+# -vf "scale=iw:ih:force_original_aspect_ratio=decrease,pad=ceil(iw/2)*2:ceil(ih/2)*2" \
+ffmpeg -loop 1 -i cover.jpg \
+    -vf "scale=1280:720:force_original_aspect_ratio=decrease" \
+    -r 1 \
+    -t 60 \
+    -c:v libx264 \
+    -pix_fmt yuv420p \
+    -y video.mp4
+
+# 同时添加两条音轨
+ffmpeg -i video.mp4 \
+    -i audio01.mp3 \
+    -i audio02.mp3 \
+    -map 0:v \
+    -map 1:a \
+    -map 2:a \
+    -c:v copy \
+    -c:a aac \
+    -shortest \
+    -metadata:s:a:0 title="Default" \
+    -metadata:s:a:0 language=chi \
+    -metadata:s:a:1 title="Second" \
+    -metadata:s:a:1 language=eng \
+    -disposition:a:0 default \
+    -y final.mp4
diff --git a/gen.sh b/gen.sh
new file mode 100644
index 0000000..2976889
--- /dev/null
+++ b/gen.sh
@@ -0,0 +1,36 @@
+rm -rf hls
+
+mkdir -p hls/video
+ffmpeg -i assets/final.mp4 \
+    -map 0:v:0 -map 0:a:0 \
+    -c:v libx264 -c:a aac \
+    -vf "fps=25" \
+    -f hls \
+    -hls_time 10 \
+    -hls_list_size 0 \
+    -hls_flags independent_segments \
+    -hls_segment_type mpegts \
+    -hls_segment_filename hls/video/%03d.ts \
+    hls/video/index.m3u8
+
+mkdir -p hls/audio
+ffmpeg -i assets/final.mp4 \
+    -map 0:a:1 \
+    -c:a aac -vn \
+    -f hls \
+    -hls_time 10 \
+    -hls_list_size 0 \
+    -hls_flags independent_segments \
+    -hls_segment_type mpegts \
+    -hls_segment_filename hls/audio/%03d.ts \
+    hls/audio/index.m3u8
+
+cat >hls/variant.m3u8 <<EOF
+#EXTM3U
+
+#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="zh",NAME="主音轨",AUTOSELECT=YES,DEFAULT=YES,URI="video/index.m3u8"
+#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="zh",NAME="第二音轨",AUTOSELECT=NO,DEFAULT=NO,URI="audio/index.m3u8"
+
+#EXT-X-STREAM-INF:BANDWIDTH=800000,CODECS="avc1.64001f,mp4a.40.2",AUDIO="audio"
+video/index.m3u8
+EOF
diff --git a/go.mod b/go.mod
new file mode 100644
index 0000000..aa41b85
--- /dev/null
+++ b/go.mod
@@ -0,0 +1,3 @@
+module http_demo
+
+go 1.24.1
diff --git a/hls/audio/000.ts b/hls/audio/000.ts
new file mode 100644
index 0000000..6c9fcc5
Binary files /dev/null and b/hls/audio/000.ts differ
diff --git a/hls/audio/001.ts b/hls/audio/001.ts
new file mode 100644
index 0000000..e0b8111
Binary files /dev/null and b/hls/audio/001.ts differ
diff --git a/hls/audio/002.ts b/hls/audio/002.ts
new file mode 100644
index 0000000..53210a2
Binary files /dev/null and b/hls/audio/002.ts differ
diff --git a/hls/audio/003.ts b/hls/audio/003.ts
new file mode 100644
index 0000000..cc4e86c
Binary files /dev/null and b/hls/audio/003.ts differ
diff --git a/hls/audio/004.ts b/hls/audio/004.ts
new file mode 100644
index 0000000..62df734
Binary files /dev/null and b/hls/audio/004.ts differ
diff --git a/hls/audio/005.ts b/hls/audio/005.ts
new file mode 100644
index 0000000..50533d5
Binary files /dev/null and b/hls/audio/005.ts differ
diff --git a/hls/audio/index.m3u8 b/hls/audio/index.m3u8
new file mode 100644
index 0000000..22c6e66
--- /dev/null
+++ b/hls/audio/index.m3u8
@@ -0,0 +1,17 @@
+#EXTM3U
+#EXT-X-VERSION:6
+#EXT-X-TARGETDURATION:10
+#EXT-X-MEDIA-SEQUENCE:0
+#EXTINF:10.007800,
+000.ts
+#EXTINF:10.007800,
+001.ts
+#EXTINF:9.984589,
+002.ts
+#EXTINF:10.007800,
+003.ts
+#EXTINF:10.007800,
+004.ts
+#EXTINF:9.985556,
+005.ts
+#EXT-X-ENDLIST
diff --git a/hls/variant.m3u8 b/hls/variant.m3u8
new file mode 100644
index 0000000..fab49ed
--- /dev/null
+++ b/hls/variant.m3u8
@@ -0,0 +1,7 @@
+#EXTM3U
+
+#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="zh",NAME="主音轨",AUTOSELECT=YES,DEFAULT=YES
+#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="zh",NAME="第二音轨",AUTOSELECT=NO,DEFAULT=NO,URI="audio/index.m3u8"
+
+#EXT-X-STREAM-INF:BANDWIDTH=800000,CODECS="avc1.64001f,mp4a.40.2",AUDIO="audio"
+video/index.m3u8
diff --git a/hls/video/000.ts b/hls/video/000.ts
new file mode 100644
index 0000000..cbe5ea4
Binary files /dev/null and b/hls/video/000.ts differ
diff --git a/hls/video/001.ts b/hls/video/001.ts
new file mode 100644
index 0000000..61bc09a
Binary files /dev/null and b/hls/video/001.ts differ
diff --git a/hls/video/002.ts b/hls/video/002.ts
new file mode 100644
index 0000000..c6c8ad8
Binary files /dev/null and b/hls/video/002.ts differ
diff --git a/hls/video/003.ts b/hls/video/003.ts
new file mode 100644
index 0000000..8a2f9bb
Binary files /dev/null and b/hls/video/003.ts differ
diff --git a/hls/video/004.ts b/hls/video/004.ts
new file mode 100644
index 0000000..4898a95
Binary files /dev/null and b/hls/video/004.ts differ
diff --git a/hls/video/005.ts b/hls/video/005.ts
new file mode 100644
index 0000000..c9987e9
Binary files /dev/null and b/hls/video/005.ts differ
diff --git a/hls/video/index.m3u8 b/hls/video/index.m3u8
new file mode 100644
index 0000000..7220316
--- /dev/null
+++ b/hls/video/index.m3u8
@@ -0,0 +1,18 @@
+#EXTM3U
+#EXT-X-VERSION:6
+#EXT-X-TARGETDURATION:10
+#EXT-X-MEDIA-SEQUENCE:0
+#EXT-X-INDEPENDENT-SEGMENTS
+#EXTINF:10.000000,
+000.ts
+#EXTINF:10.000000,
+001.ts
+#EXTINF:10.000000,
+002.ts
+#EXTINF:10.000000,
+003.ts
+#EXTINF:10.000000,
+004.ts
+#EXTINF:10.000000,
+005.ts
+#EXT-X-ENDLIST
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..28ce58c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,1201 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>自定义视频音频播放器</title>
+    <style>
+        .container {
+            max-width: 1000px;
+            margin: 20px auto;
+            padding: 0 20px;
+        }
+
+        .video-box {
+            width: 100%;
+            position: relative;
+            aspect-ratio: 16/9;
+            /* 移除 padding-top */
+        }
+
+        .video-js {
+            width: 100%;
+            height: 100%;
+            border-radius: 8px;
+            /* 移除绝对定位 */
+            aspect-ratio: 16/9;
+        }
+
+        .video-js .vjs-tech {
+            border-radius: 8px;
+        }
+
+        /* Video.js 自定义样式 */
+        .video-js .vjs-big-play-button {
+            font-size: 3em;
+            line-height: 1.5em;
+            height: 1.5em;
+            width: 3em;
+            border-radius: 0.3em;
+            background-color: rgba(43, 51, 63, 0.7);
+            border: none;
+            margin-top: -0.75em;
+            margin-left: -1.5em;
+        }
+
+        .video-js .vjs-control-bar {
+            background: rgba(43, 51, 63, 0.7);
+            color: #fff;
+        }
+
+        .controls {
+            margin: 15px 0;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .control-group {
+            margin: 10px 0;
+            padding: 10px;
+            border: 1px solid #eee;
+            border-radius: 6px;
+            background: #fafafa;
+        }
+
+        .control-group h4 {
+            margin: 0 0 8px 0;
+            font-size: 14px;
+            color: #333;
+        }
+
+        .radio-group {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .radio-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        .radio-item input[type="radio"] {
+            margin: 0;
+        }
+
+        .radio-item label {
+            font-size: 13px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        button {
+            padding: 8px 16px;
+            cursor: pointer;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #f5f5f5;
+        }
+
+        button:hover {
+            background: #eee;
+        }
+
+        input[type="text"] {
+            flex: 1;
+            max-width: 400px;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        input[type="range"] {
+            width: 150px;
+        }
+
+        #visualizer {
+            border: 1px solid #eee;
+            margin-top: 20px;
+            width: 100%;
+            height: 150px;
+            border-radius: 4px;
+        }
+
+        .status {
+            color: #666;
+            margin-top: 5px;
+        }
+
+        .progress-container {
+            margin: 15px 0;
+            position: relative;
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background: #e0e0e0;
+            border-radius: 4px;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #4CAF50, #45a049);
+            border-radius: 4px;
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+
+        .progress-info {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 5px;
+            font-size: 12px;
+            color: #666;
+        }
+
+        .time-display {
+            font-family: monospace;
+        }
+    </style>
+
+    <script src="https://cdn.jsdelivr.net/npm/video.js@8.22.0/dist/video.min.js"></script>
+    <script src="https://unpkg.com/@videojs/http-streaming@3.15.0/dist/videojs-http-streaming.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/video.js@8.22.0/dist/video-js.min.css">
+    <script>
+        const videos = [
+            { src: 'hls/variant.m3u8', type: 'application/x-mpegURL' },
+            // { src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8', type: 'application/x-mpegURL' },
+            { src: 'assets/demo01.mp4', type: 'video/mp4' },
+        ];
+        // const VIDEO_URL = 'hls/master.m3u8'; // 使用支持CORS的HLS视频源
+        // const VIDEO_URL = 'output.mp4';
+        // const VIDEO_URL = 'merged_output.mp4';
+        // const VIDEO_URL = 'merged_dual_track.mp4';
+        // const VIDEO_URL = 'demo01.mp4';
+        // const VIDEO_URL = 'demo02.mp4';
+        // const VIDEO_URL = 'demo03.mp4';
+    </script>
+</head>
+
+<body>
+    <div class="container">
+        <h2>自定义视频音频播放器</h2>
+
+        <div class="status" id="statusText">正在自动加载视频...</div>
+
+        <div class="video-box">
+            <video id="video" class="video-js vjs-default-skin" crossorigin="anonymous" preload="auto" data-setup='{}'>
+                <p class="vjs-no-js">
+                    要查看此视频，请启用 JavaScript，并考虑升级到
+                    <a href="https://videojs.com/html5-video-support/" target="_blank">
+                        支持HTML5视频的网络浏览器
+                    </a>。
+                </p>
+            </video>
+        </div>
+
+        <div class="controls">
+            <label for="videoSelect">选择视频：</label>
+            <select id="videoSelect"></select>
+            <label style="margin-left:20px;display:flex;align-items:center;gap:4px;">
+                <input type="checkbox" id="loopCheckbox">
+                <span>循环播放</span>
+            </label>
+        </div>
+        <div class="controls" id="abLoopControls">
+            <label style="margin-right:8px;">区间播放：</label>
+            <button id="setA">设置A点</button>
+            <span id="aTime" style="min-width:60px;display:inline-block;">A: --:--</span>
+            <button id="setB">设置B点</button>
+            <span id="bTime" style="min-width:60px;display:inline-block;">B: --:--</span>
+            <button id="clearAB">清除区间</button>
+            <label style="margin-left:12px;display:flex;align-items:center;gap:4px;">
+                <input type="checkbox" id="abLoopCheckbox">
+                <span>启用区间循环</span>
+            </label>
+        </div>
+
+        <div class="controls">
+            <button id="playBtn" disabled>播放</button>
+            <button id="pauseBtn" disabled>暂停</button>
+            <button id="muteBtn">静音</button>
+            <button id="testAudioBtn">测试音频</button>
+            <span>音量：</span>
+            <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
+        </div>
+
+        <div class="progress-container">
+            <div class="progress-bar" id="progressBar">
+                <div class="progress-fill" id="progressFill"></div>
+            </div>
+            <div class="progress-info">
+                <span class="time-display" id="currentTime">00:00</span>
+                <span class="time-display" id="duration">00:00</span>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>音轨选择</h4>
+            <div class="radio-group" id="trackRadioGroup">
+                <div class="radio-item">
+                    <input type="radio" id="track0" name="audioTrack" value="0" checked>
+                    <label for="track0">默认音轨</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>播放速度</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="rate05" name="playbackRate" value="0.5">
+                    <label for="rate05">0.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate075" name="playbackRate" value="0.75">
+                    <label for="rate075">0.75x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate1" name="playbackRate" value="1" checked>
+                    <label for="rate1">1x (正常)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate125" name="playbackRate" value="1.25">
+                    <label for="rate125">1.25x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate15" name="playbackRate" value="1.5">
+                    <label for="rate15">1.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate2" name="playbackRate" value="2">
+                    <label for="rate2">2x</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>音调变换</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="pitch-12" name="pitchShift" value="-12">
+                    <label for="pitch-12">降一个八度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-7" name="pitchShift" value="-7">
+                    <label for="pitch-7">降五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-5" name="pitchShift" value="-5">
+                    <label for="pitch-5">降四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-3" name="pitchShift" value="-3">
+                    <label for="pitch-3">降小三度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-2" name="pitchShift" value="-2">
+                    <label for="pitch-2">降大二度 (C→B♭)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-1" name="pitchShift" value="-1">
+                    <label for="pitch-1">降小二度 (C→B)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch0" name="pitchShift" value="0" checked>
+                    <label for="pitch0">原调</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch1" name="pitchShift" value="1">
+                    <label for="pitch1">升小二度 (C→C#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch2" name="pitchShift" value="2">
+                    <label for="pitch2">升大二度 (C→D)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch3" name="pitchShift" value="3">
+                    <label for="pitch3">升小三度 (C→D#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch4" name="pitchShift" value="4">
+                    <label for="pitch4">升大三度 (C→E)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch5" name="pitchShift" value="5">
+                    <label for="pitch5">升四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch7" name="pitchShift" value="7">
+                    <label for="pitch7">升五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch12" name="pitchShift" value="12">
+                    <label for="pitch12">升一个八度</label>
+                </div>
+            </div>
+        </div>
+
+        <h3>音频频谱可视化</h3>
+        <canvas id="visualizer"></canvas>
+    </div>
+
+    <script>
+        // Video.js 播放器实例
+        let player;
+        let video; // 将在 Video.js 初始化后设置
+
+        const playBtn = document.getElementById('playBtn');
+        const pauseBtn = document.getElementById('pauseBtn');
+        const muteBtn = document.getElementById('muteBtn');
+        const testAudioBtn = document.getElementById('testAudioBtn');
+        const volumeInput = document.getElementById('volume');
+        const trackRadioGroup = document.getElementById('trackRadioGroup');
+        const statusText = document.getElementById('statusText');
+        const canvas = document.getElementById('visualizer');
+        const ctx = canvas.getContext('2d');
+        const progressBar = document.getElementById('progressBar');
+        const progressFill = document.getElementById('progressFill');
+        const currentTimeDisplay = document.getElementById('currentTime');
+        const durationDisplay = document.getElementById('duration');
+        const videoSelect = document.getElementById('videoSelect');
+        const loopCheckbox = document.getElementById('loopCheckbox');
+        const abLoopCheckbox = document.getElementById('abLoopCheckbox');
+        const setA = document.getElementById('setA');
+        const setB = document.getElementById('setB');
+        const clearAB = document.getElementById('clearAB');
+        const aTime = document.getElementById('aTime');
+        const bTime = document.getElementById('bTime');
+        let abLoopA = null;
+        let abLoopB = null;
+        let abLoopActive = false;
+
+        // 固定视频地址 - 使用支持CORS的视频源
+
+        let audioContext;
+        let analyser;
+        let mediaElementSource;
+        let animationId;
+        let gainNode;
+        let soundTouchNode;
+        let currentPitchShift = 0;
+        let isAudioContextInitialized = false;
+        let isWorkletRegistered = false;
+
+        let currentVideoIndex = 0;
+        let VIDEO_URL = videos[0].src;
+        let VIDEO_TYPE = videos[0].type;
+
+
+        // 设置画布尺寸
+        function resizeCanvas() {
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+        }
+
+        // 格式化时间显示（秒转换为 mm:ss 格式）
+        function formatTime(seconds) {
+            if (isNaN(seconds) || !isFinite(seconds)) {
+                return '00:00';
+            }
+            const minutes = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+
+        // 更新进度条
+        function updateProgress() {
+            if (player && player.duration() && isFinite(player.duration())) {
+                const progress = (player.currentTime() / player.duration()) * 100;
+                progressFill.style.width = `${progress}%`;
+                currentTimeDisplay.textContent = formatTime(player.currentTime());
+                durationDisplay.textContent = formatTime(player.duration());
+            }
+        }
+
+        // 处理进度条点击跳转
+        function handleProgressBarClick(event) {
+            const rect = progressBar.getBoundingClientRect();
+            const clickX = event.clientX - rect.left;
+            const progressBarWidth = rect.width;
+            const clickRatio = clickX / progressBarWidth;
+
+            if (player && player.duration() && isFinite(player.duration())) {
+                const newTime = clickRatio * player.duration();
+                player.currentTime(Math.max(0, Math.min(newTime, player.duration())));
+                console.log(`跳转到: ${formatTime(newTime)}`);
+            }
+        }
+
+        // 创建 SoundTouch AudioWorkletNode (现代化音调变换)
+        async function createSoundTouchNode(audioContext) {
+            try {
+                // 检查 AudioWorklet 支持
+                if (!audioContext.audioWorklet) {
+                    console.warn('当前浏览器不支持 AudioWorklet，音调变换不可用，使用直通节点');
+                    return createPassThroughNode(audioContext);
+                }
+                // 首先注册 AudioWorklet 处理器
+                if (!isWorkletRegistered) {
+                    console.log('注册 SoundTouch AudioWorklet...');
+                    await audioContext.audioWorklet.addModule('https://cdn.jsdelivr.net/npm/@soundtouchjs/audio-worklet@0.2.1/dist/soundtouch-worklet.js');
+                    isWorkletRegistered = true;
+                    console.log('SoundTouch AudioWorklet 注册成功');
+                }
+                // 创建 AudioWorkletNode
+                const workletNode = new AudioWorkletNode(audioContext, 'soundtouch-processor');
+                console.log('SoundTouch AudioWorkletNode 创建成功');
+                return workletNode;
+            } catch (error) {
+                console.error('创建 SoundTouch 节点失败:', error);
+                // 如果失败，返回一个直通节点
+                return createPassThroughNode(audioContext);
+            }
+        }
+
+        // 创建直通节点作为后备方案
+        function createPassThroughNode(audioContext) {
+            console.log('创建直通节点作为后备方案');
+            const gainNode = audioContext.createGain();
+            gainNode.gain.value = 1.0;
+            return gainNode;
+        }
+
+        // 应用音调变换
+        function applyPitchShift(semitones) {
+            currentPitchShift = semitones;
+            console.log('音调变换设置为:', semitones, '半音');
+
+            // 如果有 SoundTouch 节点，设置音调参数
+            if (soundTouchNode && soundTouchNode.parameters) {
+                try {
+                    // 使用 pitchSemitones 参数来设置半音变换
+                    const pitchSemitonesParam = soundTouchNode.parameters.get('pitchSemitones');
+                    if (pitchSemitonesParam) {
+                        pitchSemitonesParam.value = semitones;
+                        console.log('SoundTouch 音调半音设置为:', semitones);
+                    } else {
+                        console.warn('pitchSemitones 参数不可用，尝试使用 pitch 参数');
+                        // 备选方案：使用 pitch 参数（比率）
+                        const pitchParam = soundTouchNode.parameters.get('pitch');
+                        if (pitchParam) {
+                            const pitchRatio = Math.pow(2, semitones / 12);
+                            pitchParam.value = pitchRatio;
+                            console.log('SoundTouch 音调比率设置为:', pitchRatio);
+                        }
+                    }
+                } catch (error) {
+                    console.warn('设置 SoundTouch 参数时出错:', error);
+                }
+            }
+
+            // 更新状态显示
+            if (!video.paused) {
+                const pitchText = semitones === 0 ? '原调' :
+                    (semitones > 0 ? `升${semitones}半音` : `降${Math.abs(semitones)}半音`);
+                const currentRate = player ? player.playbackRate() : 1;
+                const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+                statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            }
+        }
+
+        // 初始化音频上下文（需用户交互触发）
+        async function initAudioContext() {
+            try {
+                if (isAudioContextInitialized) {
+                    console.log('音频上下文已经初始化，跳过');
+                    return;
+                }
+
+                console.log('开始初始化音频上下文...');
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+                // 如果音频上下文被暂停，恢复它
+                if (audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 创建媒体元素源
+                mediaElementSource = audioContext.createMediaElementSource(video);
+                console.log('媒体元素源已创建');
+
+                // 创建分析器节点
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 1024;  // 增加分辨率
+                analyser.smoothingTimeConstant = 0.8;
+                console.log('分析器节点已创建，fftSize:', analyser.fftSize);                // 创建增益节点（用于音量控制）
+                gainNode = audioContext.createGain();
+                gainNode.gain.value = 1.0;
+                console.log('增益节点已创建');
+
+                // 创建 SoundTouch 音调变换节点
+                soundTouchNode = await createSoundTouchNode(audioContext);
+                console.log('SoundTouch 节点已创建');
+
+                // 连接音频节点链：视频 -> SoundTouch -> 分析器 -> 增益 -> 输出
+                mediaElementSource.connect(soundTouchNode);
+                soundTouchNode.connect(analyser);
+                analyser.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                console.log('音频节点链已连接（使用 SoundTouch AudioWorklet）');
+
+                isAudioContextInitialized = true;
+                console.log('音频上下文初始化成功！');
+
+                // 立即开始可视化
+                startVisualization();
+
+                // 测试音频数据
+                setTimeout(() => {
+                    if (analyser) {
+                        const testArray = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(testArray);
+                        const hasData = testArray.some(value => value > 0);
+                        console.log('测试音频数据 - 有数据:', hasData);
+                        if (hasData) {
+                            console.log('前10个频谱值:', Array.from(testArray.slice(0, 10)));
+                        }
+                    }
+                }, 2000);
+
+            } catch (error) {
+                console.error('音频上下文初始化失败:', error);
+                // 如果音频上下文初始化失败，至少确保视频能播放
+                isAudioContextInitialized = false;
+            }
+        }
+
+        // 启动可视化
+        function startVisualization() {
+            if (!analyser) {
+                console.warn('分析器节点不存在，启动模拟可视化');
+                startMockVisualization();
+                return;
+            }
+
+            // 如果已经在运行动画，先停止
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            console.log('可视化已启动，缓冲区长度:', bufferLength);
+
+            function draw() {
+                if (!analyser) {
+                    console.warn('分析器节点丢失，停止绘制');
+                    return;
+                }
+
+                // 获取频谱数据
+                analyser.getByteFrequencyData(dataArray);
+
+                // 检查是否有音频数据
+                let hasAudioData = false;
+                let maxValue = 0;
+                for (let i = 0; i < dataArray.length; i++) {
+                    if (dataArray[i] > 0) {
+                        hasAudioData = true;
+                        maxValue = Math.max(maxValue, dataArray[i]);
+                    }
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                if (hasAudioData) {
+                    // console.log('检测到音频数据，最大值:', maxValue);
+                    // 绘制频谱柱状图
+                    const barWidth = (canvas.width / bufferLength) * 2.5;
+                    let x = 0;
+
+                    for (let i = 0; i < bufferLength; i++) {
+                        const barHeight = (dataArray[i] / 255) * canvas.height;
+
+                        // 创建渐变色
+                        const hue = (i / bufferLength) * 360;
+                        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                        ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
+                        x += barWidth;
+                    }
+                } else {
+                    // 显示"无音频数据"提示
+                    ctx.fillStyle = '#999';
+                    ctx.font = '16px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('等待音频数据...', canvas.width / 2, canvas.height / 2);
+
+                    // 如果视频正在播放但没有音频数据，可能有问题
+                    if (player && !player.paused()) {
+                        console.log('视频正在播放但没有音频数据');
+                    }
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 模拟可视化（当Web Audio API不可用时）
+        function startMockVisualization() {
+            console.log('启动模拟可视化');
+
+            function draw() {
+                if (player && player.paused()) {
+                    return;
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                // 生成模拟频谱数据
+                const barCount = 50;
+                const barWidth = canvas.width / barCount;
+
+                for (let i = 0; i < barCount; i++) {
+                    // 根据时间生成动态数据
+                    const time = Date.now() * 0.001;
+                    const frequency = i * 0.2;
+                    const amplitude = Math.sin(time + frequency) * 0.5 + 0.5;
+                    const barHeight = amplitude * canvas.height * 0.8;
+
+                    // 创建渐变色
+                    const hue = (i / barCount) * 360;
+                    ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                    ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth - 1, barHeight);
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 停止可视化
+        function stopVisualization() {
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+                animationId = null;
+            }
+        }
+
+        // 初始化 Video.js 播放器
+        function initVideoPlayer() {
+            console.log('初始化 Video.js 播放器...');
+
+            player = videojs('video', {
+                controls: false,
+                fluid: true,
+                responsive: true,
+                playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
+                plugins: {
+                    // 可以在这里添加插件配置
+                },
+                // html5: {
+                //     vhs: {
+                //         overrideNative: !videojs.browser.IS_SAFARI,
+                //     },
+                //     nativeAudioTracks: false,
+                //     nativeVideoTracks: false
+                // }
+            });
+
+            // 获取底层的 HTML5 video 元素
+            video = player.tech(true).el();
+
+            player.ready(() => {
+                console.log('Video.js 播放器已准备就绪');
+
+                // 设置视频源
+                player.src({
+                    src: VIDEO_URL,
+                    type: VIDEO_TYPE
+                });
+
+                console.log('视频源已设置:', VIDEO_URL);
+                statusText.textContent = 'Video.js 播放器已初始化，视频源已加载';
+                statusText.style.color = 'green';
+
+                // 启用控制按钮
+                playBtn.disabled = false;
+                pauseBtn.disabled = false;
+
+                // 初始化循环播放状态
+                player.loop(loopCheckbox.checked);
+            });
+
+            // Video.js 事件监听
+            player.on('loadedmetadata', () => {
+                console.log('Video.js: 视频元数据已加载');
+                console.log('视频时长:', player.duration());
+                console.log('视频尺寸:', player.videoWidth(), 'x', player.videoHeight());
+
+                // 初始化进度条
+                updateProgress();
+
+                // 处理音轨信息
+                handleAudioTracks();
+            });
+
+            player.on('play', () => {
+                console.log('Video.js: 播放开始');
+                handlePlayEvent();
+            });
+
+            player.on('pause', () => {
+                console.log('Video.js: 播放暂停');
+                handlePauseEvent();
+            });
+
+            player.on('ended', () => {
+                console.log('Video.js: 播放结束');
+                handleEndedEvent();
+            });
+
+            player.on('timeupdate', () => {
+                updateProgress();
+                abLoopCheck();
+            });
+
+            player.on('volumechange', () => {
+                console.log('Video.js: 音量变化:', player.volume(), '静音:', player.muted());
+                // 同步到自定义音量控件
+                volumeInput.value = player.volume();
+                muteBtn.textContent = player.muted() ? '取消静音' : '静音';
+            });
+
+            player.on('error', (error) => {
+                console.error('Video.js 错误:', error);
+                statusText.textContent = `播放器错误: ${error.message || '未知错误'}`;
+                statusText.style.color = 'red';
+            });
+
+            // 监听循环播放复选框
+            loopCheckbox.addEventListener('change', () => {
+                if (player) {
+                    player.loop(loopCheckbox.checked);
+                }
+            });
+
+            return player;
+        }
+
+        // 初始化视频选择下拉框
+        function initVideoSelect() {
+            videoSelect.innerHTML = '';
+            videos.forEach((v, idx) => {
+                const option = document.createElement('option');
+                option.value = idx;
+                option.textContent = v.src;
+                videoSelect.appendChild(option);
+            });
+            videoSelect.selectedIndex = 0;
+        }
+
+        // 切换视频源
+        function switchVideo(index) {
+            if (!player) return;
+            const v = videos[index];
+            if (!v) return;
+            currentVideoIndex = index;
+            VIDEO_URL = v.src;
+            VIDEO_TYPE = v.type;
+            player.pause();
+            player.src({ src: VIDEO_URL, type: VIDEO_TYPE });
+            player.load();
+            player.currentTime(0);
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+            statusText.textContent = '已切换视频，等待播放';
+            statusText.style.color = '#666';
+
+            // 在切换视频源时同步 loop 状态
+            player.loop(loopCheckbox.checked);
+
+            // 重置进度条
+            updateProgress();
+        }
+
+        // 监听下拉框变化
+        videoSelect.addEventListener('change', (e) => {
+            const idx = parseInt(e.target.value);
+            switchVideo(idx);
+        });
+
+        let lastAudioTracks = null;
+        let audioTracksListeners = [];
+
+        // 处理音轨信息
+        function handleAudioTracks() {
+            console.log('处理音轨信息...');
+            trackRadioGroup.innerHTML = '';
+            let audioTracks = null;
+            if (player && typeof player.audioTracks === 'function') {
+                audioTracks = player.audioTracks();
+            }
+
+            // 移除上一次注册的 audioTracks 事件监听器，防止重复注册
+            if (lastAudioTracks && audioTracksListeners.length > 0) {
+                audioTracksListeners.forEach(({ type, listener }) => {
+                    if (lastAudioTracks.removeEventListener) {
+                        lastAudioTracks.removeEventListener(type, listener);
+                    }
+                });
+                audioTracksListeners = [];
+            }
+            lastAudioTracks = audioTracks;
+
+            if (audioTracks && audioTracks.length > 0) {
+                console.log('发现', audioTracks.length, '个音轨');
+                for (let i = 0; i < audioTracks.length; i++) {
+                    const track = audioTracks[i] || audioTracks.item?.(i);
+                    const radioItem = document.createElement('div');
+                    radioItem.className = 'radio-item';
+
+                    const radio = document.createElement('input');
+                    radio.type = 'radio';
+                    radio.name = 'audioTrack';
+                    radio.id = `track${i}`;
+                    radio.value = i;
+                    radio.checked = !!track.enabled;
+
+                    const label = document.createElement('label');
+                    label.htmlFor = `track${i}`;
+                    label.textContent = track.label || track.language || `音轨 ${i + 1}`;
+
+                    radioItem.appendChild(radio);
+                    radioItem.appendChild(label);
+                    trackRadioGroup.appendChild(radioItem);
+
+                    // 添加音轨切换事件
+                    radio.addEventListener('change', () => {
+                        if (radio.checked) {
+                            // 先禁用所有音轨，防止原音轨残留声音
+                            for (let j = 0; j < audioTracks.length; j++) {
+                                audioTracks[j].enabled = false;
+                            }
+                            // 强制刷新（部分浏览器/实现需要延迟）
+                            setTimeout(() => {
+                                audioTracks[i].enabled = true;
+                                console.log('切换到音轨:', i);
+                            }, 50);
+                        }
+                    });
+                }
+                // 只注册一次 audioTracks 的事件监听器
+                if (audioTracks.addEventListener) {
+                    const changeListener = (e) => {
+                        console.log('audioTracks change 事件触发', e);
+                    };
+                    audioTracks.addEventListener('change', changeListener);
+                    audioTracksListeners.push({ type: 'change', listener: changeListener });
+                }
+            } else {
+                // 默认音轨
+                const radioItem = document.createElement('div');
+                radioItem.className = 'radio-item';
+                const radio = document.createElement('input');
+                radio.type = 'radio';
+                radio.name = 'audioTrack';
+                radio.id = 'track0';
+                radio.value = '0';
+                radio.checked = true;
+                const label = document.createElement('label');
+                label.htmlFor = 'track0';
+                label.textContent = '默认音轨';
+                radioItem.appendChild(radio);
+                radioItem.appendChild(label);
+                trackRadioGroup.appendChild(radioItem);
+                console.log('使用默认音轨配置');
+            }
+        }
+
+        // 处理播放事件
+        function handlePlayEvent() {
+            playBtn.disabled = true;
+            pauseBtn.disabled = false;
+
+            const currentRate = player.playbackRate();
+            const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+            const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+            const pitchText = currentPitchShift === '0' ? '原调' :
+                (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+            statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            statusText.style.color = '#4CAF50';
+
+            // 启动音频可视化
+            if (isAudioContextInitialized && analyser) {
+                startVisualization();
+            }
+        }
+
+        // 处理暂停事件
+        function handlePauseEvent() {
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+            stopVisualization();
+        }
+
+        // 处理结束事件
+        function handleEndedEvent() {
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+            statusText.textContent = '播放结束';
+            statusText.style.color = '#666';
+            stopVisualization();
+        }
+
+        // 播放控制
+        playBtn.addEventListener('click', async () => {
+            try {
+                console.log('点击播放按钮');
+
+                // 初始化音频上下文（必须在用户交互后创建）
+                if (!isAudioContextInitialized) {
+                    console.log('初始化音频上下文...');
+                    await initAudioContext();
+                }
+
+                // 确保音频上下文在运行状态
+                if (audioContext && audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 使用 Video.js 播放
+                if (player) {
+                    await player.play();
+                    console.log('Video.js 开始播放');
+                } else {
+                    console.error('Video.js 播放器未初始化');
+                }
+
+            } catch (err) {
+                console.error('播放失败:', err);
+                statusText.textContent = `播放失败：${err.message}`;
+                statusText.style.color = 'red';
+            }
+        });
+
+        pauseBtn.addEventListener('click', () => {
+            if (player) {
+                player.pause();
+                console.log('Video.js 暂停播放');
+            }
+        });
+
+        muteBtn.addEventListener('click', () => {
+            if (player) {
+                player.muted(!player.muted());
+                muteBtn.textContent = player.muted() ? '取消静音' : '静音';
+                console.log('Video.js 静音状态:', player.muted());
+            }
+        });
+
+        // 测试音频按钮
+        testAudioBtn.addEventListener('click', async () => {
+            console.log('=== 音频调试信息 ===');
+            console.log('Video.js 播放器状态:');
+            if (player) {
+                console.log('- 是否暂停:', player.paused());
+                console.log('- 是否静音:', player.muted());
+                console.log('- 音量:', player.volume());
+                console.log('- 当前时间:', player.currentTime());
+                console.log('- 总时长:', player.duration());
+                console.log('- 播放速度:', player.playbackRate());
+            } else {
+                console.log('- Video.js 播放器未初始化');
+            }
+
+            console.log('底层视频元素状态:');
+            if (video) {
+                console.log('- 是否暂停:', video.paused);
+                console.log('- 是否静音:', video.muted);
+                console.log('- 音量:', video.volume);
+                console.log('- 当前时间:', video.currentTime);
+                console.log('- 总时长:', video.duration);
+            } else {
+                console.log('- 底层视频元素未获取');
+            }
+
+            console.log('音频上下文状态:');
+            console.log('- 是否初始化:', isAudioContextInitialized);
+            console.log('- 状态:', audioContext ? audioContext.state : '未创建');
+            console.log('- 采样率:', audioContext ? audioContext.sampleRate : 'N/A');
+
+            console.log('音频节点状态:');
+            console.log('- MediaElementSource:', !!mediaElementSource);
+            console.log('- Analyser:', !!analyser);
+            console.log('- GainNode:', !!gainNode);
+
+            if (analyser) {
+                const testData = new Uint8Array(analyser.frequencyBinCount);
+                analyser.getByteFrequencyData(testData);
+                const hasData = testData.some(v => v > 0);
+                const maxVal = Math.max(...testData);
+                console.log('- 频谱数据:', hasData ? `有数据 (最大值: ${maxVal})` : '无数据');
+            }
+
+            // 尝试播放测试音频
+            if (player && !player.paused()) {
+                console.log('视频正在播放，检查音频输出...');
+                setTimeout(() => {
+                    if (analyser) {
+                        const data = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(data);
+                        console.log('延迟检查频谱数据:', data.slice(0, 10));
+                    }
+                }, 1000);
+            }
+        });
+
+        volumeInput.addEventListener('input', (e) => {
+            const volume = parseFloat(e.target.value);
+
+            // 同步到 Video.js
+            if (player) {
+                player.volume(volume);
+            }
+
+            // 如果有增益节点，也同步更新
+            if (gainNode) {
+                gainNode.gain.value = volume;
+            }
+
+            console.log('音量已更新:', volume);
+        });
+
+        // 播放速度控制
+        document.querySelectorAll('input[name="playbackRate"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const playbackRate = parseFloat(e.target.value);
+
+                    // 使用 Video.js 设置播放速度
+                    if (player) {
+                        player.playbackRate(playbackRate);
+                    }
+
+                    const rateText = playbackRate === 1 ? '正常速度' : `${playbackRate}x 速度`;
+                    console.log('播放速度已改变为:', rateText);
+
+                    // 如果视频正在播放，显示速度变化提示
+                    if (player && !player.paused()) {
+                        const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+                        const pitchText = currentPitchShift === '0' ? '原调' :
+                            (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+                        statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+                        statusText.style.color = '#4CAF50';
+                    }
+                }
+            });
+        });
+
+        // 音调变换控制
+        document.querySelectorAll('input[name="pitchShift"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const pitchShift = parseInt(e.target.value);
+                    applyPitchShift(pitchShift);
+                }
+            });
+        });
+
+        // 监听原生视频事件（通过 Video.js 已经处理，这里移除重复的事件监听）
+        // 所有事件现在通过 Video.js 的事件系统处理
+
+        // 进度条点击跳转
+        progressBar.addEventListener('click', handleProgressBarClick);
+
+        // 画布尺寸适配
+        window.addEventListener('resize', resizeCanvas);
+
+        // 初始化画布尺寸
+        resizeCanvas();
+
+        // 初始化 Video.js 播放器
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('DOM 加载完成，初始化 Video.js...');
+            initVideoSelect();
+            initVideoPlayer();
+        });
+
+        // 循环播放复选框控制
+        loopCheckbox.addEventListener('change', (e) => {
+            if (player) {
+                player.loop(e.target.checked);
+                console.log('循环播放已', e.target.checked ? '启用' : '禁用');
+            }
+        });
+
+        // A-B 区间循环相关变量
+        let aPoint = 0;
+        let bPoint = 0;
+        let isABLoopEnabled = false;
+
+        // 设置 A 点
+        document.getElementById('setA').addEventListener('click', () => {
+            aPoint = player.currentTime();
+            document.getElementById('aTime').textContent = `A: ${formatTime(aPoint)}`;
+            console.log('设置 A 点:', aPoint);
+        });
+
+        // 设置 B 点
+        document.getElementById('setB').addEventListener('click', () => {
+            bPoint = player.currentTime();
+            document.getElementById('bTime').textContent = `B: ${formatTime(bPoint)}`;
+            console.log('设置 B 点:', bPoint);
+        });
+
+        // 清除 A-B 区间
+        document.getElementById('clearAB').addEventListener('click', () => {
+            aPoint = 0;
+            bPoint = 0;
+            isABLoopEnabled = false;
+            document.getElementById('aTime').textContent = 'A: --:--';
+            document.getElementById('bTime').textContent = 'B: --:--';
+            console.log('清除 A-B 区间');
+        });
+
+        // 启用/禁用 A-B 区间循环
+        document.getElementById('abLoopCheckbox').addEventListener('change', (e) => {
+            isABLoopEnabled = e.target.checked;
+            if (isABLoopEnabled) {
+                console.log('启用 A-B 区间循环');
+            } else {
+                console.log('禁用 A-B 区间循环');
+            }
+        });
+
+        // 在播放进度更新时处理区间循环
+        function abLoopCheck() {
+            if (isABLoopEnabled && aPoint !== 0 && bPoint !== 0 && player) {
+                if (player.currentTime() >= bPoint) {
+                    player.currentTime(aPoint);
+                    player.play();
+                }
+            }
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html.v1 b/index.html.v1
new file mode 100644
index 0000000..91dce98
--- /dev/null
+++ b/index.html.v1
@@ -0,0 +1,565 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>自定义视频音频播放器</title>
+    <style>
+        .container {
+            max-width: 1000px;
+            margin: 20px auto;
+            padding: 0 20px;
+        }
+
+        .video-box {
+            width: 100%;
+            position: relative;
+        }
+
+        video {
+            width: 100%;
+            border-radius: 8px;
+        }
+
+        .controls {
+            margin: 15px 0;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        button {
+            padding: 8px 16px;
+            cursor: pointer;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #f5f5f5;
+        }
+
+        button:hover {
+            background: #eee;
+        }
+
+        input[type="text"] {
+            flex: 1;
+            max-width: 400px;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        input[type="range"] {
+            width: 150px;
+        }
+
+        #trackSelect {
+            padding: 6px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        #visualizer {
+            border: 1px solid #eee;
+            margin-top: 20px;
+            width: 100%;
+            height: 150px;
+            border-radius: 4px;
+        }
+
+        .status {
+            color: #666;
+            margin-top: 5px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <h2>自定义视频音频播放器</h2>
+
+        <div class="status" id="statusText">正在自动加载视频...</div>
+
+        <div class="video-box">
+            <video id="video" controls crossorigin="anonymous"></video>
+        </div>
+
+        <div class="controls">
+            <button id="playBtn" disabled>播放</button>
+            <button id="pauseBtn" disabled>暂停</button>
+            <button id="muteBtn">静音</button>
+            <button id="testAudioBtn">测试音频</button>
+            <span>音量：</span>
+            <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
+            <span>音轨：</span>
+            <select id="trackSelect" disabled></select>
+        </div>
+
+        <h3>音频频谱可视化</h3>
+        <canvas id="visualizer"></canvas>
+    </div>
+
+    <script>
+        const video = document.getElementById('video');
+        const playBtn = document.getElementById('playBtn');
+        const pauseBtn = document.getElementById('pauseBtn');
+        const muteBtn = document.getElementById('muteBtn');
+        const testAudioBtn = document.getElementById('testAudioBtn');
+        const volumeInput = document.getElementById('volume');
+        const trackSelect = document.getElementById('trackSelect');
+        const statusText = document.getElementById('statusText');
+        const canvas = document.getElementById('visualizer');
+        const ctx = canvas.getContext('2d');
+
+        // 固定视频地址 - 使用支持CORS的视频源
+        const VIDEO_URL = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
+
+        let audioContext;
+        let analyser;
+        let mediaElementSource;
+        let animationId;
+        let gainNode;
+        let isAudioContextInitialized = false;
+
+        // 设置画布尺寸
+        function resizeCanvas() {
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+        }
+
+        // 初始化音频上下文（需用户交互触发）
+        async function initAudioContext() {
+            try {
+                if (isAudioContextInitialized) {
+                    console.log('音频上下文已经初始化，跳过');
+                    return;
+                }
+
+                console.log('开始初始化音频上下文...');
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+                // 如果音频上下文被暂停，恢复它
+                if (audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 创建媒体元素源
+                mediaElementSource = audioContext.createMediaElementSource(video);
+                console.log('媒体元素源已创建');
+
+                // 创建分析器节点
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 1024;  // 增加分辨率
+                analyser.smoothingTimeConstant = 0.8;
+                console.log('分析器节点已创建，fftSize:', analyser.fftSize);
+
+                // 创建增益节点（用于音量控制）
+                gainNode = audioContext.createGain();
+                gainNode.gain.value = 1.0;
+                console.log('增益节点已创建');
+
+                // 连接音频节点链：视频 -> 分析器 -> 增益 -> 输出
+                mediaElementSource.connect(analyser);
+                analyser.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                console.log('音频节点链已连接');
+
+                isAudioContextInitialized = true;
+                console.log('音频上下文初始化成功！');
+
+                // 立即开始可视化
+                startVisualization();
+
+                // 测试音频数据
+                setTimeout(() => {
+                    if (analyser) {
+                        const testArray = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(testArray);
+                        const hasData = testArray.some(value => value > 0);
+                        console.log('测试音频数据 - 有数据:', hasData);
+                        if (hasData) {
+                            console.log('前10个频谱值:', Array.from(testArray.slice(0, 10)));
+                        }
+                    }
+                }, 2000);
+
+            } catch (error) {
+                console.error('音频上下文初始化失败:', error);
+                // 如果音频上下文初始化失败，至少确保视频能播放
+                isAudioContextInitialized = false;
+            }
+        }
+
+        // 启动可视化
+        function startVisualization() {
+            if (!analyser) {
+                console.warn('分析器节点不存在，启动模拟可视化');
+                startMockVisualization();
+                return;
+            }
+
+            // 如果已经在运行动画，先停止
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            console.log('可视化已启动，缓冲区长度:', bufferLength);
+
+            function draw() {
+                if (!analyser) {
+                    console.warn('分析器节点丢失，停止绘制');
+                    return;
+                }
+
+                // 获取频谱数据
+                analyser.getByteFrequencyData(dataArray);
+
+                // 检查是否有音频数据
+                let hasAudioData = false;
+                let maxValue = 0;
+                for (let i = 0; i < dataArray.length; i++) {
+                    if (dataArray[i] > 0) {
+                        hasAudioData = true;
+                        maxValue = Math.max(maxValue, dataArray[i]);
+                    }
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                if (hasAudioData) {
+                    console.log('检测到音频数据，最大值:', maxValue);
+                    // 绘制频谱柱状图
+                    const barWidth = (canvas.width / bufferLength) * 2.5;
+                    let x = 0;
+
+                    for (let i = 0; i < bufferLength; i++) {
+                        const barHeight = (dataArray[i] / 255) * canvas.height;
+
+                        // 创建渐变色
+                        const hue = (i / bufferLength) * 360;
+                        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                        ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
+                        x += barWidth;
+                    }
+                } else {
+                    // 显示"无音频数据"提示
+                    ctx.fillStyle = '#999';
+                    ctx.font = '16px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('等待音频数据...', canvas.width / 2, canvas.height / 2);
+
+                    // 如果视频正在播放但没有音频数据，可能有问题
+                    if (!video.paused) {
+                        console.log('视频正在播放但没有音频数据');
+                    }
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 模拟可视化（当Web Audio API不可用时）
+        function startMockVisualization() {
+            console.log('启动模拟可视化');
+
+            function draw() {
+                if (video.paused) {
+                    return;
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                // 生成模拟频谱数据
+                const barCount = 50;
+                const barWidth = canvas.width / barCount;
+
+                for (let i = 0; i < barCount; i++) {
+                    // 根据时间生成动态数据
+                    const time = Date.now() * 0.001;
+                    const frequency = i * 0.2;
+                    const amplitude = Math.sin(time + frequency) * 0.5 + 0.5;
+                    const barHeight = amplitude * canvas.height * 0.8;
+
+                    // 创建渐变色
+                    const hue = (i / barCount) * 360;
+                    ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                    ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth - 1, barHeight);
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 停止可视化
+        function stopVisualization() {
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+                animationId = null;
+            }
+        }
+
+        // 自动加载视频
+        async function loadVideo() {
+            statusText.textContent = '加载中...';
+            statusText.style.color = '#666';
+            playBtn.disabled = true;
+            pauseBtn.disabled = true;
+            trackSelect.disabled = true;
+            trackSelect.innerHTML = '';
+
+            try {
+                // 使用固定的视频地址，添加CORS支持
+                video.crossOrigin = 'anonymous';
+                video.src = VIDEO_URL;
+                
+                console.log('开始加载视频:', VIDEO_URL);
+                
+                await new Promise((resolve, reject) => {
+                    video.onloadedmetadata = () => {
+                        console.log('视频元数据加载完成');
+                        console.log('视频时长:', video.duration);
+                        console.log('视频尺寸:', video.videoWidth, 'x', video.videoHeight);
+                        resolve();
+                    };
+                    video.onerror = (e) => {
+                        console.error('视频加载错误:', e);
+                        reject(e);
+                    };
+                    // 添加超时处理
+                    setTimeout(() => reject(new Error('加载超时')), 15000);
+                });
+
+                statusText.textContent = '加载完成，可以开始播放';
+                statusText.style.color = 'green';
+                playBtn.disabled = false;
+                trackSelect.disabled = false;
+            } catch (err) {
+                statusText.textContent = `加载失败：${err.message || '视频地址无效或网络错误'}`;
+                statusText.style.color = 'red';
+                console.error('视频加载错误:', err);
+            }
+        }
+
+        // 视频元数据加载完成后初始化音轨
+        video.addEventListener('loadedmetadata', () => {
+            console.log('视频元数据已加载');
+
+            // 检查并显示可用的音频轨道信息
+            const audioTracks = video.audioTracks;
+            const textTracks = video.textTracks;
+
+            console.log('AudioTracks数量:', audioTracks ? audioTracks.length : 0);
+            console.log('TextTracks数量:', textTracks ? textTracks.length : 0);
+
+            trackSelect.innerHTML = '';
+
+            // 尝试使用audioTracks
+            if (audioTracks && audioTracks.length > 0) {
+                console.log('使用AudioTracks');
+                for (let i = 0; i < audioTracks.length; i++) {
+                    const track = audioTracks[i];
+                    const option = document.createElement('option');
+                    option.value = i;
+                    option.text = track.label || track.language || `音轨 ${i + 1}`;
+                    option.selected = track.enabled;
+                    trackSelect.appendChild(option);
+                    console.log(`音轨 ${i}:`, track.label, track.language, track.enabled);
+                }
+
+                // 音轨切换事件
+                trackSelect.addEventListener('change', (e) => {
+                    const selectedIndex = parseInt(e.target.value);
+                    console.log('切换到音轨:', selectedIndex);
+
+                    // 禁用所有音轨
+                    for (let i = 0; i < audioTracks.length; i++) {
+                        audioTracks[i].enabled = false;
+                    }
+                    // 启用选中的音轨
+                    if (audioTracks[selectedIndex]) {
+                        audioTracks[selectedIndex].enabled = true;
+                        console.log('已启用音轨:', selectedIndex);
+                    }
+                });
+            }
+            // 如果没有多个音轨，显示默认选项
+            else {
+                const option = document.createElement('option');
+                option.value = 0;
+                option.text = '默认音轨';
+                trackSelect.appendChild(option);
+                console.log('只有一个默认音轨');
+            }
+        });
+
+        // 播放控制
+        playBtn.addEventListener('click', async () => {
+            try {
+                console.log('点击播放按钮');
+
+                // 初始化音频上下文（必须在用户交互后创建）
+                if (!isAudioContextInitialized) {
+                    console.log('初始化音频上下文...');
+                    await initAudioContext();
+                }
+
+                // 确保音频上下文在运行状态
+                if (audioContext && audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 播放视频
+                await video.play();
+                console.log('视频开始播放');
+
+                statusText.textContent = '正在播放，音频频谱可视化已启动';
+                statusText.style.color = 'green';
+
+            } catch (err) {
+                console.error('播放失败:', err);
+                statusText.textContent = `播放失败：${err.message}`;
+                statusText.style.color = 'red';
+            }
+        });
+
+        pauseBtn.addEventListener('click', () => {
+            video.pause();
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+        });
+
+        muteBtn.addEventListener('click', () => {
+            video.muted = !video.muted;
+            muteBtn.textContent = video.muted ? '取消静音' : '静音';
+        });
+
+        // 测试音频按钮
+        testAudioBtn.addEventListener('click', async () => {
+            console.log('=== 音频调试信息 ===');
+            console.log('视频元素状态:');
+            console.log('- 是否暂停:', video.paused);
+            console.log('- 是否静音:', video.muted);
+            console.log('- 音量:', video.volume);
+            console.log('- 当前时间:', video.currentTime);
+            console.log('- 总时长:', video.duration);
+
+            console.log('音频上下文状态:');
+            console.log('- 是否初始化:', isAudioContextInitialized);
+            console.log('- 状态:', audioContext ? audioContext.state : '未创建');
+            console.log('- 采样率:', audioContext ? audioContext.sampleRate : 'N/A');
+
+            console.log('音频节点状态:');
+            console.log('- MediaElementSource:', !!mediaElementSource);
+            console.log('- Analyser:', !!analyser);
+            console.log('- GainNode:', !!gainNode);
+
+            if (analyser) {
+                const testData = new Uint8Array(analyser.frequencyBinCount);
+                analyser.getByteFrequencyData(testData);
+                const hasData = testData.some(v => v > 0);
+                const maxVal = Math.max(...testData);
+                console.log('- 频谱数据:', hasData ? `有数据 (最大值: ${maxVal})` : '无数据');
+            }
+
+            // 尝试播放测试音频
+            if (!video.paused) {
+                console.log('视频正在播放，检查音频输出...');
+                setTimeout(() => {
+                    if (analyser) {
+                        const data = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(data);
+                        console.log('延迟检查频谱数据:', data.slice(0, 10));
+                    }
+                }, 1000);
+            }
+        });
+
+        volumeInput.addEventListener('input', (e) => {
+            const volume = parseFloat(e.target.value);
+            video.volume = volume;
+
+            // 如果有增益节点，也同步更新
+            if (gainNode) {
+                gainNode.gain.value = volume;
+                console.log('音量已更新:', volume);
+            }
+        });
+
+        // 监听视频播放状态变化
+        video.addEventListener('play', async () => {
+            console.log('视频播放事件触发');
+
+            // 检查音频状态
+            console.log('视频音量:', video.volume, '静音状态:', video.muted);
+            console.log('音频上下文状态:', audioContext ? audioContext.state : '未初始化');
+
+            if (audioContext && audioContext.state === 'suspended') {
+                await audioContext.resume();
+                console.log('音频上下文在播放时恢复');
+            }
+
+            if (isAudioContextInitialized && analyser) {
+                console.log('重新启动可视化');
+                startVisualization();
+            }
+        });
+
+        video.addEventListener('pause', () => {
+            console.log('视频暂停');
+            stopVisualization();
+        });
+
+        video.addEventListener('ended', () => {
+            console.log('视频播放结束');
+            stopVisualization();
+            statusText.textContent = '播放结束';
+            statusText.style.color = '#666';
+        });
+
+        // 添加音频相关的事件监听
+        video.addEventListener('volumechange', () => {
+            console.log('音量变化:', video.volume, '静音:', video.muted);
+        });
+
+        video.addEventListener('loadstart', () => {
+            console.log('开始加载视频');
+        });
+
+        video.addEventListener('canplay', () => {
+            console.log('视频可以播放');
+            console.log('视频时长:', video.duration);
+            console.log('视频是否有音频:', !video.muted && video.volume > 0);
+        });
+
+        // 画布尺寸适配
+        window.addEventListener('resize', resizeCanvas);
+
+        // 初始化画布尺寸
+        resizeCanvas();
+
+
+        // 如果DOM已经加载完成，立即加载视频
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', loadVideo);
+        } else {
+            loadVideo();
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html.v10 b/index.html.v10
new file mode 100644
index 0000000..53c9337
--- /dev/null
+++ b/index.html.v10
@@ -0,0 +1,1022 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>自定义视频音频播放器</title>
+    <style>
+        .container {
+            max-width: 1000px;
+            margin: 20px auto;
+            padding: 0 20px;
+        }
+
+        .video-box {
+            width: 100%;
+            position: relative;
+        }
+
+        .video-js {
+            width: 100%;
+            border-radius: 8px;
+        }
+
+        .video-js .vjs-tech {
+            border-radius: 8px;
+        }
+
+        /* Video.js 自定义样式 */
+        .video-js .vjs-big-play-button {
+            font-size: 3em;
+            line-height: 1.5em;
+            height: 1.5em;
+            width: 3em;
+            border-radius: 0.3em;
+            background-color: rgba(43, 51, 63, 0.7);
+            border: none;
+            margin-top: -0.75em;
+            margin-left: -1.5em;
+        }
+
+        .video-js .vjs-control-bar {
+            background: rgba(43, 51, 63, 0.7);
+            color: #fff;
+        }
+
+        .controls {
+            margin: 15px 0;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .control-group {
+            margin: 10px 0;
+            padding: 10px;
+            border: 1px solid #eee;
+            border-radius: 6px;
+            background: #fafafa;
+        }
+
+        .control-group h4 {
+            margin: 0 0 8px 0;
+            font-size: 14px;
+            color: #333;
+        }
+
+        .radio-group {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .radio-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        .radio-item input[type="radio"] {
+            margin: 0;
+        }
+
+        .radio-item label {
+            font-size: 13px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        button {
+            padding: 8px 16px;
+            cursor: pointer;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #f5f5f5;
+        }
+
+        button:hover {
+            background: #eee;
+        }
+
+        input[type="text"] {
+            flex: 1;
+            max-width: 400px;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        input[type="range"] {
+            width: 150px;
+        }
+
+        #visualizer {
+            border: 1px solid #eee;
+            margin-top: 20px;
+            width: 100%;
+            height: 150px;
+            border-radius: 4px;
+        }
+
+        .status {
+            color: #666;
+            margin-top: 5px;
+        }
+
+        .progress-container {
+            margin: 15px 0;
+            position: relative;
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background: #e0e0e0;
+            border-radius: 4px;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #4CAF50, #45a049);
+            border-radius: 4px;
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+
+        .progress-info {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 5px;
+            font-size: 12px;
+            color: #666;
+        }
+
+        .time-display {
+            font-family: monospace;
+        }
+    </style>
+
+    <script src="https://cdn.jsdelivr.net/npm/video.js@8.22.0/dist/video.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/video.js@8.22.0/dist/video-js.min.css">
+    <script>
+        const videos = [
+            { src: 'hls/master.m3u8', type: 'application/x-mpegURL' },
+            { src: 'demo01.mp4', type: 'video/mp4' },
+            { src: 'demo02.mp4', type: 'video/mp4' },
+            { src: 'demo03.mp4', type: 'video/mp4' }
+        ];
+        // const VIDEO_URL = 'hls/master.m3u8'; // 使用支持CORS的HLS视频源
+        // const VIDEO_URL = 'output.mp4';
+        // const VIDEO_URL = 'merged_output.mp4';
+        // const VIDEO_URL = 'merged_dual_track.mp4';
+        // const VIDEO_URL = 'demo01.mp4';
+        // const VIDEO_URL = 'demo02.mp4';
+        // const VIDEO_URL = 'demo03.mp4';
+    </script>
+</head>
+
+<body>
+    <div class="container">
+        <h2>自定义视频音频播放器</h2>
+
+        <div class="status" id="statusText">正在自动加载视频...</div>
+
+        <div class="video-box">
+            <video id="video" class="video-js vjs-default-skin" crossorigin="anonymous" preload="auto" data-setup='{}'>
+                <p class="vjs-no-js">
+                    要查看此视频，请启用 JavaScript，并考虑升级到
+                    <a href="https://videojs.com/html5-video-support/" target="_blank">
+                        支持HTML5视频的网络浏览器
+                    </a>。
+                </p>
+            </video>
+        </div>
+
+        <div class="controls">
+            <button id="playBtn" disabled>播放</button>
+            <button id="pauseBtn" disabled>暂停</button>
+            <button id="muteBtn">静音</button>
+            <button id="testAudioBtn">测试音频</button>
+            <span>音量：</span>
+            <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
+        </div>
+
+        <div class="progress-container">
+            <div class="progress-bar" id="progressBar">
+                <div class="progress-fill" id="progressFill"></div>
+            </div>
+            <div class="progress-info">
+                <span class="time-display" id="currentTime">00:00</span>
+                <span class="time-display" id="duration">00:00</span>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>音轨选择</h4>
+            <div class="radio-group" id="trackRadioGroup">
+                <div class="radio-item">
+                    <input type="radio" id="track0" name="audioTrack" value="0" checked>
+                    <label for="track0">默认音轨</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>播放速度</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="rate05" name="playbackRate" value="0.5">
+                    <label for="rate05">0.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate075" name="playbackRate" value="0.75">
+                    <label for="rate075">0.75x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate1" name="playbackRate" value="1" checked>
+                    <label for="rate1">1x (正常)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate125" name="playbackRate" value="1.25">
+                    <label for="rate125">1.25x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate15" name="playbackRate" value="1.5">
+                    <label for="rate15">1.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate2" name="playbackRate" value="2">
+                    <label for="rate2">2x</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>音调变换</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="pitch-12" name="pitchShift" value="-12">
+                    <label for="pitch-12">降一个八度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-7" name="pitchShift" value="-7">
+                    <label for="pitch-7">降五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-5" name="pitchShift" value="-5">
+                    <label for="pitch-5">降四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-3" name="pitchShift" value="-3">
+                    <label for="pitch-3">降小三度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-2" name="pitchShift" value="-2">
+                    <label for="pitch-2">降大二度 (C→B♭)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-1" name="pitchShift" value="-1">
+                    <label for="pitch-1">降小二度 (C→B)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch0" name="pitchShift" value="0" checked>
+                    <label for="pitch0">原调</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch1" name="pitchShift" value="1">
+                    <label for="pitch1">升小二度 (C→C#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch2" name="pitchShift" value="2">
+                    <label for="pitch2">升大二度 (C→D)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch3" name="pitchShift" value="3">
+                    <label for="pitch3">升小三度 (C→D#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch4" name="pitchShift" value="4">
+                    <label for="pitch4">升大三度 (C→E)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch5" name="pitchShift" value="5">
+                    <label for="pitch5">升四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch7" name="pitchShift" value="7">
+                    <label for="pitch7">升五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch12" name="pitchShift" value="12">
+                    <label for="pitch12">升一个八度</label>
+                </div>
+            </div>
+        </div>
+
+        <h3>音频频谱可视化</h3>
+        <canvas id="visualizer"></canvas>
+    </div>
+
+    <script>
+        // Video.js 播放器实例
+        let player;
+        let video; // 将在 Video.js 初始化后设置
+
+        const playBtn = document.getElementById('playBtn');
+        const pauseBtn = document.getElementById('pauseBtn');
+        const muteBtn = document.getElementById('muteBtn');
+        const testAudioBtn = document.getElementById('testAudioBtn');
+        const volumeInput = document.getElementById('volume');
+        const trackRadioGroup = document.getElementById('trackRadioGroup');
+        const statusText = document.getElementById('statusText');
+        const canvas = document.getElementById('visualizer');
+        const ctx = canvas.getContext('2d');
+        const progressBar = document.getElementById('progressBar');
+        const progressFill = document.getElementById('progressFill');
+        const currentTimeDisplay = document.getElementById('currentTime');
+        const durationDisplay = document.getElementById('duration');
+
+        // 固定视频地址 - 使用支持CORS的视频源
+
+        let audioContext;
+        let analyser;
+        let mediaElementSource;
+        let animationId;
+        let gainNode;
+        let soundTouchNode;
+        let currentPitchShift = 0;
+        let isAudioContextInitialized = false;
+        let isWorkletRegistered = false;
+
+        // 设置画布尺寸
+        function resizeCanvas() {
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+        }
+
+        // 格式化时间显示（秒转换为 mm:ss 格式）
+        function formatTime(seconds) {
+            if (isNaN(seconds) || !isFinite(seconds)) {
+                return '00:00';
+            }
+            const minutes = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+
+        // 更新进度条
+        function updateProgress() {
+            if (player && player.duration() && isFinite(player.duration())) {
+                const progress = (player.currentTime() / player.duration()) * 100;
+                progressFill.style.width = `${progress}%`;
+                currentTimeDisplay.textContent = formatTime(player.currentTime());
+                durationDisplay.textContent = formatTime(player.duration());
+            }
+        }
+
+        // 处理进度条点击跳转
+        function handleProgressBarClick(event) {
+            const rect = progressBar.getBoundingClientRect();
+            const clickX = event.clientX - rect.left;
+            const progressBarWidth = rect.width;
+            const clickRatio = clickX / progressBarWidth;
+
+            if (player && player.duration() && isFinite(player.duration())) {
+                const newTime = clickRatio * player.duration();
+                player.currentTime(Math.max(0, Math.min(newTime, player.duration())));
+                console.log(`跳转到: ${formatTime(newTime)}`);
+            }
+        }
+
+        // 创建 SoundTouch AudioWorkletNode (现代化音调变换)
+        async function createSoundTouchNode(audioContext) {
+            try {
+                // 首先注册 AudioWorklet 处理器
+                if (!isWorkletRegistered) {
+                    console.log('注册 SoundTouch AudioWorklet...');
+                    await audioContext.audioWorklet.addModule('https://cdn.jsdelivr.net/npm/@soundtouchjs/audio-worklet@0.2.1/dist/soundtouch-worklet.js');
+                    isWorkletRegistered = true;
+                    console.log('SoundTouch AudioWorklet 注册成功');
+                }
+
+                // 创建 AudioWorkletNode
+                const workletNode = new AudioWorkletNode(audioContext, 'soundtouch-processor');
+                console.log('SoundTouch AudioWorkletNode 创建成功');
+
+                return workletNode;
+            } catch (error) {
+                console.error('创建 SoundTouch 节点失败:', error);
+                // 如果失败，返回一个直通节点
+                return createPassThroughNode(audioContext);
+            }
+        }
+
+        // 创建直通节点作为后备方案
+        function createPassThroughNode(audioContext) {
+            console.log('创建直通节点作为后备方案');
+            const gainNode = audioContext.createGain();
+            gainNode.gain.value = 1.0;
+            return gainNode;
+        }
+
+        // 应用音调变换
+        function applyPitchShift(semitones) {
+            currentPitchShift = semitones;
+            console.log('音调变换设置为:', semitones, '半音');
+
+            // 如果有 SoundTouch 节点，设置音调参数
+            if (soundTouchNode && soundTouchNode.parameters) {
+                try {
+                    // 使用 pitchSemitones 参数来设置半音变换
+                    const pitchSemitonesParam = soundTouchNode.parameters.get('pitchSemitones');
+                    if (pitchSemitonesParam) {
+                        pitchSemitonesParam.value = semitones;
+                        console.log('SoundTouch 音调半音设置为:', semitones);
+                    } else {
+                        console.warn('pitchSemitones 参数不可用，尝试使用 pitch 参数');
+                        // 备选方案：使用 pitch 参数（比率）
+                        const pitchParam = soundTouchNode.parameters.get('pitch');
+                        if (pitchParam) {
+                            const pitchRatio = Math.pow(2, semitones / 12);
+                            pitchParam.value = pitchRatio;
+                            console.log('SoundTouch 音调比率设置为:', pitchRatio);
+                        }
+                    }
+                } catch (error) {
+                    console.warn('设置 SoundTouch 参数时出错:', error);
+                }
+            }
+
+            // 更新状态显示
+            if (!video.paused) {
+                const pitchText = semitones === 0 ? '原调' :
+                    (semitones > 0 ? `升${semitones}半音` : `降${Math.abs(semitones)}半音`);
+                const currentRate = player ? player.playbackRate() : 1;
+                const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+                statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            }
+        }
+
+        // 初始化音频上下文（需用户交互触发）
+        async function initAudioContext() {
+            try {
+                if (isAudioContextInitialized) {
+                    console.log('音频上下文已经初始化，跳过');
+                    return;
+                }
+
+                console.log('开始初始化音频上下文...');
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+                // 如果音频上下文被暂停，恢复它
+                if (audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 创建媒体元素源
+                mediaElementSource = audioContext.createMediaElementSource(video);
+                console.log('媒体元素源已创建');
+
+                // 创建分析器节点
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 1024;  // 增加分辨率
+                analyser.smoothingTimeConstant = 0.8;
+                console.log('分析器节点已创建，fftSize:', analyser.fftSize);                // 创建增益节点（用于音量控制）
+                gainNode = audioContext.createGain();
+                gainNode.gain.value = 1.0;
+                console.log('增益节点已创建');
+
+                // 创建 SoundTouch 音调变换节点
+                soundTouchNode = await createSoundTouchNode(audioContext);
+                console.log('SoundTouch 节点已创建');
+
+                // 连接音频节点链：视频 -> SoundTouch -> 分析器 -> 增益 -> 输出
+                mediaElementSource.connect(soundTouchNode);
+                soundTouchNode.connect(analyser);
+                analyser.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                console.log('音频节点链已连接（使用 SoundTouch AudioWorklet）');
+
+                isAudioContextInitialized = true;
+                console.log('音频上下文初始化成功！');
+
+                // 立即开始可视化
+                startVisualization();
+
+                // 测试音频数据
+                setTimeout(() => {
+                    if (analyser) {
+                        const testArray = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(testArray);
+                        const hasData = testArray.some(value => value > 0);
+                        console.log('测试音频数据 - 有数据:', hasData);
+                        if (hasData) {
+                            console.log('前10个频谱值:', Array.from(testArray.slice(0, 10)));
+                        }
+                    }
+                }, 2000);
+
+            } catch (error) {
+                console.error('音频上下文初始化失败:', error);
+                // 如果音频上下文初始化失败，至少确保视频能播放
+                isAudioContextInitialized = false;
+            }
+        }
+
+        // 启动可视化
+        function startVisualization() {
+            if (!analyser) {
+                console.warn('分析器节点不存在，启动模拟可视化');
+                startMockVisualization();
+                return;
+            }
+
+            // 如果已经在运行动画，先停止
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            console.log('可视化已启动，缓冲区长度:', bufferLength);
+
+            function draw() {
+                if (!analyser) {
+                    console.warn('分析器节点丢失，停止绘制');
+                    return;
+                }
+
+                // 获取频谱数据
+                analyser.getByteFrequencyData(dataArray);
+
+                // 检查是否有音频数据
+                let hasAudioData = false;
+                let maxValue = 0;
+                for (let i = 0; i < dataArray.length; i++) {
+                    if (dataArray[i] > 0) {
+                        hasAudioData = true;
+                        maxValue = Math.max(maxValue, dataArray[i]);
+                    }
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                if (hasAudioData) {
+                    // console.log('检测到音频数据，最大值:', maxValue);
+                    // 绘制频谱柱状图
+                    const barWidth = (canvas.width / bufferLength) * 2.5;
+                    let x = 0;
+
+                    for (let i = 0; i < bufferLength; i++) {
+                        const barHeight = (dataArray[i] / 255) * canvas.height;
+
+                        // 创建渐变色
+                        const hue = (i / bufferLength) * 360;
+                        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                        ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
+                        x += barWidth;
+                    }
+                } else {
+                    // 显示"无音频数据"提示
+                    ctx.fillStyle = '#999';
+                    ctx.font = '16px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('等待音频数据...', canvas.width / 2, canvas.height / 2);
+
+                    // 如果视频正在播放但没有音频数据，可能有问题
+                    if (player && !player.paused()) {
+                        console.log('视频正在播放但没有音频数据');
+                    }
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 模拟可视化（当Web Audio API不可用时）
+        function startMockVisualization() {
+            console.log('启动模拟可视化');
+
+            function draw() {
+                if (player && player.paused()) {
+                    return;
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                // 生成模拟频谱数据
+                const barCount = 50;
+                const barWidth = canvas.width / barCount;
+
+                for (let i = 0; i < barCount; i++) {
+                    // 根据时间生成动态数据
+                    const time = Date.now() * 0.001;
+                    const frequency = i * 0.2;
+                    const amplitude = Math.sin(time + frequency) * 0.5 + 0.5;
+                    const barHeight = amplitude * canvas.height * 0.8;
+
+                    // 创建渐变色
+                    const hue = (i / barCount) * 360;
+                    ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                    ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth - 1, barHeight);
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 停止可视化
+        function stopVisualization() {
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+                animationId = null;
+            }
+        }
+
+        // 初始化 Video.js 播放器
+        function initVideoPlayer() {
+            console.log('初始化 Video.js 播放器...');
+
+            player = videojs('video', {
+                controls: true,
+                fluid: true,
+                responsive: true,
+                playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
+                plugins: {
+                    // 可以在这里添加插件配置
+                }
+            });
+
+            // 获取底层的 HTML5 video 元素
+            video = player.tech(true).el();
+
+            player.ready(() => {
+                console.log('Video.js 播放器已准备就绪');
+
+                // 设置视频源
+                player.src({
+                    src: VIDEO_URL,
+                    type: 'video/mp4'
+                });
+
+                console.log('视频源已设置:', VIDEO_URL);
+                statusText.textContent = 'Video.js 播放器已初始化，视频源已加载';
+                statusText.style.color = 'green';
+
+                // 启用控制按钮
+                playBtn.disabled = false;
+                pauseBtn.disabled = false;
+            });
+
+            // Video.js 事件监听
+            player.on('loadedmetadata', () => {
+                console.log('Video.js: 视频元数据已加载');
+                console.log('视频时长:', player.duration());
+                console.log('视频尺寸:', player.videoWidth(), 'x', player.videoHeight());
+
+                // 初始化进度条
+                updateProgress();
+
+                // 处理音轨信息
+                handleAudioTracks();
+            });
+
+            player.on('play', () => {
+                console.log('Video.js: 播放开始');
+                handlePlayEvent();
+            });
+
+            player.on('pause', () => {
+                console.log('Video.js: 播放暂停');
+                handlePauseEvent();
+            });
+
+            player.on('ended', () => {
+                console.log('Video.js: 播放结束');
+                handleEndedEvent();
+            });
+
+            player.on('timeupdate', () => {
+                updateProgress();
+            });
+
+            player.on('volumechange', () => {
+                console.log('Video.js: 音量变化:', player.volume(), '静音:', player.muted());
+                // 同步到自定义音量控件
+                volumeInput.value = player.volume();
+                muteBtn.textContent = player.muted() ? '取消静音' : '静音';
+            });
+
+            player.on('error', (error) => {
+                console.error('Video.js 错误:', error);
+                statusText.textContent = `播放器错误: ${error.message || '未知错误'}`;
+                statusText.style.color = 'red';
+            });
+
+            return player;
+        }
+
+        // 处理音轨信息
+        function handleAudioTracks() {
+            console.log('处理音轨信息...');
+
+            // 清空现有的音轨选项
+            trackRadioGroup.innerHTML = '';
+
+            // 获取音轨信息
+            const audioTracks = video.audioTracks;
+
+            if (audioTracks && audioTracks.length > 0) {
+                console.log('发现', audioTracks.length, '个音轨');
+
+                for (let i = 0; i < audioTracks.length; i++) {
+                    const track = audioTracks[i];
+                    const radioItem = document.createElement('div');
+                    radioItem.className = 'radio-item';
+
+                    const radio = document.createElement('input');
+                    radio.type = 'radio';
+                    radio.name = 'audioTrack';
+                    radio.id = `track${i}`;
+                    radio.value = i;
+                    radio.checked = track.enabled;
+
+                    const label = document.createElement('label');
+                    label.htmlFor = `track${i}`;
+                    label.textContent = track.label || track.language || `音轨 ${i + 1}`;
+
+                    radioItem.appendChild(radio);
+                    radioItem.appendChild(label);
+                    trackRadioGroup.appendChild(radioItem);
+
+                    console.log(`音轨 ${i}:`, track.label, track.language, track.enabled);
+
+                    // 添加音轨切换事件
+                    radio.addEventListener('change', () => {
+                        if (radio.checked) {
+                            console.log('切换到音轨:', i);
+                            // 禁用所有音轨
+                            for (let j = 0; j < audioTracks.length; j++) {
+                                audioTracks[j].enabled = false;
+                            }
+                            // 启用选中的音轨
+                            audioTracks[i].enabled = true;
+                        }
+                    });
+                }
+            } else {
+                // 默认音轨
+                const radioItem = document.createElement('div');
+                radioItem.className = 'radio-item';
+
+                const radio = document.createElement('input');
+                radio.type = 'radio';
+                radio.name = 'audioTrack';
+                radio.id = 'track0';
+                radio.value = '0';
+                radio.checked = true;
+
+                const label = document.createElement('label');
+                label.htmlFor = 'track0';
+                label.textContent = '默认音轨';
+
+                radioItem.appendChild(radio);
+                radioItem.appendChild(label);
+                trackRadioGroup.appendChild(radioItem);
+
+                console.log('使用默认音轨配置');
+            }
+        }
+
+        // 处理播放事件
+        function handlePlayEvent() {
+            playBtn.disabled = true;
+            pauseBtn.disabled = false;
+
+            const currentRate = player.playbackRate();
+            const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+            const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+            const pitchText = currentPitchShift === '0' ? '原调' :
+                (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+            statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            statusText.style.color = '#4CAF50';
+
+            // 启动音频可视化
+            if (isAudioContextInitialized && analyser) {
+                startVisualization();
+            }
+        }
+
+        // 处理暂停事件
+        function handlePauseEvent() {
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+            stopVisualization();
+        }
+
+        // 处理结束事件
+        function handleEndedEvent() {
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+            statusText.textContent = '播放结束';
+            statusText.style.color = '#666';
+            stopVisualization();
+        }
+
+        // 播放控制
+        playBtn.addEventListener('click', async () => {
+            try {
+                console.log('点击播放按钮');
+
+                // 初始化音频上下文（必须在用户交互后创建）
+                if (!isAudioContextInitialized) {
+                    console.log('初始化音频上下文...');
+                    await initAudioContext();
+                }
+
+                // 确保音频上下文在运行状态
+                if (audioContext && audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 使用 Video.js 播放
+                if (player) {
+                    await player.play();
+                    console.log('Video.js 开始播放');
+                } else {
+                    console.error('Video.js 播放器未初始化');
+                }
+
+            } catch (err) {
+                console.error('播放失败:', err);
+                statusText.textContent = `播放失败：${err.message}`;
+                statusText.style.color = 'red';
+            }
+        });
+
+        pauseBtn.addEventListener('click', () => {
+            if (player) {
+                player.pause();
+                console.log('Video.js 暂停播放');
+            }
+        });
+
+        muteBtn.addEventListener('click', () => {
+            if (player) {
+                player.muted(!player.muted());
+                muteBtn.textContent = player.muted() ? '取消静音' : '静音';
+                console.log('Video.js 静音状态:', player.muted());
+            }
+        });
+
+        // 测试音频按钮
+        testAudioBtn.addEventListener('click', async () => {
+            console.log('=== 音频调试信息 ===');
+            console.log('Video.js 播放器状态:');
+            if (player) {
+                console.log('- 是否暂停:', player.paused());
+                console.log('- 是否静音:', player.muted());
+                console.log('- 音量:', player.volume());
+                console.log('- 当前时间:', player.currentTime());
+                console.log('- 总时长:', player.duration());
+                console.log('- 播放速度:', player.playbackRate());
+            } else {
+                console.log('- Video.js 播放器未初始化');
+            }
+
+            console.log('底层视频元素状态:');
+            if (video) {
+                console.log('- 是否暂停:', video.paused);
+                console.log('- 是否静音:', video.muted);
+                console.log('- 音量:', video.volume);
+                console.log('- 当前时间:', video.currentTime);
+                console.log('- 总时长:', video.duration);
+            } else {
+                console.log('- 底层视频元素未获取');
+            }
+
+            console.log('音频上下文状态:');
+            console.log('- 是否初始化:', isAudioContextInitialized);
+            console.log('- 状态:', audioContext ? audioContext.state : '未创建');
+            console.log('- 采样率:', audioContext ? audioContext.sampleRate : 'N/A');
+
+            console.log('音频节点状态:');
+            console.log('- MediaElementSource:', !!mediaElementSource);
+            console.log('- Analyser:', !!analyser);
+            console.log('- GainNode:', !!gainNode);
+
+            if (analyser) {
+                const testData = new Uint8Array(analyser.frequencyBinCount);
+                analyser.getByteFrequencyData(testData);
+                const hasData = testData.some(v => v > 0);
+                const maxVal = Math.max(...testData);
+                console.log('- 频谱数据:', hasData ? `有数据 (最大值: ${maxVal})` : '无数据');
+            }
+
+            // 尝试播放测试音频
+            if (player && !player.paused()) {
+                console.log('视频正在播放，检查音频输出...');
+                setTimeout(() => {
+                    if (analyser) {
+                        const data = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(data);
+                        console.log('延迟检查频谱数据:', data.slice(0, 10));
+                    }
+                }, 1000);
+            }
+        });
+
+        volumeInput.addEventListener('input', (e) => {
+            const volume = parseFloat(e.target.value);
+
+            // 同步到 Video.js
+            if (player) {
+                player.volume(volume);
+            }
+
+            // 如果有增益节点，也同步更新
+            if (gainNode) {
+                gainNode.gain.value = volume;
+            }
+
+            console.log('音量已更新:', volume);
+        });
+
+        // 播放速度控制
+        document.querySelectorAll('input[name="playbackRate"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const playbackRate = parseFloat(e.target.value);
+
+                    // 使用 Video.js 设置播放速度
+                    if (player) {
+                        player.playbackRate(playbackRate);
+                    }
+
+                    const rateText = playbackRate === 1 ? '正常速度' : `${playbackRate}x 速度`;
+                    console.log('播放速度已改变为:', rateText);
+
+                    // 如果视频正在播放，显示速度变化提示
+                    if (player && !player.paused()) {
+                        const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+                        const pitchText = currentPitchShift === '0' ? '原调' :
+                            (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+                        statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+                        statusText.style.color = '#4CAF50';
+                    }
+                }
+            });
+        });
+
+        // 音调变换控制
+        document.querySelectorAll('input[name="pitchShift"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const pitchShift = parseInt(e.target.value);
+                    applyPitchShift(pitchShift);
+                }
+            });
+        });
+
+        // 监听原生视频事件（通过 Video.js 已经处理，这里移除重复的事件监听）
+        // 所有事件现在通过 Video.js 的事件系统处理
+
+        // 进度条点击跳转
+        progressBar.addEventListener('click', handleProgressBarClick);
+
+        // 画布尺寸适配
+        window.addEventListener('resize', resizeCanvas);
+
+        // 初始化画布尺寸
+        resizeCanvas();
+
+        // 初始化 Video.js 播放器
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('DOM 加载完成，初始化 Video.js...');
+            initVideoPlayer();
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html.v11 b/index.html.v11
new file mode 100644
index 0000000..93b6570
--- /dev/null
+++ b/index.html.v11
@@ -0,0 +1,1098 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>自定义视频音频播放器</title>
+    <style>
+        .container {
+            max-width: 1000px;
+            margin: 20px auto;
+            padding: 0 20px;
+        }
+
+        .video-box {
+            width: 100%;
+            position: relative;
+            aspect-ratio: 16/9;
+            /* 移除 padding-top */
+        }
+
+        .video-js {
+            width: 100%;
+            height: 100%;
+            border-radius: 8px;
+            /* 移除绝对定位 */
+            aspect-ratio: 16/9;
+        }
+
+        .video-js .vjs-tech {
+            border-radius: 8px;
+        }
+
+        /* Video.js 自定义样式 */
+        .video-js .vjs-big-play-button {
+            font-size: 3em;
+            line-height: 1.5em;
+            height: 1.5em;
+            width: 3em;
+            border-radius: 0.3em;
+            background-color: rgba(43, 51, 63, 0.7);
+            border: none;
+            margin-top: -0.75em;
+            margin-left: -1.5em;
+        }
+
+        .video-js .vjs-control-bar {
+            background: rgba(43, 51, 63, 0.7);
+            color: #fff;
+        }
+
+        .controls {
+            margin: 15px 0;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .control-group {
+            margin: 10px 0;
+            padding: 10px;
+            border: 1px solid #eee;
+            border-radius: 6px;
+            background: #fafafa;
+        }
+
+        .control-group h4 {
+            margin: 0 0 8px 0;
+            font-size: 14px;
+            color: #333;
+        }
+
+        .radio-group {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .radio-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        .radio-item input[type="radio"] {
+            margin: 0;
+        }
+
+        .radio-item label {
+            font-size: 13px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        button {
+            padding: 8px 16px;
+            cursor: pointer;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #f5f5f5;
+        }
+
+        button:hover {
+            background: #eee;
+        }
+
+        input[type="text"] {
+            flex: 1;
+            max-width: 400px;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        input[type="range"] {
+            width: 150px;
+        }
+
+        #visualizer {
+            border: 1px solid #eee;
+            margin-top: 20px;
+            width: 100%;
+            height: 150px;
+            border-radius: 4px;
+        }
+
+        .status {
+            color: #666;
+            margin-top: 5px;
+        }
+
+        .progress-container {
+            margin: 15px 0;
+            position: relative;
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background: #e0e0e0;
+            border-radius: 4px;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #4CAF50, #45a049);
+            border-radius: 4px;
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+
+        .progress-info {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 5px;
+            font-size: 12px;
+            color: #666;
+        }
+
+        .time-display {
+            font-family: monospace;
+        }
+    </style>
+
+    <script src="https://cdn.jsdelivr.net/npm/video.js@8.22.0/dist/video.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/video.js@8.22.0/dist/video-js.min.css">
+    <script>
+        const videos = [
+            { src: 'hls/master.m3u8', type: 'application/x-mpegURL' },
+            { src: 'demo01.mp4', type: 'video/mp4' },
+            { src: 'demo02.mp4', type: 'video/mp4' },
+            { src: 'demo03.mp4', type: 'video/mp4' }
+        ];
+        // const VIDEO_URL = 'hls/master.m3u8'; // 使用支持CORS的HLS视频源
+        // const VIDEO_URL = 'output.mp4';
+        // const VIDEO_URL = 'merged_output.mp4';
+        // const VIDEO_URL = 'merged_dual_track.mp4';
+        // const VIDEO_URL = 'demo01.mp4';
+        // const VIDEO_URL = 'demo02.mp4';
+        // const VIDEO_URL = 'demo03.mp4';
+    </script>
+</head>
+
+<body>
+    <div class="container">
+        <h2>自定义视频音频播放器</h2>
+
+        <div class="status" id="statusText">正在自动加载视频...</div>
+
+        <div class="video-box">
+            <video id="video" class="video-js vjs-default-skin" crossorigin="anonymous" preload="auto" data-setup='{}'>
+                <p class="vjs-no-js">
+                    要查看此视频，请启用 JavaScript，并考虑升级到
+                    <a href="https://videojs.com/html5-video-support/" target="_blank">
+                        支持HTML5视频的网络浏览器
+                    </a>。
+                </p>
+            </video>
+        </div>
+
+        <div class="controls">
+            <label for="videoSelect">选择视频：</label>
+            <select id="videoSelect"></select>
+        </div>
+
+        <div class="controls">
+            <button id="playBtn" disabled>播放</button>
+            <button id="pauseBtn" disabled>暂停</button>
+            <button id="muteBtn">静音</button>
+            <button id="testAudioBtn">测试音频</button>
+            <span>音量：</span>
+            <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
+        </div>
+
+        <div class="progress-container">
+            <div class="progress-bar" id="progressBar">
+                <div class="progress-fill" id="progressFill"></div>
+            </div>
+            <div class="progress-info">
+                <span class="time-display" id="currentTime">00:00</span>
+                <span class="time-display" id="duration">00:00</span>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>音轨选择</h4>
+            <div class="radio-group" id="trackRadioGroup">
+                <div class="radio-item">
+                    <input type="radio" id="track0" name="audioTrack" value="0" checked>
+                    <label for="track0">默认音轨</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>播放速度</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="rate05" name="playbackRate" value="0.5">
+                    <label for="rate05">0.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate075" name="playbackRate" value="0.75">
+                    <label for="rate075">0.75x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate1" name="playbackRate" value="1" checked>
+                    <label for="rate1">1x (正常)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate125" name="playbackRate" value="1.25">
+                    <label for="rate125">1.25x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate15" name="playbackRate" value="1.5">
+                    <label for="rate15">1.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate2" name="playbackRate" value="2">
+                    <label for="rate2">2x</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>音调变换</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="pitch-12" name="pitchShift" value="-12">
+                    <label for="pitch-12">降一个八度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-7" name="pitchShift" value="-7">
+                    <label for="pitch-7">降五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-5" name="pitchShift" value="-5">
+                    <label for="pitch-5">降四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-3" name="pitchShift" value="-3">
+                    <label for="pitch-3">降小三度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-2" name="pitchShift" value="-2">
+                    <label for="pitch-2">降大二度 (C→B♭)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-1" name="pitchShift" value="-1">
+                    <label for="pitch-1">降小二度 (C→B)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch0" name="pitchShift" value="0" checked>
+                    <label for="pitch0">原调</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch1" name="pitchShift" value="1">
+                    <label for="pitch1">升小二度 (C→C#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch2" name="pitchShift" value="2">
+                    <label for="pitch2">升大二度 (C→D)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch3" name="pitchShift" value="3">
+                    <label for="pitch3">升小三度 (C→D#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch4" name="pitchShift" value="4">
+                    <label for="pitch4">升大三度 (C→E)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch5" name="pitchShift" value="5">
+                    <label for="pitch5">升四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch7" name="pitchShift" value="7">
+                    <label for="pitch7">升五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch12" name="pitchShift" value="12">
+                    <label for="pitch12">升一个八度</label>
+                </div>
+            </div>
+        </div>
+
+        <h3>音频频谱可视化</h3>
+        <canvas id="visualizer"></canvas>
+    </div>
+
+    <script>
+        // Video.js 播放器实例
+        let player;
+        let video; // 将在 Video.js 初始化后设置
+
+        const playBtn = document.getElementById('playBtn');
+        const pauseBtn = document.getElementById('pauseBtn');
+        const muteBtn = document.getElementById('muteBtn');
+        const testAudioBtn = document.getElementById('testAudioBtn');
+        const volumeInput = document.getElementById('volume');
+        const trackRadioGroup = document.getElementById('trackRadioGroup');
+        const statusText = document.getElementById('statusText');
+        const canvas = document.getElementById('visualizer');
+        const ctx = canvas.getContext('2d');
+        const progressBar = document.getElementById('progressBar');
+        const progressFill = document.getElementById('progressFill');
+        const currentTimeDisplay = document.getElementById('currentTime');
+        const durationDisplay = document.getElementById('duration');
+        const videoSelect = document.getElementById('videoSelect');
+
+        // 固定视频地址 - 使用支持CORS的视频源
+
+        let audioContext;
+        let analyser;
+        let mediaElementSource;
+        let animationId;
+        let gainNode;
+        let soundTouchNode;
+        let currentPitchShift = 0;
+        let isAudioContextInitialized = false;
+        let isWorkletRegistered = false;
+
+        let currentVideoIndex = 0;
+        let VIDEO_URL = videos[0].src;
+        let VIDEO_TYPE = videos[0].type;
+
+        // 设置画布尺寸
+        function resizeCanvas() {
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+        }
+
+        // 格式化时间显示（秒转换为 mm:ss 格式）
+        function formatTime(seconds) {
+            if (isNaN(seconds) || !isFinite(seconds)) {
+                return '00:00';
+            }
+            const minutes = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+
+        // 更新进度条
+        function updateProgress() {
+            if (player && player.duration() && isFinite(player.duration())) {
+                const progress = (player.currentTime() / player.duration()) * 100;
+                progressFill.style.width = `${progress}%`;
+                currentTimeDisplay.textContent = formatTime(player.currentTime());
+                durationDisplay.textContent = formatTime(player.duration());
+            }
+        }
+
+        // 处理进度条点击跳转
+        function handleProgressBarClick(event) {
+            const rect = progressBar.getBoundingClientRect();
+            const clickX = event.clientX - rect.left;
+            const progressBarWidth = rect.width;
+            const clickRatio = clickX / progressBarWidth;
+
+            if (player && player.duration() && isFinite(player.duration())) {
+                const newTime = clickRatio * player.duration();
+                player.currentTime(Math.max(0, Math.min(newTime, player.duration())));
+                console.log(`跳转到: ${formatTime(newTime)}`);
+            }
+        }
+
+        // 创建 SoundTouch AudioWorkletNode (现代化音调变换)
+        async function createSoundTouchNode(audioContext) {
+            try {
+                // 首先注册 AudioWorklet 处理器
+                if (!isWorkletRegistered) {
+                    console.log('注册 SoundTouch AudioWorklet...');
+                    await audioContext.audioWorklet.addModule('https://cdn.jsdelivr.net/npm/@soundtouchjs/audio-worklet@0.2.1/dist/soundtouch-worklet.js');
+                    isWorkletRegistered = true;
+                    console.log('SoundTouch AudioWorklet 注册成功');
+                }
+
+                // 创建 AudioWorkletNode
+                const workletNode = new AudioWorkletNode(audioContext, 'soundtouch-processor');
+                console.log('SoundTouch AudioWorkletNode 创建成功');
+
+                return workletNode;
+            } catch (error) {
+                console.error('创建 SoundTouch 节点失败:', error);
+                // 如果失败，返回一个直通节点
+                return createPassThroughNode(audioContext);
+            }
+        }
+
+        // 创建直通节点作为后备方案
+        function createPassThroughNode(audioContext) {
+            console.log('创建直通节点作为后备方案');
+            const gainNode = audioContext.createGain();
+            gainNode.gain.value = 1.0;
+            return gainNode;
+        }
+
+        // 应用音调变换
+        function applyPitchShift(semitones) {
+            currentPitchShift = semitones;
+            console.log('音调变换设置为:', semitones, '半音');
+
+            // 如果有 SoundTouch 节点，设置音调参数
+            if (soundTouchNode && soundTouchNode.parameters) {
+                try {
+                    // 使用 pitchSemitones 参数来设置半音变换
+                    const pitchSemitonesParam = soundTouchNode.parameters.get('pitchSemitones');
+                    if (pitchSemitonesParam) {
+                        pitchSemitonesParam.value = semitones;
+                        console.log('SoundTouch 音调半音设置为:', semitones);
+                    } else {
+                        console.warn('pitchSemitones 参数不可用，尝试使用 pitch 参数');
+                        // 备选方案：使用 pitch 参数（比率）
+                        const pitchParam = soundTouchNode.parameters.get('pitch');
+                        if (pitchParam) {
+                            const pitchRatio = Math.pow(2, semitones / 12);
+                            pitchParam.value = pitchRatio;
+                            console.log('SoundTouch 音调比率设置为:', pitchRatio);
+                        }
+                    }
+                } catch (error) {
+                    console.warn('设置 SoundTouch 参数时出错:', error);
+                }
+            }
+
+            // 更新状态显示
+            if (!video.paused) {
+                const pitchText = semitones === 0 ? '原调' :
+                    (semitones > 0 ? `升${semitones}半音` : `降${Math.abs(semitones)}半音`);
+                const currentRate = player ? player.playbackRate() : 1;
+                const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+                statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            }
+        }
+
+        // 初始化音频上下文（需用户交互触发）
+        async function initAudioContext() {
+            try {
+                if (isAudioContextInitialized) {
+                    console.log('音频上下文已经初始化，跳过');
+                    return;
+                }
+
+                console.log('开始初始化音频上下文...');
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+                // 如果音频上下文被暂停，恢复它
+                if (audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 创建媒体元素源
+                mediaElementSource = audioContext.createMediaElementSource(video);
+                console.log('媒体元素源已创建');
+
+                // 创建分析器节点
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 1024;  // 增加分辨率
+                analyser.smoothingTimeConstant = 0.8;
+                console.log('分析器节点已创建，fftSize:', analyser.fftSize);                // 创建增益节点（用于音量控制）
+                gainNode = audioContext.createGain();
+                gainNode.gain.value = 1.0;
+                console.log('增益节点已创建');
+
+                // 创建 SoundTouch 音调变换节点
+                soundTouchNode = await createSoundTouchNode(audioContext);
+                console.log('SoundTouch 节点已创建');
+
+                // 连接音频节点链：视频 -> SoundTouch -> 分析器 -> 增益 -> 输出
+                mediaElementSource.connect(soundTouchNode);
+                soundTouchNode.connect(analyser);
+                analyser.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                console.log('音频节点链已连接（使用 SoundTouch AudioWorklet）');
+
+                isAudioContextInitialized = true;
+                console.log('音频上下文初始化成功！');
+
+                // 立即开始可视化
+                startVisualization();
+
+                // 测试音频数据
+                setTimeout(() => {
+                    if (analyser) {
+                        const testArray = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(testArray);
+                        const hasData = testArray.some(value => value > 0);
+                        console.log('测试音频数据 - 有数据:', hasData);
+                        if (hasData) {
+                            console.log('前10个频谱值:', Array.from(testArray.slice(0, 10)));
+                        }
+                    }
+                }, 2000);
+
+            } catch (error) {
+                console.error('音频上下文初始化失败:', error);
+                // 如果音频上下文初始化失败，至少确保视频能播放
+                isAudioContextInitialized = false;
+            }
+        }
+
+        // 启动可视化
+        function startVisualization() {
+            if (!analyser) {
+                console.warn('分析器节点不存在，启动模拟可视化');
+                startMockVisualization();
+                return;
+            }
+
+            // 如果已经在运行动画，先停止
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            console.log('可视化已启动，缓冲区长度:', bufferLength);
+
+            function draw() {
+                if (!analyser) {
+                    console.warn('分析器节点丢失，停止绘制');
+                    return;
+                }
+
+                // 获取频谱数据
+                analyser.getByteFrequencyData(dataArray);
+
+                // 检查是否有音频数据
+                let hasAudioData = false;
+                let maxValue = 0;
+                for (let i = 0; i < dataArray.length; i++) {
+                    if (dataArray[i] > 0) {
+                        hasAudioData = true;
+                        maxValue = Math.max(maxValue, dataArray[i]);
+                    }
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                if (hasAudioData) {
+                    // console.log('检测到音频数据，最大值:', maxValue);
+                    // 绘制频谱柱状图
+                    const barWidth = (canvas.width / bufferLength) * 2.5;
+                    let x = 0;
+
+                    for (let i = 0; i < bufferLength; i++) {
+                        const barHeight = (dataArray[i] / 255) * canvas.height;
+
+                        // 创建渐变色
+                        const hue = (i / bufferLength) * 360;
+                        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                        ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
+                        x += barWidth;
+                    }
+                } else {
+                    // 显示"无音频数据"提示
+                    ctx.fillStyle = '#999';
+                    ctx.font = '16px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('等待音频数据...', canvas.width / 2, canvas.height / 2);
+
+                    // 如果视频正在播放但没有音频数据，可能有问题
+                    if (player && !player.paused()) {
+                        console.log('视频正在播放但没有音频数据');
+                    }
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 模拟可视化（当Web Audio API不可用时）
+        function startMockVisualization() {
+            console.log('启动模拟可视化');
+
+            function draw() {
+                if (player && player.paused()) {
+                    return;
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                // 生成模拟频谱数据
+                const barCount = 50;
+                const barWidth = canvas.width / barCount;
+
+                for (let i = 0; i < barCount; i++) {
+                    // 根据时间生成动态数据
+                    const time = Date.now() * 0.001;
+                    const frequency = i * 0.2;
+                    const amplitude = Math.sin(time + frequency) * 0.5 + 0.5;
+                    const barHeight = amplitude * canvas.height * 0.8;
+
+                    // 创建渐变色
+                    const hue = (i / barCount) * 360;
+                    ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                    ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth - 1, barHeight);
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 停止可视化
+        function stopVisualization() {
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+                animationId = null;
+            }
+        }
+
+        // 初始化 Video.js 播放器
+        function initVideoPlayer() {
+            console.log('初始化 Video.js 播放器...');
+
+            player = videojs('video', {
+                controls: true,
+                fluid: true,
+                responsive: true,
+                playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
+                plugins: {
+                    // 可以在这里添加插件配置
+                }
+            });
+
+            // 获取底层的 HTML5 video 元素
+            video = player.tech(true).el();
+
+            player.ready(() => {
+                console.log('Video.js 播放器已准备就绪');
+
+                // 设置视频源
+                player.src({
+                    src: VIDEO_URL,
+                    type: VIDEO_TYPE
+                });
+
+                console.log('视频源已设置:', VIDEO_URL);
+                statusText.textContent = 'Video.js 播放器已初始化，视频源已加载';
+                statusText.style.color = 'green';
+
+                // 启用控制按钮
+                playBtn.disabled = false;
+                pauseBtn.disabled = false;
+            });
+
+            // Video.js 事件监听
+            player.on('loadedmetadata', () => {
+                console.log('Video.js: 视频元数据已加载');
+                console.log('视频时长:', player.duration());
+                console.log('视频尺寸:', player.videoWidth(), 'x', player.videoHeight());
+
+                // 初始化进度条
+                updateProgress();
+
+                // 处理音轨信息
+                handleAudioTracks();
+            });
+
+            player.on('play', () => {
+                console.log('Video.js: 播放开始');
+                handlePlayEvent();
+            });
+
+            player.on('pause', () => {
+                console.log('Video.js: 播放暂停');
+                handlePauseEvent();
+            });
+
+            player.on('ended', () => {
+                console.log('Video.js: 播放结束');
+                handleEndedEvent();
+            });
+
+            player.on('timeupdate', () => {
+                updateProgress();
+            });
+
+            player.on('volumechange', () => {
+                console.log('Video.js: 音量变化:', player.volume(), '静音:', player.muted());
+                // 同步到自定义音量控件
+                volumeInput.value = player.volume();
+                muteBtn.textContent = player.muted() ? '取消静音' : '静音';
+            });
+
+            player.on('error', (error) => {
+                console.error('Video.js 错误:', error);
+                statusText.textContent = `播放器错误: ${error.message || '未知错误'}`;
+                statusText.style.color = 'red';
+            });
+
+            return player;
+        }
+
+        // 初始化视频选择下拉框
+        function initVideoSelect() {
+            videoSelect.innerHTML = '';
+            videos.forEach((v, idx) => {
+                const option = document.createElement('option');
+                option.value = idx;
+                option.textContent = v.src;
+                videoSelect.appendChild(option);
+            });
+            videoSelect.selectedIndex = 0;
+        }
+
+        // 切换视频源
+        function switchVideo(index) {
+            if (!player) return;
+            const v = videos[index];
+            if (!v) return;
+            currentVideoIndex = index;
+            VIDEO_URL = v.src;
+            VIDEO_TYPE = v.type;
+            player.pause();
+            player.src({ src: VIDEO_URL, type: VIDEO_TYPE });
+            player.load();
+            player.currentTime(0);
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+            statusText.textContent = '已切换视频，等待播放';
+            statusText.style.color = '#666';
+            // 重置进度条
+            updateProgress();
+        }
+
+        // 监听下拉框变化
+        videoSelect.addEventListener('change', (e) => {
+            const idx = parseInt(e.target.value);
+            switchVideo(idx);
+        });
+
+        // 处理音轨信息
+        function handleAudioTracks() {
+            console.log('处理音轨信息...');
+
+            // 清空现有的音轨选项
+            trackRadioGroup.innerHTML = '';
+
+            // 优先用 video.js 的 audioTracks API
+            let audioTracks = null;
+            if (player && typeof player.audioTracks === 'function') {
+                audioTracks = player.audioTracks();
+            } else if (video && video.audioTracks) {
+                audioTracks = video.audioTracks;
+            }
+
+            if (audioTracks && audioTracks.length > 0) {
+                console.log('发现', audioTracks.length, '个音轨');
+                for (let i = 0; i < audioTracks.length; i++) {
+                    const track = audioTracks[i] || audioTracks.item?.(i);
+                    const radioItem = document.createElement('div');
+                    radioItem.className = 'radio-item';
+
+                    const radio = document.createElement('input');
+                    radio.type = 'radio';
+                    radio.name = 'audioTrack';
+                    radio.id = `track${i}`;
+                    radio.value = i;
+                    radio.checked = track.enabled || track.selected;
+
+                    const label = document.createElement('label');
+                    label.htmlFor = `track${i}`;
+                    label.textContent = track.label || track.language || `音轨 ${i + 1}`;
+
+                    radioItem.appendChild(radio);
+                    radioItem.appendChild(label);
+                    trackRadioGroup.appendChild(radioItem);
+
+                    console.log(`音轨 ${i}:`, track.label, track.language, track.enabled || track.selected);
+
+                    // 添加音轨切换事件
+                    radio.addEventListener('change', () => {
+                        if (radio.checked) {
+                            console.log('切换到音轨:', i);
+                            // 禁用所有音轨
+                            for (let j = 0; j < audioTracks.length; j++) {
+                                if (audioTracks[j]) {
+                                    audioTracks[j].enabled = false;
+                                    if (typeof audioTracks[j].selected !== 'undefined') audioTracks[j].selected = false;
+                                } else if (audioTracks.item) {
+                                    const t = audioTracks.item(j);
+                                    if (t) {
+                                        t.enabled = false;
+                                        if (typeof t.selected !== 'undefined') t.selected = false;
+                                    }
+                                }
+                            }
+                            // 启用选中的音轨
+                            if (audioTracks[i]) {
+                                audioTracks[i].enabled = true;
+                                if (typeof audioTracks[i].selected !== 'undefined') audioTracks[i].selected = true;
+                            } else if (audioTracks.item) {
+                                const t = audioTracks.item(i);
+                                if (t) {
+                                    t.enabled = true;
+                                    if (typeof t.selected !== 'undefined') t.selected = true;
+                                }
+                            }
+                        }
+                    });
+                }
+            } else {
+                // 默认音轨
+                const radioItem = document.createElement('div');
+                radioItem.className = 'radio-item';
+
+                const radio = document.createElement('input');
+                radio.type = 'radio';
+                radio.name = 'audioTrack';
+                radio.id = 'track0';
+                radio.value = '0';
+                radio.checked = true;
+
+                const label = document.createElement('label');
+                label.htmlFor = 'track0';
+                label.textContent = '默认音轨';
+
+                radioItem.appendChild(radio);
+                radioItem.appendChild(label);
+                trackRadioGroup.appendChild(radioItem);
+
+                console.log('使用默认音轨配置');
+            }
+        }
+
+        // 处理播放事件
+        function handlePlayEvent() {
+            playBtn.disabled = true;
+            pauseBtn.disabled = false;
+
+            const currentRate = player.playbackRate();
+            const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+            const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+            const pitchText = currentPitchShift === '0' ? '原调' :
+                (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+            statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            statusText.style.color = '#4CAF50';
+
+            // 启动音频可视化
+            if (isAudioContextInitialized && analyser) {
+                startVisualization();
+            }
+        }
+
+        // 处理暂停事件
+        function handlePauseEvent() {
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+            stopVisualization();
+        }
+
+        // 处理结束事件
+        function handleEndedEvent() {
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+            statusText.textContent = '播放结束';
+            statusText.style.color = '#666';
+            stopVisualization();
+        }
+
+        // 播放控制
+        playBtn.addEventListener('click', async () => {
+            try {
+                console.log('点击播放按钮');
+
+                // 初始化音频上下文（必须在用户交互后创建）
+                if (!isAudioContextInitialized) {
+                    console.log('初始化音频上下文...');
+                    await initAudioContext();
+                }
+
+                // 确保音频上下文在运行状态
+                if (audioContext && audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 使用 Video.js 播放
+                if (player) {
+                    await player.play();
+                    console.log('Video.js 开始播放');
+                } else {
+                    console.error('Video.js 播放器未初始化');
+                }
+
+            } catch (err) {
+                console.error('播放失败:', err);
+                statusText.textContent = `播放失败：${err.message}`;
+                statusText.style.color = 'red';
+            }
+        });
+
+        pauseBtn.addEventListener('click', () => {
+            if (player) {
+                player.pause();
+                console.log('Video.js 暂停播放');
+            }
+        });
+
+        muteBtn.addEventListener('click', () => {
+            if (player) {
+                player.muted(!player.muted());
+                muteBtn.textContent = player.muted() ? '取消静音' : '静音';
+                console.log('Video.js 静音状态:', player.muted());
+            }
+        });
+
+        // 测试音频按钮
+        testAudioBtn.addEventListener('click', async () => {
+            console.log('=== 音频调试信息 ===');
+            console.log('Video.js 播放器状态:');
+            if (player) {
+                console.log('- 是否暂停:', player.paused());
+                console.log('- 是否静音:', player.muted());
+                console.log('- 音量:', player.volume());
+                console.log('- 当前时间:', player.currentTime());
+                console.log('- 总时长:', player.duration());
+                console.log('- 播放速度:', player.playbackRate());
+            } else {
+                console.log('- Video.js 播放器未初始化');
+            }
+
+            console.log('底层视频元素状态:');
+            if (video) {
+                console.log('- 是否暂停:', video.paused);
+                console.log('- 是否静音:', video.muted);
+                console.log('- 音量:', video.volume);
+                console.log('- 当前时间:', video.currentTime);
+                console.log('- 总时长:', video.duration);
+            } else {
+                console.log('- 底层视频元素未获取');
+            }
+
+            console.log('音频上下文状态:');
+            console.log('- 是否初始化:', isAudioContextInitialized);
+            console.log('- 状态:', audioContext ? audioContext.state : '未创建');
+            console.log('- 采样率:', audioContext ? audioContext.sampleRate : 'N/A');
+
+            console.log('音频节点状态:');
+            console.log('- MediaElementSource:', !!mediaElementSource);
+            console.log('- Analyser:', !!analyser);
+            console.log('- GainNode:', !!gainNode);
+
+            if (analyser) {
+                const testData = new Uint8Array(analyser.frequencyBinCount);
+                analyser.getByteFrequencyData(testData);
+                const hasData = testData.some(v => v > 0);
+                const maxVal = Math.max(...testData);
+                console.log('- 频谱数据:', hasData ? `有数据 (最大值: ${maxVal})` : '无数据');
+            }
+
+            // 尝试播放测试音频
+            if (player && !player.paused()) {
+                console.log('视频正在播放，检查音频输出...');
+                setTimeout(() => {
+                    if (analyser) {
+                        const data = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(data);
+                        console.log('延迟检查频谱数据:', data.slice(0, 10));
+                    }
+                }, 1000);
+            }
+        });
+
+        volumeInput.addEventListener('input', (e) => {
+            const volume = parseFloat(e.target.value);
+
+            // 同步到 Video.js
+            if (player) {
+                player.volume(volume);
+            }
+
+            // 如果有增益节点，也同步更新
+            if (gainNode) {
+                gainNode.gain.value = volume;
+            }
+
+            console.log('音量已更新:', volume);
+        });
+
+        // 播放速度控制
+        document.querySelectorAll('input[name="playbackRate"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const playbackRate = parseFloat(e.target.value);
+
+                    // 使用 Video.js 设置播放速度
+                    if (player) {
+                        player.playbackRate(playbackRate);
+                    }
+
+                    const rateText = playbackRate === 1 ? '正常速度' : `${playbackRate}x 速度`;
+                    console.log('播放速度已改变为:', rateText);
+
+                    // 如果视频正在播放，显示速度变化提示
+                    if (player && !player.paused()) {
+                        const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+                        const pitchText = currentPitchShift === '0' ? '原调' :
+                            (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+                        statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+                        statusText.style.color = '#4CAF50';
+                    }
+                }
+            });
+        });
+
+        // 音调变换控制
+        document.querySelectorAll('input[name="pitchShift"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const pitchShift = parseInt(e.target.value);
+                    applyPitchShift(pitchShift);
+                }
+            });
+        });
+
+        // 监听原生视频事件（通过 Video.js 已经处理，这里移除重复的事件监听）
+        // 所有事件现在通过 Video.js 的事件系统处理
+
+        // 进度条点击跳转
+        progressBar.addEventListener('click', handleProgressBarClick);
+
+        // 画布尺寸适配
+        window.addEventListener('resize', resizeCanvas);
+
+        // 初始化画布尺寸
+        resizeCanvas();
+
+        // 初始化 Video.js 播放器
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('DOM 加载完成，初始化 Video.js...');
+            initVideoSelect();
+            initVideoPlayer();
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html.v2 b/index.html.v2
new file mode 100644
index 0000000..0db6604
--- /dev/null
+++ b/index.html.v2
@@ -0,0 +1,603 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>自定义视频音频播放器</title>
+    <style>
+        .container {
+            max-width: 1000px;
+            margin: 20px auto;
+            padding: 0 20px;
+        }
+
+        .video-box {
+            width: 100%;
+            position: relative;
+        }
+
+        video {
+            width: 100%;
+            border-radius: 8px;
+        }
+
+        .controls {
+            margin: 15px 0;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        button {
+            padding: 8px 16px;
+            cursor: pointer;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #f5f5f5;
+        }
+
+        button:hover {
+            background: #eee;
+        }
+
+        input[type="text"] {
+            flex: 1;
+            max-width: 400px;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        input[type="range"] {
+            width: 150px;
+        }
+
+        #trackSelect {
+            padding: 6px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        #playbackRateSelect {
+            padding: 6px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            min-width: 100px;
+        }
+
+        #visualizer {
+            border: 1px solid #eee;
+            margin-top: 20px;
+            width: 100%;
+            height: 150px;
+            border-radius: 4px;
+        }
+
+        .status {
+            color: #666;
+            margin-top: 5px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <h2>自定义视频音频播放器</h2>
+
+        <div class="status" id="statusText">正在自动加载视频...</div>
+
+        <div class="video-box">
+            <video id="video" crossorigin="anonymous"></video>
+        </div>
+
+        <div class="controls">
+            <button id="playBtn" disabled>播放</button>
+            <button id="pauseBtn" disabled>暂停</button>
+            <button id="muteBtn">静音</button>
+            <button id="testAudioBtn">测试音频</button>
+            <span>音量：</span>
+            <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
+            <span>音轨：</span>
+            <select id="trackSelect" disabled></select>
+            <span>播放速度：</span>
+            <select id="playbackRateSelect">
+                <option value="0.5">0.5x</option>
+                <option value="0.75">0.75x</option>
+                <option value="1" selected>1x (正常)</option>
+                <option value="1.25">1.25x</option>
+                <option value="1.5">1.5x</option>
+                <option value="2">2x</option>
+            </select>
+        </div>
+
+        <h3>音频频谱可视化</h3>
+        <canvas id="visualizer"></canvas>
+    </div>
+
+    <script>
+        const video = document.getElementById('video');
+        const playBtn = document.getElementById('playBtn');
+        const pauseBtn = document.getElementById('pauseBtn');
+        const muteBtn = document.getElementById('muteBtn');
+        const testAudioBtn = document.getElementById('testAudioBtn');
+        const volumeInput = document.getElementById('volume');
+        const trackSelect = document.getElementById('trackSelect');
+        const playbackRateSelect = document.getElementById('playbackRateSelect');
+        const statusText = document.getElementById('statusText');
+        const canvas = document.getElementById('visualizer');
+        const ctx = canvas.getContext('2d');
+
+        // 固定视频地址 - 使用支持CORS的视频源
+        const VIDEO_URL = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
+
+        let audioContext;
+        let analyser;
+        let mediaElementSource;
+        let animationId;
+        let gainNode;
+        let isAudioContextInitialized = false;
+
+        // 设置画布尺寸
+        function resizeCanvas() {
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+        }
+
+        // 初始化音频上下文（需用户交互触发）
+        async function initAudioContext() {
+            try {
+                if (isAudioContextInitialized) {
+                    console.log('音频上下文已经初始化，跳过');
+                    return;
+                }
+
+                console.log('开始初始化音频上下文...');
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+                // 如果音频上下文被暂停，恢复它
+                if (audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 创建媒体元素源
+                mediaElementSource = audioContext.createMediaElementSource(video);
+                console.log('媒体元素源已创建');
+
+                // 创建分析器节点
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 1024;  // 增加分辨率
+                analyser.smoothingTimeConstant = 0.8;
+                console.log('分析器节点已创建，fftSize:', analyser.fftSize);
+
+                // 创建增益节点（用于音量控制）
+                gainNode = audioContext.createGain();
+                gainNode.gain.value = 1.0;
+                console.log('增益节点已创建');
+
+                // 连接音频节点链：视频 -> 分析器 -> 增益 -> 输出
+                mediaElementSource.connect(analyser);
+                analyser.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                console.log('音频节点链已连接');
+
+                isAudioContextInitialized = true;
+                console.log('音频上下文初始化成功！');
+
+                // 立即开始可视化
+                startVisualization();
+
+                // 测试音频数据
+                setTimeout(() => {
+                    if (analyser) {
+                        const testArray = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(testArray);
+                        const hasData = testArray.some(value => value > 0);
+                        console.log('测试音频数据 - 有数据:', hasData);
+                        if (hasData) {
+                            console.log('前10个频谱值:', Array.from(testArray.slice(0, 10)));
+                        }
+                    }
+                }, 2000);
+
+            } catch (error) {
+                console.error('音频上下文初始化失败:', error);
+                // 如果音频上下文初始化失败，至少确保视频能播放
+                isAudioContextInitialized = false;
+            }
+        }
+
+        // 启动可视化
+        function startVisualization() {
+            if (!analyser) {
+                console.warn('分析器节点不存在，启动模拟可视化');
+                startMockVisualization();
+                return;
+            }
+
+            // 如果已经在运行动画，先停止
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            console.log('可视化已启动，缓冲区长度:', bufferLength);
+
+            function draw() {
+                if (!analyser) {
+                    console.warn('分析器节点丢失，停止绘制');
+                    return;
+                }
+
+                // 获取频谱数据
+                analyser.getByteFrequencyData(dataArray);
+
+                // 检查是否有音频数据
+                let hasAudioData = false;
+                let maxValue = 0;
+                for (let i = 0; i < dataArray.length; i++) {
+                    if (dataArray[i] > 0) {
+                        hasAudioData = true;
+                        maxValue = Math.max(maxValue, dataArray[i]);
+                    }
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                if (hasAudioData) {
+                    console.log('检测到音频数据，最大值:', maxValue);
+                    // 绘制频谱柱状图
+                    const barWidth = (canvas.width / bufferLength) * 2.5;
+                    let x = 0;
+
+                    for (let i = 0; i < bufferLength; i++) {
+                        const barHeight = (dataArray[i] / 255) * canvas.height;
+
+                        // 创建渐变色
+                        const hue = (i / bufferLength) * 360;
+                        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                        ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
+                        x += barWidth;
+                    }
+                } else {
+                    // 显示"无音频数据"提示
+                    ctx.fillStyle = '#999';
+                    ctx.font = '16px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('等待音频数据...', canvas.width / 2, canvas.height / 2);
+
+                    // 如果视频正在播放但没有音频数据，可能有问题
+                    if (!video.paused) {
+                        console.log('视频正在播放但没有音频数据');
+                    }
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 模拟可视化（当Web Audio API不可用时）
+        function startMockVisualization() {
+            console.log('启动模拟可视化');
+
+            function draw() {
+                if (video.paused) {
+                    return;
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                // 生成模拟频谱数据
+                const barCount = 50;
+                const barWidth = canvas.width / barCount;
+
+                for (let i = 0; i < barCount; i++) {
+                    // 根据时间生成动态数据
+                    const time = Date.now() * 0.001;
+                    const frequency = i * 0.2;
+                    const amplitude = Math.sin(time + frequency) * 0.5 + 0.5;
+                    const barHeight = amplitude * canvas.height * 0.8;
+
+                    // 创建渐变色
+                    const hue = (i / barCount) * 360;
+                    ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                    ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth - 1, barHeight);
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 停止可视化
+        function stopVisualization() {
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+                animationId = null;
+            }
+        }
+
+        // 自动加载视频
+        async function loadVideo() {
+            statusText.textContent = '加载中...';
+            statusText.style.color = '#666';
+            playBtn.disabled = true;
+            pauseBtn.disabled = true;
+            trackSelect.disabled = true;
+            trackSelect.innerHTML = '';
+
+            try {
+                // 使用固定的视频地址，添加CORS支持
+                video.crossOrigin = 'anonymous';
+                video.src = VIDEO_URL;
+
+                console.log('开始加载视频:', VIDEO_URL);
+
+                await new Promise((resolve, reject) => {
+                    video.onloadedmetadata = () => {
+                        console.log('视频元数据加载完成');
+                        console.log('视频时长:', video.duration);
+                        console.log('视频尺寸:', video.videoWidth, 'x', video.videoHeight);
+                        resolve();
+                    };
+                    video.onerror = (e) => {
+                        console.error('视频加载错误:', e);
+                        reject(e);
+                    };
+                    // 添加超时处理
+                    setTimeout(() => reject(new Error('加载超时')), 15000);
+                });
+
+                statusText.textContent = '加载完成，可以开始播放';
+                statusText.style.color = 'green';
+                playBtn.disabled = false;
+                trackSelect.disabled = false;
+            } catch (err) {
+                statusText.textContent = `加载失败：${err.message || '视频地址无效或网络错误'}`;
+                statusText.style.color = 'red';
+                console.error('视频加载错误:', err);
+            }
+        }
+
+        // 视频元数据加载完成后初始化音轨
+        video.addEventListener('loadedmetadata', () => {
+            console.log('视频元数据已加载');
+
+            // 检查并显示可用的音频轨道信息
+            const audioTracks = video.audioTracks;
+            const textTracks = video.textTracks;
+
+            console.log('AudioTracks数量:', audioTracks ? audioTracks.length : 0);
+            console.log('TextTracks数量:', textTracks ? textTracks.length : 0);
+
+            trackSelect.innerHTML = '';
+
+            // 尝试使用audioTracks
+            if (audioTracks && audioTracks.length > 0) {
+                console.log('使用AudioTracks');
+                for (let i = 0; i < audioTracks.length; i++) {
+                    const track = audioTracks[i];
+                    const option = document.createElement('option');
+                    option.value = i;
+                    option.text = track.label || track.language || `音轨 ${i + 1}`;
+                    option.selected = track.enabled;
+                    trackSelect.appendChild(option);
+                    console.log(`音轨 ${i}:`, track.label, track.language, track.enabled);
+                }
+
+                // 音轨切换事件
+                trackSelect.addEventListener('change', (e) => {
+                    const selectedIndex = parseInt(e.target.value);
+                    console.log('切换到音轨:', selectedIndex);
+
+                    // 禁用所有音轨
+                    for (let i = 0; i < audioTracks.length; i++) {
+                        audioTracks[i].enabled = false;
+                    }
+                    // 启用选中的音轨
+                    if (audioTracks[selectedIndex]) {
+                        audioTracks[selectedIndex].enabled = true;
+                        console.log('已启用音轨:', selectedIndex);
+                    }
+                });
+            }
+            // 如果没有多个音轨，显示默认选项
+            else {
+                const option = document.createElement('option');
+                option.value = 0;
+                option.text = '默认音轨';
+                trackSelect.appendChild(option);
+                console.log('只有一个默认音轨');
+            }
+        });
+
+        // 播放控制
+        playBtn.addEventListener('click', async () => {
+            try {
+                console.log('点击播放按钮');
+
+                // 初始化音频上下文（必须在用户交互后创建）
+                if (!isAudioContextInitialized) {
+                    console.log('初始化音频上下文...');
+                    await initAudioContext();
+                }
+
+                // 确保音频上下文在运行状态
+                if (audioContext && audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 播放视频
+                await video.play();
+                console.log('视频开始播放');
+
+                statusText.textContent = '正在播放，音频频谱可视化已启动';
+                statusText.style.color = 'green';
+
+            } catch (err) {
+                console.error('播放失败:', err);
+                statusText.textContent = `播放失败：${err.message}`;
+                statusText.style.color = 'red';
+            }
+        });
+
+        pauseBtn.addEventListener('click', () => {
+            video.pause();
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+        });
+
+        muteBtn.addEventListener('click', () => {
+            video.muted = !video.muted;
+            muteBtn.textContent = video.muted ? '取消静音' : '静音';
+        });
+
+        // 测试音频按钮
+        testAudioBtn.addEventListener('click', async () => {
+            console.log('=== 音频调试信息 ===');
+            console.log('视频元素状态:');
+            console.log('- 是否暂停:', video.paused);
+            console.log('- 是否静音:', video.muted);
+            console.log('- 音量:', video.volume);
+            console.log('- 当前时间:', video.currentTime);
+            console.log('- 总时长:', video.duration);
+
+            console.log('音频上下文状态:');
+            console.log('- 是否初始化:', isAudioContextInitialized);
+            console.log('- 状态:', audioContext ? audioContext.state : '未创建');
+            console.log('- 采样率:', audioContext ? audioContext.sampleRate : 'N/A');
+
+            console.log('音频节点状态:');
+            console.log('- MediaElementSource:', !!mediaElementSource);
+            console.log('- Analyser:', !!analyser);
+            console.log('- GainNode:', !!gainNode);
+
+            if (analyser) {
+                const testData = new Uint8Array(analyser.frequencyBinCount);
+                analyser.getByteFrequencyData(testData);
+                const hasData = testData.some(v => v > 0);
+                const maxVal = Math.max(...testData);
+                console.log('- 频谱数据:', hasData ? `有数据 (最大值: ${maxVal})` : '无数据');
+            }
+
+            // 尝试播放测试音频
+            if (!video.paused) {
+                console.log('视频正在播放，检查音频输出...');
+                setTimeout(() => {
+                    if (analyser) {
+                        const data = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(data);
+                        console.log('延迟检查频谱数据:', data.slice(0, 10));
+                    }
+                }, 1000);
+            }
+        });
+
+        volumeInput.addEventListener('input', (e) => {
+            const volume = parseFloat(e.target.value);
+            video.volume = volume;
+
+            // 如果有增益节点，也同步更新
+            if (gainNode) {
+                gainNode.gain.value = volume;
+                console.log('音量已更新:', volume);
+            }
+        });
+
+        // 播放速度控制
+        playbackRateSelect.addEventListener('change', (e) => {
+            const playbackRate = parseFloat(e.target.value);
+            video.playbackRate = playbackRate;
+
+            const rateText = playbackRate === 1 ? '正常速度' : `${playbackRate}x 速度`;
+            console.log('播放速度已改变为:', rateText);
+
+            // 如果视频正在播放，显示速度变化提示
+            if (!video.paused) {
+                statusText.textContent = `正在播放 (${rateText})`;
+                statusText.style.color = '#4CAF50';
+            }
+        });
+
+        // 监听视频播放状态变化
+        video.addEventListener('play', async () => {
+            console.log('视频播放事件触发');
+
+            // 更新状态显示，包含当前播放速度
+            const currentRate = video.playbackRate;
+            const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+            statusText.textContent = `正在播放 (${rateText})`;
+            statusText.style.color = '#4CAF50';
+
+            // 检查音频状态
+            console.log('视频音量:', video.volume, '静音状态:', video.muted);
+            console.log('音频上下文状态:', audioContext ? audioContext.state : '未初始化');
+
+            if (audioContext && audioContext.state === 'suspended') {
+                await audioContext.resume();
+                console.log('音频上下文在播放时恢复');
+            }
+
+            if (isAudioContextInitialized && analyser) {
+                console.log('重新启动可视化');
+                startVisualization();
+            }
+        });
+
+        video.addEventListener('pause', () => {
+            console.log('视频暂停');
+            stopVisualization();
+        });
+
+        video.addEventListener('ended', () => {
+            console.log('视频播放结束');
+            stopVisualization();
+            statusText.textContent = '播放结束';
+            statusText.style.color = '#666';
+        });
+
+        // 添加音频相关的事件监听
+        video.addEventListener('volumechange', () => {
+            console.log('音量变化:', video.volume, '静音:', video.muted);
+        });
+
+        video.addEventListener('loadstart', () => {
+            console.log('开始加载视频');
+        });
+
+        video.addEventListener('canplay', () => {
+            console.log('视频可以播放');
+            console.log('视频时长:', video.duration);
+            console.log('视频是否有音频:', !video.muted && video.volume > 0);
+        });
+
+        // 画布尺寸适配
+        window.addEventListener('resize', resizeCanvas);
+
+        // 初始化画布尺寸
+        resizeCanvas();
+
+
+        // 如果DOM已经加载完成，立即加载视频
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', loadVideo);
+        } else {
+            loadVideo();
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html.v3 b/index.html.v3
new file mode 100644
index 0000000..0d61b3e
--- /dev/null
+++ b/index.html.v3
@@ -0,0 +1,705 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>自定义视频音频播放器</title>
+    <style>
+        .container {
+            max-width: 1000px;
+            margin: 20px auto;
+            padding: 0 20px;
+        }
+
+        .video-box {
+            width: 100%;
+            position: relative;
+        }
+
+        video {
+            width: 100%;
+            border-radius: 8px;
+        }
+
+        .controls {
+            margin: 15px 0;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        button {
+            padding: 8px 16px;
+            cursor: pointer;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #f5f5f5;
+        }
+
+        button:hover {
+            background: #eee;
+        }
+
+        input[type="text"] {
+            flex: 1;
+            max-width: 400px;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        input[type="range"] {
+            width: 150px;
+        }
+
+        #trackSelect {
+            padding: 6px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        #playbackRateSelect {
+            padding: 6px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            min-width: 100px;
+        }
+
+        #pitchShiftSelect {
+            padding: 6px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            min-width: 120px;
+        }
+
+        #visualizer {
+            border: 1px solid #eee;
+            margin-top: 20px;
+            width: 100%;
+            height: 150px;
+            border-radius: 4px;
+        }
+
+        .status {
+            color: #666;
+            margin-top: 5px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <h2>自定义视频音频播放器</h2>
+
+        <div class="status" id="statusText">正在自动加载视频...</div>
+
+        <div class="video-box">
+            <video id="video" crossorigin="anonymous"></video>
+        </div>
+
+        <div class="controls">
+            <button id="playBtn" disabled>播放</button>
+            <button id="pauseBtn" disabled>暂停</button>
+            <button id="muteBtn">静音</button>
+            <button id="testAudioBtn">测试音频</button>
+            <span>音量：</span>
+            <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
+            <span>音轨：</span>
+            <select id="trackSelect" disabled></select>
+            <span>播放速度：</span>
+            <select id="playbackRateSelect">
+                <option value="0.5">0.5x</option>
+                <option value="0.75">0.75x</option>
+                <option value="1" selected>1x (正常)</option>
+                <option value="1.25">1.25x</option>
+                <option value="1.5">1.5x</option>
+                <option value="2">2x</option>
+            </select>
+            <span>音调：</span>
+            <select id="pitchShiftSelect">
+                <option value="-12">降一个八度</option>
+                <option value="-7">降五度</option>
+                <option value="-5">降四度</option>
+                <option value="-3">降小三度</option>
+                <option value="-2">降大二度 (C→B♭)</option>
+                <option value="-1">降小二度 (C→B)</option>
+                <option value="0" selected>原调</option>
+                <option value="1">升小二度 (C→C#)</option>
+                <option value="2">升大二度 (C→D)</option>
+                <option value="3">升小三度 (C→D#)</option>
+                <option value="4">升大三度 (C→E)</option>
+                <option value="5">升四度</option>
+                <option value="7">升五度</option>
+                <option value="12">升一个八度</option>
+            </select>
+        </div>
+
+        <h3>音频频谱可视化</h3>
+        <canvas id="visualizer"></canvas>
+    </div>
+
+    <script>
+        const video = document.getElementById('video');
+        const playBtn = document.getElementById('playBtn');
+        const pauseBtn = document.getElementById('pauseBtn');
+        const muteBtn = document.getElementById('muteBtn');
+        const testAudioBtn = document.getElementById('testAudioBtn');
+        const volumeInput = document.getElementById('volume');
+        const trackSelect = document.getElementById('trackSelect');
+        const playbackRateSelect = document.getElementById('playbackRateSelect');
+        const pitchShiftSelect = document.getElementById('pitchShiftSelect');
+        const statusText = document.getElementById('statusText');
+        const canvas = document.getElementById('visualizer');
+        const ctx = canvas.getContext('2d');
+
+        // 固定视频地址 - 使用支持CORS的视频源
+        const VIDEO_URL = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
+
+        let audioContext;
+        let analyser;
+        let mediaElementSource;
+        let animationId;
+        let gainNode;
+        let pitchShifterNode;
+        let currentPitchShift = 0;
+        let isAudioContextInitialized = false;
+
+        // 设置画布尺寸
+        function resizeCanvas() {
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+        }
+
+        // 创建音调变换处理器
+        function createPitchShifter(audioContext) {
+            const scriptProcessor = audioContext.createScriptProcessor(4096, 1, 1);
+            let phase = 0;
+            let lastInputSample = 0;
+
+            scriptProcessor.onaudioprocess = function (event) {
+                const inputBuffer = event.inputBuffer;
+                const outputBuffer = event.outputBuffer;
+                const inputData = inputBuffer.getChannelData(0);
+                const outputData = outputBuffer.getChannelData(0);
+
+                const pitchRatio = Math.pow(2, currentPitchShift / 12);
+
+                for (let i = 0; i < inputData.length; i++) {
+                    if (currentPitchShift === 0) {
+                        // 无音调变换，直接复制
+                        outputData[i] = inputData[i];
+                    } else {
+                        // 简单的音调变换实现
+                        // 这是一个基础实现，真实环境中可能需要更复杂的算法
+                        const sampleIndex = i * pitchRatio;
+                        const baseIndex = Math.floor(sampleIndex);
+                        const fraction = sampleIndex - baseIndex;
+
+                        if (baseIndex < inputData.length - 1) {
+                            // 线性插值
+                            outputData[i] = inputData[baseIndex] * (1 - fraction) +
+                                inputData[baseIndex + 1] * fraction;
+                        } else {
+                            outputData[i] = lastInputSample;
+                        }
+                    }
+                }
+
+                if (inputData.length > 0) {
+                    lastInputSample = inputData[inputData.length - 1];
+                }
+            };
+
+            return scriptProcessor;
+        }
+
+        // 应用音调变换
+        function applyPitchShift(semitones) {
+            currentPitchShift = semitones;
+            console.log('音调变换设置为:', semitones, '半音');
+
+            // 更新状态显示
+            if (!video.paused) {
+                const pitchText = semitones === 0 ? '原调' :
+                    (semitones > 0 ? `升${semitones}半音` : `降${Math.abs(semitones)}半音`);
+                const currentRate = video.playbackRate;
+                const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+                statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            }
+        }
+
+        // 初始化音频上下文（需用户交互触发）
+        async function initAudioContext() {
+            try {
+                if (isAudioContextInitialized) {
+                    console.log('音频上下文已经初始化，跳过');
+                    return;
+                }
+
+                console.log('开始初始化音频上下文...');
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+                // 如果音频上下文被暂停，恢复它
+                if (audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 创建媒体元素源
+                mediaElementSource = audioContext.createMediaElementSource(video);
+                console.log('媒体元素源已创建');
+
+                // 创建分析器节点
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 1024;  // 增加分辨率
+                analyser.smoothingTimeConstant = 0.8;
+                console.log('分析器节点已创建，fftSize:', analyser.fftSize);
+
+                // 创建增益节点（用于音量控制）
+                gainNode = audioContext.createGain();
+                gainNode.gain.value = 1.0;
+                console.log('增益节点已创建');
+
+                // 创建音调变换节点
+                pitchShifterNode = createPitchShifter(audioContext);
+                console.log('音调变换节点已创建');
+
+                // 连接音频节点链：视频 -> 音调变换 -> 分析器 -> 增益 -> 输出
+                mediaElementSource.connect(pitchShifterNode);
+                pitchShifterNode.connect(analyser);
+                analyser.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                console.log('音频节点链已连接（包含音调变换）');
+
+                isAudioContextInitialized = true;
+                console.log('音频上下文初始化成功！');
+
+                // 立即开始可视化
+                startVisualization();
+
+                // 测试音频数据
+                setTimeout(() => {
+                    if (analyser) {
+                        const testArray = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(testArray);
+                        const hasData = testArray.some(value => value > 0);
+                        console.log('测试音频数据 - 有数据:', hasData);
+                        if (hasData) {
+                            console.log('前10个频谱值:', Array.from(testArray.slice(0, 10)));
+                        }
+                    }
+                }, 2000);
+
+            } catch (error) {
+                console.error('音频上下文初始化失败:', error);
+                // 如果音频上下文初始化失败，至少确保视频能播放
+                isAudioContextInitialized = false;
+            }
+        }
+
+        // 启动可视化
+        function startVisualization() {
+            if (!analyser) {
+                console.warn('分析器节点不存在，启动模拟可视化');
+                startMockVisualization();
+                return;
+            }
+
+            // 如果已经在运行动画，先停止
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            console.log('可视化已启动，缓冲区长度:', bufferLength);
+
+            function draw() {
+                if (!analyser) {
+                    console.warn('分析器节点丢失，停止绘制');
+                    return;
+                }
+
+                // 获取频谱数据
+                analyser.getByteFrequencyData(dataArray);
+
+                // 检查是否有音频数据
+                let hasAudioData = false;
+                let maxValue = 0;
+                for (let i = 0; i < dataArray.length; i++) {
+                    if (dataArray[i] > 0) {
+                        hasAudioData = true;
+                        maxValue = Math.max(maxValue, dataArray[i]);
+                    }
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                if (hasAudioData) {
+                    console.log('检测到音频数据，最大值:', maxValue);
+                    // 绘制频谱柱状图
+                    const barWidth = (canvas.width / bufferLength) * 2.5;
+                    let x = 0;
+
+                    for (let i = 0; i < bufferLength; i++) {
+                        const barHeight = (dataArray[i] / 255) * canvas.height;
+
+                        // 创建渐变色
+                        const hue = (i / bufferLength) * 360;
+                        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                        ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
+                        x += barWidth;
+                    }
+                } else {
+                    // 显示"无音频数据"提示
+                    ctx.fillStyle = '#999';
+                    ctx.font = '16px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('等待音频数据...', canvas.width / 2, canvas.height / 2);
+
+                    // 如果视频正在播放但没有音频数据，可能有问题
+                    if (!video.paused) {
+                        console.log('视频正在播放但没有音频数据');
+                    }
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 模拟可视化（当Web Audio API不可用时）
+        function startMockVisualization() {
+            console.log('启动模拟可视化');
+
+            function draw() {
+                if (video.paused) {
+                    return;
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                // 生成模拟频谱数据
+                const barCount = 50;
+                const barWidth = canvas.width / barCount;
+
+                for (let i = 0; i < barCount; i++) {
+                    // 根据时间生成动态数据
+                    const time = Date.now() * 0.001;
+                    const frequency = i * 0.2;
+                    const amplitude = Math.sin(time + frequency) * 0.5 + 0.5;
+                    const barHeight = amplitude * canvas.height * 0.8;
+
+                    // 创建渐变色
+                    const hue = (i / barCount) * 360;
+                    ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                    ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth - 1, barHeight);
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 停止可视化
+        function stopVisualization() {
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+                animationId = null;
+            }
+        }
+
+        // 自动加载视频
+        async function loadVideo() {
+            statusText.textContent = '加载中...';
+            statusText.style.color = '#666';
+            playBtn.disabled = true;
+            pauseBtn.disabled = true;
+            trackSelect.disabled = true;
+            trackSelect.innerHTML = '';
+
+            try {
+                // 使用固定的视频地址，添加CORS支持
+                video.crossOrigin = 'anonymous';
+                video.src = VIDEO_URL;
+
+                console.log('开始加载视频:', VIDEO_URL);
+
+                await new Promise((resolve, reject) => {
+                    video.onloadedmetadata = () => {
+                        console.log('视频元数据加载完成');
+                        console.log('视频时长:', video.duration);
+                        console.log('视频尺寸:', video.videoWidth, 'x', video.videoHeight);
+                        resolve();
+                    };
+                    video.onerror = (e) => {
+                        console.error('视频加载错误:', e);
+                        reject(e);
+                    };
+                    // 添加超时处理
+                    setTimeout(() => reject(new Error('加载超时')), 15000);
+                });
+
+                statusText.textContent = '加载完成，可以开始播放';
+                statusText.style.color = 'green';
+                playBtn.disabled = false;
+                trackSelect.disabled = false;
+            } catch (err) {
+                statusText.textContent = `加载失败：${err.message || '视频地址无效或网络错误'}`;
+                statusText.style.color = 'red';
+                console.error('视频加载错误:', err);
+            }
+        }
+
+        // 视频元数据加载完成后初始化音轨
+        video.addEventListener('loadedmetadata', () => {
+            console.log('视频元数据已加载');
+
+            // 检查并显示可用的音频轨道信息
+            const audioTracks = video.audioTracks;
+            const textTracks = video.textTracks;
+
+            console.log('AudioTracks数量:', audioTracks ? audioTracks.length : 0);
+            console.log('TextTracks数量:', textTracks ? textTracks.length : 0);
+
+            trackSelect.innerHTML = '';
+
+            // 尝试使用audioTracks
+            if (audioTracks && audioTracks.length > 0) {
+                console.log('使用AudioTracks');
+                for (let i = 0; i < audioTracks.length; i++) {
+                    const track = audioTracks[i];
+                    const option = document.createElement('option');
+                    option.value = i;
+                    option.text = track.label || track.language || `音轨 ${i + 1}`;
+                    option.selected = track.enabled;
+                    trackSelect.appendChild(option);
+                    console.log(`音轨 ${i}:`, track.label, track.language, track.enabled);
+                }
+
+                // 音轨切换事件
+                trackSelect.addEventListener('change', (e) => {
+                    const selectedIndex = parseInt(e.target.value);
+                    console.log('切换到音轨:', selectedIndex);
+
+                    // 禁用所有音轨
+                    for (let i = 0; i < audioTracks.length; i++) {
+                        audioTracks[i].enabled = false;
+                    }
+                    // 启用选中的音轨
+                    if (audioTracks[selectedIndex]) {
+                        audioTracks[selectedIndex].enabled = true;
+                        console.log('已启用音轨:', selectedIndex);
+                    }
+                });
+            }
+            // 如果没有多个音轨，显示默认选项
+            else {
+                const option = document.createElement('option');
+                option.value = 0;
+                option.text = '默认音轨';
+                trackSelect.appendChild(option);
+                console.log('只有一个默认音轨');
+            }
+        });
+
+        // 播放控制
+        playBtn.addEventListener('click', async () => {
+            try {
+                console.log('点击播放按钮');
+
+                // 初始化音频上下文（必须在用户交互后创建）
+                if (!isAudioContextInitialized) {
+                    console.log('初始化音频上下文...');
+                    await initAudioContext();
+                }
+
+                // 确保音频上下文在运行状态
+                if (audioContext && audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 播放视频
+                await video.play();
+                console.log('视频开始播放');
+
+                statusText.textContent = '正在播放，音频频谱可视化已启动';
+                statusText.style.color = 'green';
+
+            } catch (err) {
+                console.error('播放失败:', err);
+                statusText.textContent = `播放失败：${err.message}`;
+                statusText.style.color = 'red';
+            }
+        });
+
+        pauseBtn.addEventListener('click', () => {
+            video.pause();
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+        });
+
+        muteBtn.addEventListener('click', () => {
+            video.muted = !video.muted;
+            muteBtn.textContent = video.muted ? '取消静音' : '静音';
+        });
+
+        // 测试音频按钮
+        testAudioBtn.addEventListener('click', async () => {
+            console.log('=== 音频调试信息 ===');
+            console.log('视频元素状态:');
+            console.log('- 是否暂停:', video.paused);
+            console.log('- 是否静音:', video.muted);
+            console.log('- 音量:', video.volume);
+            console.log('- 当前时间:', video.currentTime);
+            console.log('- 总时长:', video.duration);
+
+            console.log('音频上下文状态:');
+            console.log('- 是否初始化:', isAudioContextInitialized);
+            console.log('- 状态:', audioContext ? audioContext.state : '未创建');
+            console.log('- 采样率:', audioContext ? audioContext.sampleRate : 'N/A');
+
+            console.log('音频节点状态:');
+            console.log('- MediaElementSource:', !!mediaElementSource);
+            console.log('- Analyser:', !!analyser);
+            console.log('- GainNode:', !!gainNode);
+
+            if (analyser) {
+                const testData = new Uint8Array(analyser.frequencyBinCount);
+                analyser.getByteFrequencyData(testData);
+                const hasData = testData.some(v => v > 0);
+                const maxVal = Math.max(...testData);
+                console.log('- 频谱数据:', hasData ? `有数据 (最大值: ${maxVal})` : '无数据');
+            }
+
+            // 尝试播放测试音频
+            if (!video.paused) {
+                console.log('视频正在播放，检查音频输出...');
+                setTimeout(() => {
+                    if (analyser) {
+                        const data = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(data);
+                        console.log('延迟检查频谱数据:', data.slice(0, 10));
+                    }
+                }, 1000);
+            }
+        });
+
+        volumeInput.addEventListener('input', (e) => {
+            const volume = parseFloat(e.target.value);
+            video.volume = volume;
+
+            // 如果有增益节点，也同步更新
+            if (gainNode) {
+                gainNode.gain.value = volume;
+                console.log('音量已更新:', volume);
+            }
+        });
+
+        // 播放速度控制
+        playbackRateSelect.addEventListener('change', (e) => {
+            const playbackRate = parseFloat(e.target.value);
+            video.playbackRate = playbackRate;
+
+            const rateText = playbackRate === 1 ? '正常速度' : `${playbackRate}x 速度`;
+            console.log('播放速度已改变为:', rateText);
+
+            // 如果视频正在播放，显示速度变化提示
+            if (!video.paused) {
+                const currentPitchShift = parseInt(pitchShiftSelect.value);
+                const pitchText = currentPitchShift === 0 ? '原调' :
+                    (currentPitchShift > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(currentPitchShift)}半音`);
+                statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+                statusText.style.color = '#4CAF50';
+            }
+        });
+
+        // 音调变换控制
+        pitchShiftSelect.addEventListener('change', (e) => {
+            const pitchShift = parseInt(e.target.value);
+            applyPitchShift(pitchShift);
+        });
+
+        // 监听视频播放状态变化
+        video.addEventListener('play', async () => {
+            console.log('视频播放事件触发');
+
+            // 更新状态显示，包含当前播放速度和音调
+            const currentRate = video.playbackRate;
+            const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+            const currentPitchShift = parseInt(pitchShiftSelect.value);
+            const pitchText = currentPitchShift === 0 ? '原调' :
+                (currentPitchShift > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(currentPitchShift)}半音`);
+            statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            statusText.style.color = '#4CAF50';
+
+            // 检查音频状态
+            console.log('视频音量:', video.volume, '静音状态:', video.muted);
+            console.log('音频上下文状态:', audioContext ? audioContext.state : '未初始化');
+
+            if (audioContext && audioContext.state === 'suspended') {
+                await audioContext.resume();
+                console.log('音频上下文在播放时恢复');
+            }
+
+            if (isAudioContextInitialized && analyser) {
+                console.log('重新启动可视化');
+                startVisualization();
+            }
+        });
+
+        video.addEventListener('pause', () => {
+            console.log('视频暂停');
+            stopVisualization();
+        });
+
+        video.addEventListener('ended', () => {
+            console.log('视频播放结束');
+            stopVisualization();
+            statusText.textContent = '播放结束';
+            statusText.style.color = '#666';
+        });
+
+        // 添加音频相关的事件监听
+        video.addEventListener('volumechange', () => {
+            console.log('音量变化:', video.volume, '静音:', video.muted);
+        });
+
+        video.addEventListener('loadstart', () => {
+            console.log('开始加载视频');
+        });
+
+        video.addEventListener('canplay', () => {
+            console.log('视频可以播放');
+            console.log('视频时长:', video.duration);
+            console.log('视频是否有音频:', !video.muted && video.volume > 0);
+        });
+
+        // 画布尺寸适配
+        window.addEventListener('resize', resizeCanvas);
+
+        // 初始化画布尺寸
+        resizeCanvas();
+
+
+        // 如果DOM已经加载完成，立即加载视频
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', loadVideo);
+        } else {
+            loadVideo();
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html.v4 b/index.html.v4
new file mode 100644
index 0000000..b7ab338
--- /dev/null
+++ b/index.html.v4
@@ -0,0 +1,824 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>自定义视频音频播放器</title>
+    <style>
+        .container {
+            max-width: 1000px;
+            margin: 20px auto;
+            padding: 0 20px;
+        }
+
+        .video-box {
+            width: 100%;
+            position: relative;
+        }
+
+        video {
+            width: 100%;
+            border-radius: 8px;
+        }
+
+        .controls {
+            margin: 15px 0;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .control-group {
+            margin: 10px 0;
+            padding: 10px;
+            border: 1px solid #eee;
+            border-radius: 6px;
+            background: #fafafa;
+        }
+
+        .control-group h4 {
+            margin: 0 0 8px 0;
+            font-size: 14px;
+            color: #333;
+        }
+
+        .radio-group {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .radio-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        .radio-item input[type="radio"] {
+            margin: 0;
+        }
+
+        .radio-item label {
+            font-size: 13px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        button {
+            padding: 8px 16px;
+            cursor: pointer;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #f5f5f5;
+        }
+
+        button:hover {
+            background: #eee;
+        }
+
+        input[type="text"] {
+            flex: 1;
+            max-width: 400px;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        input[type="range"] {
+            width: 150px;
+        }
+
+        #visualizer {
+            border: 1px solid #eee;
+            margin-top: 20px;
+            width: 100%;
+            height: 150px;
+            border-radius: 4px;
+        }
+
+        .status {
+            color: #666;
+            margin-top: 5px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <h2>自定义视频音频播放器</h2>
+
+        <div class="status" id="statusText">正在自动加载视频...</div>
+
+        <div class="video-box">
+            <video id="video" crossorigin="anonymous"></video>
+        </div>
+
+        <div class="controls">
+            <button id="playBtn" disabled>播放</button>
+            <button id="pauseBtn" disabled>暂停</button>
+            <button id="muteBtn">静音</button>
+            <button id="testAudioBtn">测试音频</button>
+            <span>音量：</span>
+            <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
+        </div>
+
+        <div class="control-group">
+            <h4>音轨选择</h4>
+            <div class="radio-group" id="trackRadioGroup">
+                <div class="radio-item">
+                    <input type="radio" id="track0" name="audioTrack" value="0" checked>
+                    <label for="track0">默认音轨</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>播放速度</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="rate05" name="playbackRate" value="0.5">
+                    <label for="rate05">0.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate075" name="playbackRate" value="0.75">
+                    <label for="rate075">0.75x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate1" name="playbackRate" value="1" checked>
+                    <label for="rate1">1x (正常)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate125" name="playbackRate" value="1.25">
+                    <label for="rate125">1.25x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate15" name="playbackRate" value="1.5">
+                    <label for="rate15">1.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate2" name="playbackRate" value="2">
+                    <label for="rate2">2x</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>音调变换</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="pitch-12" name="pitchShift" value="-12">
+                    <label for="pitch-12">降一个八度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-7" name="pitchShift" value="-7">
+                    <label for="pitch-7">降五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-5" name="pitchShift" value="-5">
+                    <label for="pitch-5">降四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-3" name="pitchShift" value="-3">
+                    <label for="pitch-3">降小三度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-2" name="pitchShift" value="-2">
+                    <label for="pitch-2">降大二度 (C→B♭)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-1" name="pitchShift" value="-1">
+                    <label for="pitch-1">降小二度 (C→B)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch0" name="pitchShift" value="0" checked>
+                    <label for="pitch0">原调</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch1" name="pitchShift" value="1">
+                    <label for="pitch1">升小二度 (C→C#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch2" name="pitchShift" value="2">
+                    <label for="pitch2">升大二度 (C→D)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch3" name="pitchShift" value="3">
+                    <label for="pitch3">升小三度 (C→D#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch4" name="pitchShift" value="4">
+                    <label for="pitch4">升大三度 (C→E)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch5" name="pitchShift" value="5">
+                    <label for="pitch5">升四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch7" name="pitchShift" value="7">
+                    <label for="pitch7">升五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch12" name="pitchShift" value="12">
+                    <label for="pitch12">升一个八度</label>
+                </div>
+            </div>
+        </div>
+
+        <h3>音频频谱可视化</h3>
+        <canvas id="visualizer"></canvas>
+    </div>
+
+    <script>
+        const video = document.getElementById('video');
+        const playBtn = document.getElementById('playBtn');
+        const pauseBtn = document.getElementById('pauseBtn');
+        const muteBtn = document.getElementById('muteBtn');
+        const testAudioBtn = document.getElementById('testAudioBtn');
+        const volumeInput = document.getElementById('volume');
+        const trackRadioGroup = document.getElementById('trackRadioGroup');
+        const statusText = document.getElementById('statusText');
+        const canvas = document.getElementById('visualizer');
+        const ctx = canvas.getContext('2d');
+
+        // 固定视频地址 - 使用支持CORS的视频源
+        const VIDEO_URL = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
+
+        let audioContext;
+        let analyser;
+        let mediaElementSource;
+        let animationId;
+        let gainNode;
+        let pitchShifterNode;
+        let currentPitchShift = 0;
+        let isAudioContextInitialized = false;
+
+        // 设置画布尺寸
+        function resizeCanvas() {
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+        }
+
+        // 创建音调变换处理器
+        function createPitchShifter(audioContext) {
+            const scriptProcessor = audioContext.createScriptProcessor(4096, 1, 1);
+            let phase = 0;
+            let lastInputSample = 0;
+
+            scriptProcessor.onaudioprocess = function (event) {
+                const inputBuffer = event.inputBuffer;
+                const outputBuffer = event.outputBuffer;
+                const inputData = inputBuffer.getChannelData(0);
+                const outputData = outputBuffer.getChannelData(0);
+
+                const pitchRatio = Math.pow(2, currentPitchShift / 12);
+
+                for (let i = 0; i < inputData.length; i++) {
+                    if (currentPitchShift === 0) {
+                        // 无音调变换，直接复制
+                        outputData[i] = inputData[i];
+                    } else {
+                        // 简单的音调变换实现
+                        // 这是一个基础实现，真实环境中可能需要更复杂的算法
+                        const sampleIndex = i * pitchRatio;
+                        const baseIndex = Math.floor(sampleIndex);
+                        const fraction = sampleIndex - baseIndex;
+
+                        if (baseIndex < inputData.length - 1) {
+                            // 线性插值
+                            outputData[i] = inputData[baseIndex] * (1 - fraction) +
+                                inputData[baseIndex + 1] * fraction;
+                        } else {
+                            outputData[i] = lastInputSample;
+                        }
+                    }
+                }
+
+                if (inputData.length > 0) {
+                    lastInputSample = inputData[inputData.length - 1];
+                }
+            };
+
+            return scriptProcessor;
+        }
+
+        // 应用音调变换
+        function applyPitchShift(semitones) {
+            currentPitchShift = semitones;
+            console.log('音调变换设置为:', semitones, '半音');
+
+            // 更新状态显示
+            if (!video.paused) {
+                const pitchText = semitones === 0 ? '原调' :
+                    (semitones > 0 ? `升${semitones}半音` : `降${Math.abs(semitones)}半音`);
+                const currentRate = video.playbackRate;
+                const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+                statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            }
+        }
+
+        // 初始化音频上下文（需用户交互触发）
+        async function initAudioContext() {
+            try {
+                if (isAudioContextInitialized) {
+                    console.log('音频上下文已经初始化，跳过');
+                    return;
+                }
+
+                console.log('开始初始化音频上下文...');
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+                // 如果音频上下文被暂停，恢复它
+                if (audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 创建媒体元素源
+                mediaElementSource = audioContext.createMediaElementSource(video);
+                console.log('媒体元素源已创建');
+
+                // 创建分析器节点
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 1024;  // 增加分辨率
+                analyser.smoothingTimeConstant = 0.8;
+                console.log('分析器节点已创建，fftSize:', analyser.fftSize);
+
+                // 创建增益节点（用于音量控制）
+                gainNode = audioContext.createGain();
+                gainNode.gain.value = 1.0;
+                console.log('增益节点已创建');
+
+                // 创建音调变换节点
+                pitchShifterNode = createPitchShifter(audioContext);
+                console.log('音调变换节点已创建');
+
+                // 连接音频节点链：视频 -> 音调变换 -> 分析器 -> 增益 -> 输出
+                mediaElementSource.connect(pitchShifterNode);
+                pitchShifterNode.connect(analyser);
+                analyser.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                console.log('音频节点链已连接（包含音调变换）');
+
+                isAudioContextInitialized = true;
+                console.log('音频上下文初始化成功！');
+
+                // 立即开始可视化
+                startVisualization();
+
+                // 测试音频数据
+                setTimeout(() => {
+                    if (analyser) {
+                        const testArray = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(testArray);
+                        const hasData = testArray.some(value => value > 0);
+                        console.log('测试音频数据 - 有数据:', hasData);
+                        if (hasData) {
+                            console.log('前10个频谱值:', Array.from(testArray.slice(0, 10)));
+                        }
+                    }
+                }, 2000);
+
+            } catch (error) {
+                console.error('音频上下文初始化失败:', error);
+                // 如果音频上下文初始化失败，至少确保视频能播放
+                isAudioContextInitialized = false;
+            }
+        }
+
+        // 启动可视化
+        function startVisualization() {
+            if (!analyser) {
+                console.warn('分析器节点不存在，启动模拟可视化');
+                startMockVisualization();
+                return;
+            }
+
+            // 如果已经在运行动画，先停止
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            console.log('可视化已启动，缓冲区长度:', bufferLength);
+
+            function draw() {
+                if (!analyser) {
+                    console.warn('分析器节点丢失，停止绘制');
+                    return;
+                }
+
+                // 获取频谱数据
+                analyser.getByteFrequencyData(dataArray);
+
+                // 检查是否有音频数据
+                let hasAudioData = false;
+                let maxValue = 0;
+                for (let i = 0; i < dataArray.length; i++) {
+                    if (dataArray[i] > 0) {
+                        hasAudioData = true;
+                        maxValue = Math.max(maxValue, dataArray[i]);
+                    }
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                if (hasAudioData) {
+                    console.log('检测到音频数据，最大值:', maxValue);
+                    // 绘制频谱柱状图
+                    const barWidth = (canvas.width / bufferLength) * 2.5;
+                    let x = 0;
+
+                    for (let i = 0; i < bufferLength; i++) {
+                        const barHeight = (dataArray[i] / 255) * canvas.height;
+
+                        // 创建渐变色
+                        const hue = (i / bufferLength) * 360;
+                        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                        ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
+                        x += barWidth;
+                    }
+                } else {
+                    // 显示"无音频数据"提示
+                    ctx.fillStyle = '#999';
+                    ctx.font = '16px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('等待音频数据...', canvas.width / 2, canvas.height / 2);
+
+                    // 如果视频正在播放但没有音频数据，可能有问题
+                    if (!video.paused) {
+                        console.log('视频正在播放但没有音频数据');
+                    }
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 模拟可视化（当Web Audio API不可用时）
+        function startMockVisualization() {
+            console.log('启动模拟可视化');
+
+            function draw() {
+                if (video.paused) {
+                    return;
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                // 生成模拟频谱数据
+                const barCount = 50;
+                const barWidth = canvas.width / barCount;
+
+                for (let i = 0; i < barCount; i++) {
+                    // 根据时间生成动态数据
+                    const time = Date.now() * 0.001;
+                    const frequency = i * 0.2;
+                    const amplitude = Math.sin(time + frequency) * 0.5 + 0.5;
+                    const barHeight = amplitude * canvas.height * 0.8;
+
+                    // 创建渐变色
+                    const hue = (i / barCount) * 360;
+                    ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                    ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth - 1, barHeight);
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 停止可视化
+        function stopVisualization() {
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+                animationId = null;
+            }
+        }
+
+        // 自动加载视频
+        async function loadVideo() {
+            statusText.textContent = '加载中...';
+            statusText.style.color = '#666';
+            playBtn.disabled = true;
+            pauseBtn.disabled = true;
+
+            try {
+                // 使用固定的视频地址，添加CORS支持
+                video.crossOrigin = 'anonymous';
+                video.src = VIDEO_URL;
+
+                console.log('开始加载视频:', VIDEO_URL);
+
+                await new Promise((resolve, reject) => {
+                    video.onloadedmetadata = () => {
+                        console.log('视频元数据加载完成');
+                        console.log('视频时长:', video.duration);
+                        console.log('视频尺寸:', video.videoWidth, 'x', video.videoHeight);
+                        resolve();
+                    };
+                    video.onerror = (e) => {
+                        console.error('视频加载错误:', e);
+                        reject(e);
+                    };
+                    // 添加超时处理
+                    setTimeout(() => reject(new Error('加载超时')), 15000);
+                });
+
+                statusText.textContent = '加载完成，可以开始播放';
+                statusText.style.color = 'green';
+                playBtn.disabled = false;
+            } catch (err) {
+                statusText.textContent = `加载失败：${err.message || '视频地址无效或网络错误'}`;
+                statusText.style.color = 'red';
+                console.error('视频加载错误:', err);
+            }
+        }
+
+        // 视频元数据加载完成后初始化音轨
+        video.addEventListener('loadedmetadata', () => {
+            console.log('视频元数据已加载');
+
+            // 检查并显示可用的音频轨道信息
+            const audioTracks = video.audioTracks;
+            const textTracks = video.textTracks;
+
+            console.log('AudioTracks数量:', audioTracks ? audioTracks.length : 0);
+            console.log('TextTracks数量:', textTracks ? textTracks.length : 0);
+
+            // 清空现有的音轨选项
+            trackRadioGroup.innerHTML = '';
+
+            // 尝试使用audioTracks
+            if (audioTracks && audioTracks.length > 0) {
+                console.log('使用AudioTracks');
+                for (let i = 0; i < audioTracks.length; i++) {
+                    const track = audioTracks[i];
+                    const radioItem = document.createElement('div');
+                    radioItem.className = 'radio-item';
+                    
+                    const radio = document.createElement('input');
+                    radio.type = 'radio';
+                    radio.name = 'audioTrack';
+                    radio.id = `track${i}`;
+                    radio.value = i;
+                    radio.checked = track.enabled;
+                    
+                    const label = document.createElement('label');
+                    label.htmlFor = `track${i}`;
+                    label.textContent = track.label || track.language || `音轨 ${i + 1}`;
+                    
+                    radioItem.appendChild(radio);
+                    radioItem.appendChild(label);
+                    trackRadioGroup.appendChild(radioItem);
+                    
+                    console.log(`音轨 ${i}:`, track.label, track.language, track.enabled);
+                    
+                    // 添加音轨切换事件
+                    radio.addEventListener('change', () => {
+                        if (radio.checked) {
+                            console.log('切换到音轨:', i);
+                            // 禁用所有音轨
+                            for (let j = 0; j < audioTracks.length; j++) {
+                                audioTracks[j].enabled = false;
+                            }
+                            // 启用选中的音轨
+                            audioTracks[i].enabled = true;
+                            console.log('已启用音轨:', i);
+                        }
+                    });
+                }
+            }
+            // 如果没有多个音轨，显示默认选项
+            else {
+                const radioItem = document.createElement('div');
+                radioItem.className = 'radio-item';
+                
+                const radio = document.createElement('input');
+                radio.type = 'radio';
+                radio.name = 'audioTrack';
+                radio.id = 'track0';
+                radio.value = '0';
+                radio.checked = true;
+                
+                const label = document.createElement('label');
+                label.htmlFor = 'track0';
+                label.textContent = '默认音轨';
+                
+                radioItem.appendChild(radio);
+                radioItem.appendChild(label);
+                trackRadioGroup.appendChild(radioItem);
+                console.log('只有一个默认音轨');
+            }
+        });
+
+        // 播放控制
+        playBtn.addEventListener('click', async () => {
+            try {
+                console.log('点击播放按钮');
+
+                // 初始化音频上下文（必须在用户交互后创建）
+                if (!isAudioContextInitialized) {
+                    console.log('初始化音频上下文...');
+                    await initAudioContext();
+                }
+
+                // 确保音频上下文在运行状态
+                if (audioContext && audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 播放视频
+                await video.play();
+                console.log('视频开始播放');
+
+                statusText.textContent = '正在播放，音频频谱可视化已启动';
+                statusText.style.color = 'green';
+
+            } catch (err) {
+                console.error('播放失败:', err);
+                statusText.textContent = `播放失败：${err.message}`;
+                statusText.style.color = 'red';
+            }
+        });
+
+        pauseBtn.addEventListener('click', () => {
+            video.pause();
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+        });
+
+        muteBtn.addEventListener('click', () => {
+            video.muted = !video.muted;
+            muteBtn.textContent = video.muted ? '取消静音' : '静音';
+        });
+
+        // 测试音频按钮
+        testAudioBtn.addEventListener('click', async () => {
+            console.log('=== 音频调试信息 ===');
+            console.log('视频元素状态:');
+            console.log('- 是否暂停:', video.paused);
+            console.log('- 是否静音:', video.muted);
+            console.log('- 音量:', video.volume);
+            console.log('- 当前时间:', video.currentTime);
+            console.log('- 总时长:', video.duration);
+
+            console.log('音频上下文状态:');
+            console.log('- 是否初始化:', isAudioContextInitialized);
+            console.log('- 状态:', audioContext ? audioContext.state : '未创建');
+            console.log('- 采样率:', audioContext ? audioContext.sampleRate : 'N/A');
+
+            console.log('音频节点状态:');
+            console.log('- MediaElementSource:', !!mediaElementSource);
+            console.log('- Analyser:', !!analyser);
+            console.log('- GainNode:', !!gainNode);
+
+            if (analyser) {
+                const testData = new Uint8Array(analyser.frequencyBinCount);
+                analyser.getByteFrequencyData(testData);
+                const hasData = testData.some(v => v > 0);
+                const maxVal = Math.max(...testData);
+                console.log('- 频谱数据:', hasData ? `有数据 (最大值: ${maxVal})` : '无数据');
+            }
+
+            // 尝试播放测试音频
+            if (!video.paused) {
+                console.log('视频正在播放，检查音频输出...');
+                setTimeout(() => {
+                    if (analyser) {
+                        const data = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(data);
+                        console.log('延迟检查频谱数据:', data.slice(0, 10));
+                    }
+                }, 1000);
+            }
+        });
+
+        volumeInput.addEventListener('input', (e) => {
+            const volume = parseFloat(e.target.value);
+            video.volume = volume;
+
+            // 如果有增益节点，也同步更新
+            if (gainNode) {
+                gainNode.gain.value = volume;
+                console.log('音量已更新:', volume);
+            }
+        });
+
+        // 播放速度控制
+        document.querySelectorAll('input[name="playbackRate"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const playbackRate = parseFloat(e.target.value);
+                    video.playbackRate = playbackRate;
+
+                    const rateText = playbackRate === 1 ? '正常速度' : `${playbackRate}x 速度`;
+                    console.log('播放速度已改变为:', rateText);
+
+                    // 如果视频正在播放，显示速度变化提示
+                    if (!video.paused) {
+                        const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+                        const pitchText = currentPitchShift === '0' ? '原调' :
+                            (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+                        statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+                        statusText.style.color = '#4CAF50';
+                    }
+                }
+            });
+        });
+
+        // 音调变换控制
+        document.querySelectorAll('input[name="pitchShift"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const pitchShift = parseInt(e.target.value);
+                    applyPitchShift(pitchShift);
+                }
+            });
+        });
+
+        // 监听视频播放状态变化
+        video.addEventListener('play', async () => {
+            console.log('视频播放事件触发');
+
+            // 更新状态显示，包含当前播放速度和音调
+            const currentRate = video.playbackRate;
+            const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+            const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+            const pitchText = currentPitchShift === '0' ? '原调' :
+                (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+            statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            statusText.style.color = '#4CAF50';
+
+            // 检查音频状态
+            console.log('视频音量:', video.volume, '静音状态:', video.muted);
+            console.log('音频上下文状态:', audioContext ? audioContext.state : '未初始化');
+
+            if (audioContext && audioContext.state === 'suspended') {
+                await audioContext.resume();
+                console.log('音频上下文在播放时恢复');
+            }
+
+            if (isAudioContextInitialized && analyser) {
+                console.log('重新启动可视化');
+                startVisualization();
+            }
+        });
+
+        video.addEventListener('pause', () => {
+            console.log('视频暂停');
+            stopVisualization();
+        });
+
+        video.addEventListener('ended', () => {
+            console.log('视频播放结束');
+            stopVisualization();
+            statusText.textContent = '播放结束';
+            statusText.style.color = '#666';
+        });
+
+        // 添加音频相关的事件监听
+        video.addEventListener('volumechange', () => {
+            console.log('音量变化:', video.volume, '静音:', video.muted);
+        });
+
+        video.addEventListener('loadstart', () => {
+            console.log('开始加载视频');
+        });
+
+        video.addEventListener('canplay', () => {
+            console.log('视频可以播放');
+            console.log('视频时长:', video.duration);
+            console.log('视频是否有音频:', !video.muted && video.volume > 0);
+        });
+
+        // 画布尺寸适配
+        window.addEventListener('resize', resizeCanvas);
+
+        // 初始化画布尺寸
+        resizeCanvas();
+
+
+        // 如果DOM已经加载完成，立即加载视频
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', loadVideo);
+        } else {
+            loadVideo();
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html.v5 b/index.html.v5
new file mode 100644
index 0000000..616b81b
--- /dev/null
+++ b/index.html.v5
@@ -0,0 +1,849 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>自定义视频音频播放器</title>
+    <style>
+        .container {
+            max-width: 1000px;
+            margin: 20px auto;
+            padding: 0 20px;
+        }
+
+        .video-box {
+            width: 100%;
+            position: relative;
+        }
+
+        video {
+            width: 100%;
+            border-radius: 8px;
+        }
+
+        .controls {
+            margin: 15px 0;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .control-group {
+            margin: 10px 0;
+            padding: 10px;
+            border: 1px solid #eee;
+            border-radius: 6px;
+            background: #fafafa;
+        }
+
+        .control-group h4 {
+            margin: 0 0 8px 0;
+            font-size: 14px;
+            color: #333;
+        }
+
+        .radio-group {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .radio-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        .radio-item input[type="radio"] {
+            margin: 0;
+        }
+
+        .radio-item label {
+            font-size: 13px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        button {
+            padding: 8px 16px;
+            cursor: pointer;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #f5f5f5;
+        }
+
+        button:hover {
+            background: #eee;
+        }
+
+        input[type="text"] {
+            flex: 1;
+            max-width: 400px;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        input[type="range"] {
+            width: 150px;
+        }
+
+        #visualizer {
+            border: 1px solid #eee;
+            margin-top: 20px;
+            width: 100%;
+            height: 150px;
+            border-radius: 4px;
+        }
+
+        .status {
+            color: #666;
+            margin-top: 5px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <h2>自定义视频音频播放器</h2>
+
+        <div class="status" id="statusText">正在自动加载视频...</div>
+
+        <div class="video-box">
+            <video id="video" crossorigin="anonymous"></video>
+        </div>
+
+        <div class="controls">
+            <button id="playBtn" disabled>播放</button>
+            <button id="pauseBtn" disabled>暂停</button>
+            <button id="muteBtn">静音</button>
+            <button id="testAudioBtn">测试音频</button>
+            <span>音量：</span>
+            <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
+        </div>
+
+        <div class="control-group">
+            <h4>音轨选择</h4>
+            <div class="radio-group" id="trackRadioGroup">
+                <div class="radio-item">
+                    <input type="radio" id="track0" name="audioTrack" value="0" checked>
+                    <label for="track0">默认音轨</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>播放速度</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="rate05" name="playbackRate" value="0.5">
+                    <label for="rate05">0.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate075" name="playbackRate" value="0.75">
+                    <label for="rate075">0.75x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate1" name="playbackRate" value="1" checked>
+                    <label for="rate1">1x (正常)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate125" name="playbackRate" value="1.25">
+                    <label for="rate125">1.25x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate15" name="playbackRate" value="1.5">
+                    <label for="rate15">1.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate2" name="playbackRate" value="2">
+                    <label for="rate2">2x</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>音调变换</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="pitch-12" name="pitchShift" value="-12">
+                    <label for="pitch-12">降一个八度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-7" name="pitchShift" value="-7">
+                    <label for="pitch-7">降五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-5" name="pitchShift" value="-5">
+                    <label for="pitch-5">降四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-3" name="pitchShift" value="-3">
+                    <label for="pitch-3">降小三度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-2" name="pitchShift" value="-2">
+                    <label for="pitch-2">降大二度 (C→B♭)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-1" name="pitchShift" value="-1">
+                    <label for="pitch-1">降小二度 (C→B)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch0" name="pitchShift" value="0" checked>
+                    <label for="pitch0">原调</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch1" name="pitchShift" value="1">
+                    <label for="pitch1">升小二度 (C→C#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch2" name="pitchShift" value="2">
+                    <label for="pitch2">升大二度 (C→D)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch3" name="pitchShift" value="3">
+                    <label for="pitch3">升小三度 (C→D#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch4" name="pitchShift" value="4">
+                    <label for="pitch4">升大三度 (C→E)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch5" name="pitchShift" value="5">
+                    <label for="pitch5">升四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch7" name="pitchShift" value="7">
+                    <label for="pitch7">升五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch12" name="pitchShift" value="12">
+                    <label for="pitch12">升一个八度</label>
+                </div>
+            </div>
+        </div>
+
+        <h3>音频频谱可视化</h3>
+        <canvas id="visualizer"></canvas>
+    </div>
+
+    <script>
+        const video = document.getElementById('video');
+        const playBtn = document.getElementById('playBtn');
+        const pauseBtn = document.getElementById('pauseBtn');
+        const muteBtn = document.getElementById('muteBtn');
+        const testAudioBtn = document.getElementById('testAudioBtn');
+        const volumeInput = document.getElementById('volume');
+        const trackRadioGroup = document.getElementById('trackRadioGroup');
+        const statusText = document.getElementById('statusText');
+        const canvas = document.getElementById('visualizer');
+        const ctx = canvas.getContext('2d');
+
+        // 固定视频地址 - 使用支持CORS的视频源
+        const VIDEO_URL = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
+
+        let audioContext;
+        let analyser;
+        let mediaElementSource;
+        let animationId;
+        let gainNode;
+        let pitchShifterNode;
+        let currentPitchShift = 0;
+        let isAudioContextInitialized = false;
+
+        // 设置画布尺寸
+        function resizeCanvas() {
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+        }
+
+        // 创建音调变换处理器
+        function createPitchShifter(audioContext) {
+            const scriptProcessor = audioContext.createScriptProcessor(4096, 1, 1);
+            let phase = 0;
+            let lastInputSample = 0;
+
+            scriptProcessor.onaudioprocess = function (event) {
+                const inputBuffer = event.inputBuffer;
+                const outputBuffer = event.outputBuffer;
+                const inputData = inputBuffer.getChannelData(0);
+                const outputData = outputBuffer.getChannelData(0);
+
+                const pitchRatio = Math.pow(2, currentPitchShift / 12);
+
+                for (let i = 0; i < inputData.length; i++) {
+                    if (currentPitchShift === 0) {
+                        // 无音调变换，直接复制
+                        outputData[i] = inputData[i];
+                    } else {
+                        // 简单的音调变换实现
+                        // 这是一个基础实现，真实环境中可能需要更复杂的算法
+                        const sampleIndex = i * pitchRatio;
+                        const baseIndex = Math.floor(sampleIndex);
+                        const fraction = sampleIndex - baseIndex;
+
+                        if (baseIndex < inputData.length - 1) {
+                            // 线性插值
+                            outputData[i] = inputData[baseIndex] * (1 - fraction) +
+                                inputData[baseIndex + 1] * fraction;
+                        } else {
+                            outputData[i] = lastInputSample;
+                        }
+                    }
+                }
+
+                if (inputData.length > 0) {
+                    lastInputSample = inputData[inputData.length - 1];
+                }
+            };
+
+            return scriptProcessor;
+        }
+
+        // 应用音调变换
+        function applyPitchShift(semitones) {
+            currentPitchShift = semitones;
+            console.log('音调变换设置为:', semitones, '半音');
+
+            // 更新状态显示
+            if (!video.paused) {
+                const pitchText = semitones === 0 ? '原调' :
+                    (semitones > 0 ? `升${semitones}半音` : `降${Math.abs(semitones)}半音`);
+                const currentRate = video.playbackRate;
+                const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+                statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            }
+        }
+
+        // 初始化音频上下文（需用户交互触发）
+        async function initAudioContext() {
+            try {
+                if (isAudioContextInitialized) {
+                    console.log('音频上下文已经初始化，跳过');
+                    return;
+                }
+
+                console.log('开始初始化音频上下文...');
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+                // 如果音频上下文被暂停，恢复它
+                if (audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 创建媒体元素源
+                mediaElementSource = audioContext.createMediaElementSource(video);
+                console.log('媒体元素源已创建');
+
+                // 创建分析器节点
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 1024;  // 增加分辨率
+                analyser.smoothingTimeConstant = 0.8;
+                console.log('分析器节点已创建，fftSize:', analyser.fftSize);
+
+                // 创建增益节点（用于音量控制）
+                gainNode = audioContext.createGain();
+                gainNode.gain.value = 1.0;
+                console.log('增益节点已创建');
+
+                // 创建音调变换节点
+                pitchShifterNode = createPitchShifter(audioContext);
+                console.log('音调变换节点已创建');
+
+                // 连接音频节点链：视频 -> 音调变换 -> 分析器 -> 增益 -> 输出
+                mediaElementSource.connect(pitchShifterNode);
+                pitchShifterNode.connect(analyser);
+                analyser.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                console.log('音频节点链已连接（包含音调变换）');
+
+                isAudioContextInitialized = true;
+                console.log('音频上下文初始化成功！');
+
+                // 立即开始可视化
+                startVisualization();
+
+                // 测试音频数据
+                setTimeout(() => {
+                    if (analyser) {
+                        const testArray = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(testArray);
+                        const hasData = testArray.some(value => value > 0);
+                        console.log('测试音频数据 - 有数据:', hasData);
+                        if (hasData) {
+                            console.log('前10个频谱值:', Array.from(testArray.slice(0, 10)));
+                        }
+                    }
+                }, 2000);
+
+            } catch (error) {
+                console.error('音频上下文初始化失败:', error);
+                // 如果音频上下文初始化失败，至少确保视频能播放
+                isAudioContextInitialized = false;
+            }
+        }
+
+        // 启动可视化
+        function startVisualization() {
+            if (!analyser) {
+                console.warn('分析器节点不存在，启动模拟可视化');
+                startMockVisualization();
+                return;
+            }
+
+            // 如果已经在运行动画，先停止
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            console.log('可视化已启动，缓冲区长度:', bufferLength);
+
+            function draw() {
+                if (!analyser) {
+                    console.warn('分析器节点丢失，停止绘制');
+                    return;
+                }
+
+                // 获取频谱数据
+                analyser.getByteFrequencyData(dataArray);
+
+                // 检查是否有音频数据
+                let hasAudioData = false;
+                let maxValue = 0;
+                for (let i = 0; i < dataArray.length; i++) {
+                    if (dataArray[i] > 0) {
+                        hasAudioData = true;
+                        maxValue = Math.max(maxValue, dataArray[i]);
+                    }
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                if (hasAudioData) {
+                    console.log('检测到音频数据，最大值:', maxValue);
+                    // 绘制频谱柱状图
+                    const barWidth = (canvas.width / bufferLength) * 2.5;
+                    let x = 0;
+
+                    for (let i = 0; i < bufferLength; i++) {
+                        const barHeight = (dataArray[i] / 255) * canvas.height;
+
+                        // 创建渐变色
+                        const hue = (i / bufferLength) * 360;
+                        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                        ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
+                        x += barWidth;
+                    }
+                } else {
+                    // 显示"无音频数据"提示
+                    ctx.fillStyle = '#999';
+                    ctx.font = '16px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('等待音频数据...', canvas.width / 2, canvas.height / 2);
+
+                    // 如果视频正在播放但没有音频数据，可能有问题
+                    if (!video.paused) {
+                        console.log('视频正在播放但没有音频数据');
+                    }
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 模拟可视化（当Web Audio API不可用时）
+        function startMockVisualization() {
+            console.log('启动模拟可视化');
+
+            function draw() {
+                if (video.paused) {
+                    return;
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                // 生成模拟频谱数据
+                const barCount = 50;
+                const barWidth = canvas.width / barCount;
+
+                for (let i = 0; i < barCount; i++) {
+                    // 根据时间生成动态数据
+                    const time = Date.now() * 0.001;
+                    const frequency = i * 0.2;
+                    const amplitude = Math.sin(time + frequency) * 0.5 + 0.5;
+                    const barHeight = amplitude * canvas.height * 0.8;
+
+                    // 创建渐变色
+                    const hue = (i / barCount) * 360;
+                    ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                    ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth - 1, barHeight);
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 停止可视化
+        function stopVisualization() {
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+                animationId = null;
+            }
+        }
+
+        // 自动加载视频
+        async function loadVideo() {
+            statusText.textContent = '加载中...';
+            statusText.style.color = '#666';
+            playBtn.disabled = true;
+            pauseBtn.disabled = true;
+
+            try {
+                // 使用固定的视频地址，添加CORS支持
+                video.crossOrigin = 'anonymous';
+                video.src = VIDEO_URL;
+
+                console.log('开始加载视频:', VIDEO_URL);
+
+                await new Promise((resolve, reject) => {
+                    video.onloadedmetadata = () => {
+                        console.log('视频元数据加载完成');
+                        console.log('视频时长:', video.duration);
+                        console.log('视频尺寸:', video.videoWidth, 'x', video.videoHeight);
+                        resolve();
+                    };
+                    video.onerror = (e) => {
+                        console.error('视频加载错误:', e);
+                        reject(e);
+                    };
+                    // 添加超时处理
+                    setTimeout(() => reject(new Error('加载超时')), 15000);
+                });
+
+                statusText.textContent = '加载完成，可以开始播放';
+                statusText.style.color = 'green';
+                playBtn.disabled = false;
+            } catch (err) {
+                statusText.textContent = `加载失败：${err.message || '视频地址无效或网络错误'}`;
+                statusText.style.color = 'red';
+                console.error('视频加载错误:', err);
+            }
+        }
+
+        // 视频元数据加载完成后初始化音轨
+        video.addEventListener('loadedmetadata', () => {
+            console.log('视频元数据已加载');
+
+            // 检查并显示可用的音频轨道信息
+            const audioTracks = video.audioTracks;
+            const textTracks = video.textTracks;
+
+            console.log('AudioTracks数量:', audioTracks ? audioTracks.length : 0);
+            console.log('TextTracks数量:', textTracks ? textTracks.length : 0);
+
+            // 清空现有的音轨选项
+            trackRadioGroup.innerHTML = '';
+
+            // 尝试使用audioTracks
+            if (audioTracks && audioTracks.length > 0) {
+                console.log('使用AudioTracks');
+                for (let i = 0; i < audioTracks.length; i++) {
+                    const track = audioTracks[i];
+                    const radioItem = document.createElement('div');
+                    radioItem.className = 'radio-item';
+
+                    const radio = document.createElement('input');
+                    radio.type = 'radio';
+                    radio.name = 'audioTrack';
+                    radio.id = `track${i}`;
+                    radio.value = i;
+                    radio.checked = track.enabled;
+
+                    const label = document.createElement('label');
+                    label.htmlFor = `track${i}`;
+                    label.textContent = track.label || track.language || `音轨 ${i + 1}`;
+
+                    radioItem.appendChild(radio);
+                    radioItem.appendChild(label);
+                    trackRadioGroup.appendChild(radioItem);
+
+                    console.log(`音轨 ${i}:`, track.label, track.language, track.enabled);
+
+                    // 添加音轨切换事件
+                    radio.addEventListener('change', () => {
+                        if (radio.checked) {
+                            console.log('切换到音轨:', i);
+                            // 禁用所有音轨
+                            for (let j = 0; j < audioTracks.length; j++) {
+                                audioTracks[j].enabled = false;
+                            }
+                            // 启用选中的音轨
+                            audioTracks[i].enabled = true;
+                            console.log('已启用音轨:', i);
+                        }
+                    });
+                }
+            }
+            // 如果没有多个音轨，显示默认选项
+            else {
+                const radioItem = document.createElement('div');
+                radioItem.className = 'radio-item';
+
+                const radio = document.createElement('input');
+                radio.type = 'radio';
+                radio.name = 'audioTrack';
+                radio.id = 'track0';
+                radio.value = '0';
+                radio.checked = true;
+
+                const label = document.createElement('label');
+                label.htmlFor = 'track0';
+                label.textContent = '默认音轨';
+
+                radioItem.appendChild(radio);
+                radioItem.appendChild(label);
+                trackRadioGroup.appendChild(radioItem);
+                console.log('只有一个默认音轨');
+            }
+        });
+
+        // 播放控制
+        playBtn.addEventListener('click', async () => {
+            try {
+                console.log('点击播放按钮');
+
+                // 初始化音频上下文（必须在用户交互后创建）
+                if (!isAudioContextInitialized) {
+                    console.log('初始化音频上下文...');
+                    await initAudioContext();
+                }
+
+                // 确保音频上下文在运行状态
+                if (audioContext && audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 播放视频
+                await video.play();
+                console.log('视频开始播放');
+
+                // 更新按钮状态
+                playBtn.disabled = true;
+                pauseBtn.disabled = false;
+
+                statusText.textContent = '正在播放，音频频谱可视化已启动';
+                statusText.style.color = 'green';
+
+            } catch (err) {
+                console.error('播放失败:', err);
+                statusText.textContent = `播放失败：${err.message}`;
+                statusText.style.color = 'red';
+            }
+        });
+
+        pauseBtn.addEventListener('click', () => {
+            video.pause();
+
+            // 更新按钮状态
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+        });
+
+        muteBtn.addEventListener('click', () => {
+            video.muted = !video.muted;
+            muteBtn.textContent = video.muted ? '取消静音' : '静音';
+        });
+
+        // 测试音频按钮
+        testAudioBtn.addEventListener('click', async () => {
+            console.log('=== 音频调试信息 ===');
+            console.log('视频元素状态:');
+            console.log('- 是否暂停:', video.paused);
+            console.log('- 是否静音:', video.muted);
+            console.log('- 音量:', video.volume);
+            console.log('- 当前时间:', video.currentTime);
+            console.log('- 总时长:', video.duration);
+
+            console.log('音频上下文状态:');
+            console.log('- 是否初始化:', isAudioContextInitialized);
+            console.log('- 状态:', audioContext ? audioContext.state : '未创建');
+            console.log('- 采样率:', audioContext ? audioContext.sampleRate : 'N/A');
+
+            console.log('音频节点状态:');
+            console.log('- MediaElementSource:', !!mediaElementSource);
+            console.log('- Analyser:', !!analyser);
+            console.log('- GainNode:', !!gainNode);
+
+            if (analyser) {
+                const testData = new Uint8Array(analyser.frequencyBinCount);
+                analyser.getByteFrequencyData(testData);
+                const hasData = testData.some(v => v > 0);
+                const maxVal = Math.max(...testData);
+                console.log('- 频谱数据:', hasData ? `有数据 (最大值: ${maxVal})` : '无数据');
+            }
+
+            // 尝试播放测试音频
+            if (!video.paused) {
+                console.log('视频正在播放，检查音频输出...');
+                setTimeout(() => {
+                    if (analyser) {
+                        const data = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(data);
+                        console.log('延迟检查频谱数据:', data.slice(0, 10));
+                    }
+                }, 1000);
+            }
+        });
+
+        volumeInput.addEventListener('input', (e) => {
+            const volume = parseFloat(e.target.value);
+            video.volume = volume;
+
+            // 如果有增益节点，也同步更新
+            if (gainNode) {
+                gainNode.gain.value = volume;
+                console.log('音量已更新:', volume);
+            }
+        });
+
+        // 播放速度控制
+        document.querySelectorAll('input[name="playbackRate"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const playbackRate = parseFloat(e.target.value);
+                    video.playbackRate = playbackRate;
+
+                    const rateText = playbackRate === 1 ? '正常速度' : `${playbackRate}x 速度`;
+                    console.log('播放速度已改变为:', rateText);
+
+                    // 如果视频正在播放，显示速度变化提示
+                    if (!video.paused) {
+                        const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+                        const pitchText = currentPitchShift === '0' ? '原调' :
+                            (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+                        statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+                        statusText.style.color = '#4CAF50';
+                    }
+                }
+            });
+        });
+
+        // 音调变换控制
+        document.querySelectorAll('input[name="pitchShift"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const pitchShift = parseInt(e.target.value);
+                    applyPitchShift(pitchShift);
+                }
+            });
+        });
+
+        // 监听视频播放状态变化
+        video.addEventListener('play', async () => {
+            console.log('视频播放事件触发');
+
+            // 更新按钮状态
+            playBtn.disabled = true;
+            pauseBtn.disabled = false;
+
+            // 更新状态显示，包含当前播放速度和音调
+            const currentRate = video.playbackRate;
+            const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+            const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+            const pitchText = currentPitchShift === '0' ? '原调' :
+                (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+            statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            statusText.style.color = '#4CAF50';
+
+            // 检查音频状态
+            console.log('视频音量:', video.volume, '静音状态:', video.muted);
+            console.log('音频上下文状态:', audioContext ? audioContext.state : '未初始化');
+
+            if (audioContext && audioContext.state === 'suspended') {
+                await audioContext.resume();
+                console.log('音频上下文在播放时恢复');
+            }
+
+            if (isAudioContextInitialized && analyser) {
+                console.log('重新启动可视化');
+                startVisualization();
+            }
+        });
+
+        video.addEventListener('pause', () => {
+            console.log('视频暂停');
+            stopVisualization();
+
+            // 更新按钮状态
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+        });
+
+        video.addEventListener('ended', () => {
+            console.log('视频播放结束');
+            stopVisualization();
+
+            // 重置按钮状态
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+
+            statusText.textContent = '播放结束';
+            statusText.style.color = '#666';
+        });
+
+        // 添加音频相关的事件监听
+        video.addEventListener('volumechange', () => {
+            console.log('音量变化:', video.volume, '静音:', video.muted);
+        });
+
+        video.addEventListener('loadstart', () => {
+            console.log('开始加载视频');
+        });
+
+        video.addEventListener('canplay', () => {
+            console.log('视频可以播放');
+            console.log('视频时长:', video.duration);
+            console.log('视频是否有音频:', !video.muted && video.volume > 0);
+        });
+
+        // 画布尺寸适配
+        window.addEventListener('resize', resizeCanvas);
+
+        // 初始化画布尺寸
+        resizeCanvas();
+
+
+        // 如果DOM已经加载完成，立即加载视频
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', loadVideo);
+        } else {
+            loadVideo();
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html.v6 b/index.html.v6
new file mode 100644
index 0000000..4862f1f
--- /dev/null
+++ b/index.html.v6
@@ -0,0 +1,853 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>自定义视频音频播放器</title>
+    <script>
+        // const VIDEO_URL = 'http://localhost:8000/demo01.mp4';
+        // const VIDEO_URL = 'http://localhost:8000/demo02.mp4';
+        const VIDEO_URL = 'http://localhost:8000/demo03.mp4';
+    </script>
+    <style>
+        .container {
+            max-width: 1000px;
+            margin: 20px auto;
+            padding: 0 20px;
+        }
+
+        .video-box {
+            width: 100%;
+            position: relative;
+        }
+
+        video {
+            width: 100%;
+            border-radius: 8px;
+        }
+
+        .controls {
+            margin: 15px 0;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .control-group {
+            margin: 10px 0;
+            padding: 10px;
+            border: 1px solid #eee;
+            border-radius: 6px;
+            background: #fafafa;
+        }
+
+        .control-group h4 {
+            margin: 0 0 8px 0;
+            font-size: 14px;
+            color: #333;
+        }
+
+        .radio-group {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .radio-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        .radio-item input[type="radio"] {
+            margin: 0;
+        }
+
+        .radio-item label {
+            font-size: 13px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        button {
+            padding: 8px 16px;
+            cursor: pointer;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #f5f5f5;
+        }
+
+        button:hover {
+            background: #eee;
+        }
+
+        input[type="text"] {
+            flex: 1;
+            max-width: 400px;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        input[type="range"] {
+            width: 150px;
+        }
+
+        #visualizer {
+            border: 1px solid #eee;
+            margin-top: 20px;
+            width: 100%;
+            height: 150px;
+            border-radius: 4px;
+        }
+
+        .status {
+            color: #666;
+            margin-top: 5px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <h2>自定义视频音频播放器</h2>
+
+        <div class="status" id="statusText">正在自动加载视频...</div>
+
+        <div class="video-box">
+            <video id="video" crossorigin="anonymous"></video>
+        </div>
+
+        <div class="controls">
+            <button id="playBtn" disabled>播放</button>
+            <button id="pauseBtn" disabled>暂停</button>
+            <button id="muteBtn">静音</button>
+            <button id="testAudioBtn">测试音频</button>
+            <span>音量：</span>
+            <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
+        </div>
+
+        <div class="control-group">
+            <h4>音轨选择</h4>
+            <div class="radio-group" id="trackRadioGroup">
+                <div class="radio-item">
+                    <input type="radio" id="track0" name="audioTrack" value="0" checked>
+                    <label for="track0">默认音轨</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>播放速度</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="rate05" name="playbackRate" value="0.5">
+                    <label for="rate05">0.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate075" name="playbackRate" value="0.75">
+                    <label for="rate075">0.75x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate1" name="playbackRate" value="1" checked>
+                    <label for="rate1">1x (正常)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate125" name="playbackRate" value="1.25">
+                    <label for="rate125">1.25x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate15" name="playbackRate" value="1.5">
+                    <label for="rate15">1.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate2" name="playbackRate" value="2">
+                    <label for="rate2">2x</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>音调变换</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="pitch-12" name="pitchShift" value="-12">
+                    <label for="pitch-12">降一个八度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-7" name="pitchShift" value="-7">
+                    <label for="pitch-7">降五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-5" name="pitchShift" value="-5">
+                    <label for="pitch-5">降四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-3" name="pitchShift" value="-3">
+                    <label for="pitch-3">降小三度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-2" name="pitchShift" value="-2">
+                    <label for="pitch-2">降大二度 (C→B♭)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-1" name="pitchShift" value="-1">
+                    <label for="pitch-1">降小二度 (C→B)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch0" name="pitchShift" value="0" checked>
+                    <label for="pitch0">原调</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch1" name="pitchShift" value="1">
+                    <label for="pitch1">升小二度 (C→C#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch2" name="pitchShift" value="2">
+                    <label for="pitch2">升大二度 (C→D)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch3" name="pitchShift" value="3">
+                    <label for="pitch3">升小三度 (C→D#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch4" name="pitchShift" value="4">
+                    <label for="pitch4">升大三度 (C→E)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch5" name="pitchShift" value="5">
+                    <label for="pitch5">升四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch7" name="pitchShift" value="7">
+                    <label for="pitch7">升五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch12" name="pitchShift" value="12">
+                    <label for="pitch12">升一个八度</label>
+                </div>
+            </div>
+        </div>
+
+        <h3>音频频谱可视化</h3>
+        <canvas id="visualizer"></canvas>
+    </div>
+
+    <script>
+        const video = document.getElementById('video');
+        const playBtn = document.getElementById('playBtn');
+        const pauseBtn = document.getElementById('pauseBtn');
+        const muteBtn = document.getElementById('muteBtn');
+        const testAudioBtn = document.getElementById('testAudioBtn');
+        const volumeInput = document.getElementById('volume');
+        const trackRadioGroup = document.getElementById('trackRadioGroup');
+        const statusText = document.getElementById('statusText');
+        const canvas = document.getElementById('visualizer');
+        const ctx = canvas.getContext('2d');
+
+        // 固定视频地址 - 使用支持CORS的视频源
+
+        let audioContext;
+        let analyser;
+        let mediaElementSource;
+        let animationId;
+        let gainNode;
+        let pitchShifterNode;
+        let currentPitchShift = 0;
+        let isAudioContextInitialized = false;
+
+        // 设置画布尺寸
+        function resizeCanvas() {
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+        }
+
+        // 创建音调变换处理器
+        function createPitchShifter(audioContext) {
+            const scriptProcessor = audioContext.createScriptProcessor(4096, 1, 1);
+            let phase = 0;
+            let lastInputSample = 0;
+
+            scriptProcessor.onaudioprocess = function (event) {
+                const inputBuffer = event.inputBuffer;
+                const outputBuffer = event.outputBuffer;
+                const inputData = inputBuffer.getChannelData(0);
+                const outputData = outputBuffer.getChannelData(0);
+
+                const pitchRatio = Math.pow(2, currentPitchShift / 12);
+
+                for (let i = 0; i < inputData.length; i++) {
+                    if (currentPitchShift === 0) {
+                        // 无音调变换，直接复制
+                        outputData[i] = inputData[i];
+                    } else {
+                        // 简单的音调变换实现
+                        // 这是一个基础实现，真实环境中可能需要更复杂的算法
+                        const sampleIndex = i * pitchRatio;
+                        const baseIndex = Math.floor(sampleIndex);
+                        const fraction = sampleIndex - baseIndex;
+
+                        if (baseIndex < inputData.length - 1) {
+                            // 线性插值
+                            outputData[i] = inputData[baseIndex] * (1 - fraction) +
+                                inputData[baseIndex + 1] * fraction;
+                        } else {
+                            outputData[i] = lastInputSample;
+                        }
+                    }
+                }
+
+                if (inputData.length > 0) {
+                    lastInputSample = inputData[inputData.length - 1];
+                }
+            };
+
+            return scriptProcessor;
+        }
+
+        // 应用音调变换
+        function applyPitchShift(semitones) {
+            currentPitchShift = semitones;
+            console.log('音调变换设置为:', semitones, '半音');
+
+            // 更新状态显示
+            if (!video.paused) {
+                const pitchText = semitones === 0 ? '原调' :
+                    (semitones > 0 ? `升${semitones}半音` : `降${Math.abs(semitones)}半音`);
+                const currentRate = video.playbackRate;
+                const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+                statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            }
+        }
+
+        // 初始化音频上下文（需用户交互触发）
+        async function initAudioContext() {
+            try {
+                if (isAudioContextInitialized) {
+                    console.log('音频上下文已经初始化，跳过');
+                    return;
+                }
+
+                console.log('开始初始化音频上下文...');
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+                // 如果音频上下文被暂停，恢复它
+                if (audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 创建媒体元素源
+                mediaElementSource = audioContext.createMediaElementSource(video);
+                console.log('媒体元素源已创建');
+
+                // 创建分析器节点
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 1024;  // 增加分辨率
+                analyser.smoothingTimeConstant = 0.8;
+                console.log('分析器节点已创建，fftSize:', analyser.fftSize);
+
+                // 创建增益节点（用于音量控制）
+                gainNode = audioContext.createGain();
+                gainNode.gain.value = 1.0;
+                console.log('增益节点已创建');
+
+                // 创建音调变换节点
+                pitchShifterNode = createPitchShifter(audioContext);
+                console.log('音调变换节点已创建');
+
+                // 连接音频节点链：视频 -> 音调变换 -> 分析器 -> 增益 -> 输出
+                mediaElementSource.connect(pitchShifterNode);
+                pitchShifterNode.connect(analyser);
+                analyser.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                console.log('音频节点链已连接（包含音调变换）');
+
+                isAudioContextInitialized = true;
+                console.log('音频上下文初始化成功！');
+
+                // 立即开始可视化
+                startVisualization();
+
+                // 测试音频数据
+                setTimeout(() => {
+                    if (analyser) {
+                        const testArray = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(testArray);
+                        const hasData = testArray.some(value => value > 0);
+                        console.log('测试音频数据 - 有数据:', hasData);
+                        if (hasData) {
+                            console.log('前10个频谱值:', Array.from(testArray.slice(0, 10)));
+                        }
+                    }
+                }, 2000);
+
+            } catch (error) {
+                console.error('音频上下文初始化失败:', error);
+                // 如果音频上下文初始化失败，至少确保视频能播放
+                isAudioContextInitialized = false;
+            }
+        }
+
+        // 启动可视化
+        function startVisualization() {
+            if (!analyser) {
+                console.warn('分析器节点不存在，启动模拟可视化');
+                startMockVisualization();
+                return;
+            }
+
+            // 如果已经在运行动画，先停止
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            console.log('可视化已启动，缓冲区长度:', bufferLength);
+
+            function draw() {
+                if (!analyser) {
+                    console.warn('分析器节点丢失，停止绘制');
+                    return;
+                }
+
+                // 获取频谱数据
+                analyser.getByteFrequencyData(dataArray);
+
+                // 检查是否有音频数据
+                let hasAudioData = false;
+                let maxValue = 0;
+                for (let i = 0; i < dataArray.length; i++) {
+                    if (dataArray[i] > 0) {
+                        hasAudioData = true;
+                        maxValue = Math.max(maxValue, dataArray[i]);
+                    }
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                if (hasAudioData) {
+                    console.log('检测到音频数据，最大值:', maxValue);
+                    // 绘制频谱柱状图
+                    const barWidth = (canvas.width / bufferLength) * 2.5;
+                    let x = 0;
+
+                    for (let i = 0; i < bufferLength; i++) {
+                        const barHeight = (dataArray[i] / 255) * canvas.height;
+
+                        // 创建渐变色
+                        const hue = (i / bufferLength) * 360;
+                        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                        ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
+                        x += barWidth;
+                    }
+                } else {
+                    // 显示"无音频数据"提示
+                    ctx.fillStyle = '#999';
+                    ctx.font = '16px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('等待音频数据...', canvas.width / 2, canvas.height / 2);
+
+                    // 如果视频正在播放但没有音频数据，可能有问题
+                    if (!video.paused) {
+                        console.log('视频正在播放但没有音频数据');
+                    }
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 模拟可视化（当Web Audio API不可用时）
+        function startMockVisualization() {
+            console.log('启动模拟可视化');
+
+            function draw() {
+                if (video.paused) {
+                    return;
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                // 生成模拟频谱数据
+                const barCount = 50;
+                const barWidth = canvas.width / barCount;
+
+                for (let i = 0; i < barCount; i++) {
+                    // 根据时间生成动态数据
+                    const time = Date.now() * 0.001;
+                    const frequency = i * 0.2;
+                    const amplitude = Math.sin(time + frequency) * 0.5 + 0.5;
+                    const barHeight = amplitude * canvas.height * 0.8;
+
+                    // 创建渐变色
+                    const hue = (i / barCount) * 360;
+                    ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                    ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth - 1, barHeight);
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 停止可视化
+        function stopVisualization() {
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+                animationId = null;
+            }
+        }
+
+        // 自动加载视频
+        async function loadVideo() {
+            statusText.textContent = '加载中...';
+            statusText.style.color = '#666';
+            playBtn.disabled = true;
+            pauseBtn.disabled = true;
+
+            try {
+                // 使用固定的视频地址，添加CORS支持
+                video.crossOrigin = 'anonymous';
+                video.src = VIDEO_URL;
+
+                console.log('开始加载视频:', VIDEO_URL);
+
+                await new Promise((resolve, reject) => {
+                    video.onloadedmetadata = () => {
+                        console.log('视频元数据加载完成');
+                        console.log('视频时长:', video.duration);
+                        console.log('视频尺寸:', video.videoWidth, 'x', video.videoHeight);
+                        resolve();
+                    };
+                    video.onerror = (e) => {
+                        console.error('视频加载错误:', e);
+                        reject(e);
+                    };
+                    // 添加超时处理
+                    setTimeout(() => reject(new Error('加载超时')), 15000);
+                });
+
+                statusText.textContent = '加载完成，可以开始播放';
+                statusText.style.color = 'green';
+                playBtn.disabled = false;
+            } catch (err) {
+                statusText.textContent = `加载失败：${err.message || '视频地址无效或网络错误'}`;
+                statusText.style.color = 'red';
+                console.error('视频加载错误:', err);
+            }
+        }
+
+        // 视频元数据加载完成后初始化音轨
+        video.addEventListener('loadedmetadata', () => {
+            console.log('视频元数据已加载');
+
+            // 检查并显示可用的音频轨道信息
+            const audioTracks = video.audioTracks;
+            const textTracks = video.textTracks;
+
+            console.log('AudioTracks数量:', audioTracks ? audioTracks.length : 0);
+            console.log('TextTracks数量:', textTracks ? textTracks.length : 0);
+
+            // 清空现有的音轨选项
+            trackRadioGroup.innerHTML = '';
+
+            // 尝试使用audioTracks
+            if (audioTracks && audioTracks.length > 0) {
+                console.log('使用AudioTracks');
+                for (let i = 0; i < audioTracks.length; i++) {
+                    const track = audioTracks[i];
+                    const radioItem = document.createElement('div');
+                    radioItem.className = 'radio-item';
+
+                    const radio = document.createElement('input');
+                    radio.type = 'radio';
+                    radio.name = 'audioTrack';
+                    radio.id = `track${i}`;
+                    radio.value = i;
+                    radio.checked = track.enabled;
+
+                    const label = document.createElement('label');
+                    label.htmlFor = `track${i}`;
+                    label.textContent = track.label || track.language || `音轨 ${i + 1}`;
+
+                    radioItem.appendChild(radio);
+                    radioItem.appendChild(label);
+                    trackRadioGroup.appendChild(radioItem);
+
+                    console.log(`音轨 ${i}:`, track.label, track.language, track.enabled);
+
+                    // 添加音轨切换事件
+                    radio.addEventListener('change', () => {
+                        if (radio.checked) {
+                            console.log('切换到音轨:', i);
+                            // 禁用所有音轨
+                            for (let j = 0; j < audioTracks.length; j++) {
+                                audioTracks[j].enabled = false;
+                            }
+                            // 启用选中的音轨
+                            audioTracks[i].enabled = true;
+                            console.log('已启用音轨:', i);
+                        }
+                    });
+                }
+            }
+            // 如果没有多个音轨，显示默认选项
+            else {
+                const radioItem = document.createElement('div');
+                radioItem.className = 'radio-item';
+
+                const radio = document.createElement('input');
+                radio.type = 'radio';
+                radio.name = 'audioTrack';
+                radio.id = 'track0';
+                radio.value = '0';
+                radio.checked = true;
+
+                const label = document.createElement('label');
+                label.htmlFor = 'track0';
+                label.textContent = '默认音轨';
+
+                radioItem.appendChild(radio);
+                radioItem.appendChild(label);
+                trackRadioGroup.appendChild(radioItem);
+                console.log('只有一个默认音轨');
+            }
+        });
+
+        // 播放控制
+        playBtn.addEventListener('click', async () => {
+            try {
+                console.log('点击播放按钮');
+
+                // 初始化音频上下文（必须在用户交互后创建）
+                if (!isAudioContextInitialized) {
+                    console.log('初始化音频上下文...');
+                    await initAudioContext();
+                }
+
+                // 确保音频上下文在运行状态
+                if (audioContext && audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 播放视频
+                await video.play();
+                console.log('视频开始播放');
+
+                // 更新按钮状态
+                playBtn.disabled = true;
+                pauseBtn.disabled = false;
+
+                statusText.textContent = '正在播放，音频频谱可视化已启动';
+                statusText.style.color = 'green';
+
+            } catch (err) {
+                console.error('播放失败:', err);
+                statusText.textContent = `播放失败：${err.message}`;
+                statusText.style.color = 'red';
+            }
+        });
+
+        pauseBtn.addEventListener('click', () => {
+            video.pause();
+
+            // 更新按钮状态
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+        });
+
+        muteBtn.addEventListener('click', () => {
+            video.muted = !video.muted;
+            muteBtn.textContent = video.muted ? '取消静音' : '静音';
+        });
+
+        // 测试音频按钮
+        testAudioBtn.addEventListener('click', async () => {
+            console.log('=== 音频调试信息 ===');
+            console.log('视频元素状态:');
+            console.log('- 是否暂停:', video.paused);
+            console.log('- 是否静音:', video.muted);
+            console.log('- 音量:', video.volume);
+            console.log('- 当前时间:', video.currentTime);
+            console.log('- 总时长:', video.duration);
+
+            console.log('音频上下文状态:');
+            console.log('- 是否初始化:', isAudioContextInitialized);
+            console.log('- 状态:', audioContext ? audioContext.state : '未创建');
+            console.log('- 采样率:', audioContext ? audioContext.sampleRate : 'N/A');
+
+            console.log('音频节点状态:');
+            console.log('- MediaElementSource:', !!mediaElementSource);
+            console.log('- Analyser:', !!analyser);
+            console.log('- GainNode:', !!gainNode);
+
+            if (analyser) {
+                const testData = new Uint8Array(analyser.frequencyBinCount);
+                analyser.getByteFrequencyData(testData);
+                const hasData = testData.some(v => v > 0);
+                const maxVal = Math.max(...testData);
+                console.log('- 频谱数据:', hasData ? `有数据 (最大值: ${maxVal})` : '无数据');
+            }
+
+            // 尝试播放测试音频
+            if (!video.paused) {
+                console.log('视频正在播放，检查音频输出...');
+                setTimeout(() => {
+                    if (analyser) {
+                        const data = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(data);
+                        console.log('延迟检查频谱数据:', data.slice(0, 10));
+                    }
+                }, 1000);
+            }
+        });
+
+        volumeInput.addEventListener('input', (e) => {
+            const volume = parseFloat(e.target.value);
+            video.volume = volume;
+
+            // 如果有增益节点，也同步更新
+            if (gainNode) {
+                gainNode.gain.value = volume;
+                console.log('音量已更新:', volume);
+            }
+        });
+
+        // 播放速度控制
+        document.querySelectorAll('input[name="playbackRate"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const playbackRate = parseFloat(e.target.value);
+                    video.playbackRate = playbackRate;
+
+                    const rateText = playbackRate === 1 ? '正常速度' : `${playbackRate}x 速度`;
+                    console.log('播放速度已改变为:', rateText);
+
+                    // 如果视频正在播放，显示速度变化提示
+                    if (!video.paused) {
+                        const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+                        const pitchText = currentPitchShift === '0' ? '原调' :
+                            (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+                        statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+                        statusText.style.color = '#4CAF50';
+                    }
+                }
+            });
+        });
+
+        // 音调变换控制
+        document.querySelectorAll('input[name="pitchShift"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const pitchShift = parseInt(e.target.value);
+                    applyPitchShift(pitchShift);
+                }
+            });
+        });
+
+        // 监听视频播放状态变化
+        video.addEventListener('play', async () => {
+            console.log('视频播放事件触发');
+
+            // 更新按钮状态
+            playBtn.disabled = true;
+            pauseBtn.disabled = false;
+
+            // 更新状态显示，包含当前播放速度和音调
+            const currentRate = video.playbackRate;
+            const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+            const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+            const pitchText = currentPitchShift === '0' ? '原调' :
+                (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+            statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            statusText.style.color = '#4CAF50';
+
+            // 检查音频状态
+            console.log('视频音量:', video.volume, '静音状态:', video.muted);
+            console.log('音频上下文状态:', audioContext ? audioContext.state : '未初始化');
+
+            if (audioContext && audioContext.state === 'suspended') {
+                await audioContext.resume();
+                console.log('音频上下文在播放时恢复');
+            }
+
+            if (isAudioContextInitialized && analyser) {
+                console.log('重新启动可视化');
+                startVisualization();
+            }
+        });
+
+        video.addEventListener('pause', () => {
+            console.log('视频暂停');
+            stopVisualization();
+
+            // 更新按钮状态
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+        });
+
+        video.addEventListener('ended', () => {
+            console.log('视频播放结束');
+            stopVisualization();
+
+            // 重置按钮状态
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+
+            statusText.textContent = '播放结束';
+            statusText.style.color = '#666';
+        });
+
+        // 添加音频相关的事件监听
+        video.addEventListener('volumechange', () => {
+            console.log('音量变化:', video.volume, '静音:', video.muted);
+        });
+
+        video.addEventListener('loadstart', () => {
+            console.log('开始加载视频');
+        });
+
+        video.addEventListener('canplay', () => {
+            console.log('视频可以播放');
+            console.log('视频时长:', video.duration);
+            console.log('视频是否有音频:', !video.muted && video.volume > 0);
+        });
+
+        // 画布尺寸适配
+        window.addEventListener('resize', resizeCanvas);
+
+        // 初始化画布尺寸
+        resizeCanvas();
+
+
+        // 如果DOM已经加载完成，立即加载视频
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', loadVideo);
+        } else {
+            loadVideo();
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html.v7 b/index.html.v7
new file mode 100644
index 0000000..e6d1b8b
--- /dev/null
+++ b/index.html.v7
@@ -0,0 +1,863 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>自定义视频音频播放器</title>
+    <script>
+        // const VIDEO_URL = 'http://localhost:8000/demo01.mp4';
+        const VIDEO_URL = 'http://localhost:8000/demo02.mp4';
+        // const VIDEO_URL = 'http://localhost:8000/demo03.mp4';
+    </script>
+    <style>
+        .container {
+            max-width: 1000px;
+            margin: 20px auto;
+            padding: 0 20px;
+        }
+
+        .video-box {
+            width: 100%;
+            position: relative;
+        }
+
+        video {
+            width: 100%;
+            border-radius: 8px;
+        }
+
+        .controls {
+            margin: 15px 0;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .control-group {
+            margin: 10px 0;
+            padding: 10px;
+            border: 1px solid #eee;
+            border-radius: 6px;
+            background: #fafafa;
+        }
+
+        .control-group h4 {
+            margin: 0 0 8px 0;
+            font-size: 14px;
+            color: #333;
+        }
+
+        .radio-group {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .radio-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        .radio-item input[type="radio"] {
+            margin: 0;
+        }
+
+        .radio-item label {
+            font-size: 13px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        button {
+            padding: 8px 16px;
+            cursor: pointer;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #f5f5f5;
+        }
+
+        button:hover {
+            background: #eee;
+        }
+
+        input[type="text"] {
+            flex: 1;
+            max-width: 400px;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        input[type="range"] {
+            width: 150px;
+        }
+
+        #visualizer {
+            border: 1px solid #eee;
+            margin-top: 20px;
+            width: 100%;
+            height: 150px;
+            border-radius: 4px;
+        }
+
+        .status {
+            color: #666;
+            margin-top: 5px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <h2>自定义视频音频播放器</h2>
+
+        <div class="status" id="statusText">正在自动加载视频...</div>
+
+        <div class="video-box">
+            <video id="video" crossorigin="anonymous"></video>
+        </div>
+
+        <div class="controls">
+            <button id="playBtn" disabled>播放</button>
+            <button id="pauseBtn" disabled>暂停</button>
+            <button id="muteBtn">静音</button>
+            <button id="testAudioBtn">测试音频</button>
+            <span>音量：</span>
+            <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
+        </div>
+
+        <div class="control-group">
+            <h4>音轨选择</h4>
+            <div class="radio-group" id="trackRadioGroup">
+                <div class="radio-item">
+                    <input type="radio" id="track0" name="audioTrack" value="0" checked>
+                    <label for="track0">默认音轨</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>播放速度</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="rate05" name="playbackRate" value="0.5">
+                    <label for="rate05">0.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate075" name="playbackRate" value="0.75">
+                    <label for="rate075">0.75x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate1" name="playbackRate" value="1" checked>
+                    <label for="rate1">1x (正常)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate125" name="playbackRate" value="1.25">
+                    <label for="rate125">1.25x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate15" name="playbackRate" value="1.5">
+                    <label for="rate15">1.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate2" name="playbackRate" value="2">
+                    <label for="rate2">2x</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>音调变换</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="pitch-12" name="pitchShift" value="-12">
+                    <label for="pitch-12">降一个八度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-7" name="pitchShift" value="-7">
+                    <label for="pitch-7">降五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-5" name="pitchShift" value="-5">
+                    <label for="pitch-5">降四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-3" name="pitchShift" value="-3">
+                    <label for="pitch-3">降小三度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-2" name="pitchShift" value="-2">
+                    <label for="pitch-2">降大二度 (C→B♭)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-1" name="pitchShift" value="-1">
+                    <label for="pitch-1">降小二度 (C→B)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch0" name="pitchShift" value="0" checked>
+                    <label for="pitch0">原调</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch1" name="pitchShift" value="1">
+                    <label for="pitch1">升小二度 (C→C#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch2" name="pitchShift" value="2">
+                    <label for="pitch2">升大二度 (C→D)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch3" name="pitchShift" value="3">
+                    <label for="pitch3">升小三度 (C→D#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch4" name="pitchShift" value="4">
+                    <label for="pitch4">升大三度 (C→E)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch5" name="pitchShift" value="5">
+                    <label for="pitch5">升四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch7" name="pitchShift" value="7">
+                    <label for="pitch7">升五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch12" name="pitchShift" value="12">
+                    <label for="pitch12">升一个八度</label>
+                </div>
+            </div>
+        </div>
+
+        <h3>音频频谱可视化</h3>
+        <canvas id="visualizer"></canvas>
+    </div>
+
+    <script>
+        const video = document.getElementById('video');
+        const playBtn = document.getElementById('playBtn');
+        const pauseBtn = document.getElementById('pauseBtn');
+        const muteBtn = document.getElementById('muteBtn');
+        const testAudioBtn = document.getElementById('testAudioBtn');
+        const volumeInput = document.getElementById('volume');
+        const trackRadioGroup = document.getElementById('trackRadioGroup');
+        const statusText = document.getElementById('statusText');
+        const canvas = document.getElementById('visualizer');
+        const ctx = canvas.getContext('2d');
+
+        // 固定视频地址 - 使用支持CORS的视频源
+
+        let audioContext;
+        let analyser;
+        let mediaElementSource;
+        let animationId;
+        let gainNode;
+        let soundTouchNode;
+        let currentPitchShift = 0;
+        let isAudioContextInitialized = false;
+        let isWorkletRegistered = false;
+
+        // 设置画布尺寸
+        function resizeCanvas() {
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+        }
+
+        // 创建 SoundTouch AudioWorkletNode (现代化音调变换)
+        async function createSoundTouchNode(audioContext) {
+            try {
+                // 首先注册 AudioWorklet 处理器
+                if (!isWorkletRegistered) {
+                    console.log('注册 SoundTouch AudioWorklet...');
+                    await audioContext.audioWorklet.addModule('https://cdn.jsdelivr.net/npm/@soundtouchjs/audio-worklet@0.2.1/dist/soundtouch-worklet.js');
+                    isWorkletRegistered = true;
+                    console.log('SoundTouch AudioWorklet 注册成功');
+                }
+
+                // 创建 AudioWorkletNode
+                const workletNode = new AudioWorkletNode(audioContext, 'soundtouch-processor');
+                console.log('SoundTouch AudioWorkletNode 创建成功');
+
+                return workletNode;
+            } catch (error) {
+                console.error('创建 SoundTouch 节点失败:', error);
+                // 如果失败，返回一个直通节点
+                return createPassThroughNode(audioContext);
+            }
+        }
+
+        // 创建直通节点作为后备方案
+        function createPassThroughNode(audioContext) {
+            console.log('创建直通节点作为后备方案');
+            const gainNode = audioContext.createGain();
+            gainNode.gain.value = 1.0;
+            return gainNode;
+        }
+
+        // 应用音调变换
+        function applyPitchShift(semitones) {
+            currentPitchShift = semitones;
+            console.log('音调变换设置为:', semitones, '半音');
+
+            // 如果有 SoundTouch 节点，设置音调参数
+            if (soundTouchNode && soundTouchNode.parameters) {
+                try {
+                    // 使用 pitchSemitones 参数来设置半音变换
+                    const pitchSemitonesParam = soundTouchNode.parameters.get('pitchSemitones');
+                    if (pitchSemitonesParam) {
+                        pitchSemitonesParam.value = semitones;
+                        console.log('SoundTouch 音调半音设置为:', semitones);
+                    } else {
+                        console.warn('pitchSemitones 参数不可用，尝试使用 pitch 参数');
+                        // 备选方案：使用 pitch 参数（比率）
+                        const pitchParam = soundTouchNode.parameters.get('pitch');
+                        if (pitchParam) {
+                            const pitchRatio = Math.pow(2, semitones / 12);
+                            pitchParam.value = pitchRatio;
+                            console.log('SoundTouch 音调比率设置为:', pitchRatio);
+                        }
+                    }
+                } catch (error) {
+                    console.warn('设置 SoundTouch 参数时出错:', error);
+                }
+            }
+
+            // 更新状态显示
+            if (!video.paused) {
+                const pitchText = semitones === 0 ? '原调' :
+                    (semitones > 0 ? `升${semitones}半音` : `降${Math.abs(semitones)}半音`);
+                const currentRate = video.playbackRate;
+                const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+                statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            }
+        }
+
+        // 初始化音频上下文（需用户交互触发）
+        async function initAudioContext() {
+            try {
+                if (isAudioContextInitialized) {
+                    console.log('音频上下文已经初始化，跳过');
+                    return;
+                }
+
+                console.log('开始初始化音频上下文...');
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+                // 如果音频上下文被暂停，恢复它
+                if (audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 创建媒体元素源
+                mediaElementSource = audioContext.createMediaElementSource(video);
+                console.log('媒体元素源已创建');
+
+                // 创建分析器节点
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 1024;  // 增加分辨率
+                analyser.smoothingTimeConstant = 0.8;
+                console.log('分析器节点已创建，fftSize:', analyser.fftSize);                // 创建增益节点（用于音量控制）
+                gainNode = audioContext.createGain();
+                gainNode.gain.value = 1.0;
+                console.log('增益节点已创建');
+
+                // 创建 SoundTouch 音调变换节点
+                soundTouchNode = await createSoundTouchNode(audioContext);
+                console.log('SoundTouch 节点已创建');
+
+                // 连接音频节点链：视频 -> SoundTouch -> 分析器 -> 增益 -> 输出
+                mediaElementSource.connect(soundTouchNode);
+                soundTouchNode.connect(analyser);
+                analyser.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                console.log('音频节点链已连接（使用 SoundTouch AudioWorklet）');
+
+                isAudioContextInitialized = true;
+                console.log('音频上下文初始化成功！');
+
+                // 立即开始可视化
+                startVisualization();
+
+                // 测试音频数据
+                setTimeout(() => {
+                    if (analyser) {
+                        const testArray = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(testArray);
+                        const hasData = testArray.some(value => value > 0);
+                        console.log('测试音频数据 - 有数据:', hasData);
+                        if (hasData) {
+                            console.log('前10个频谱值:', Array.from(testArray.slice(0, 10)));
+                        }
+                    }
+                }, 2000);
+
+            } catch (error) {
+                console.error('音频上下文初始化失败:', error);
+                // 如果音频上下文初始化失败，至少确保视频能播放
+                isAudioContextInitialized = false;
+            }
+        }
+
+        // 启动可视化
+        function startVisualization() {
+            if (!analyser) {
+                console.warn('分析器节点不存在，启动模拟可视化');
+                startMockVisualization();
+                return;
+            }
+
+            // 如果已经在运行动画，先停止
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            console.log('可视化已启动，缓冲区长度:', bufferLength);
+
+            function draw() {
+                if (!analyser) {
+                    console.warn('分析器节点丢失，停止绘制');
+                    return;
+                }
+
+                // 获取频谱数据
+                analyser.getByteFrequencyData(dataArray);
+
+                // 检查是否有音频数据
+                let hasAudioData = false;
+                let maxValue = 0;
+                for (let i = 0; i < dataArray.length; i++) {
+                    if (dataArray[i] > 0) {
+                        hasAudioData = true;
+                        maxValue = Math.max(maxValue, dataArray[i]);
+                    }
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                if (hasAudioData) {
+                    // console.log('检测到音频数据，最大值:', maxValue);
+                    // 绘制频谱柱状图
+                    const barWidth = (canvas.width / bufferLength) * 2.5;
+                    let x = 0;
+
+                    for (let i = 0; i < bufferLength; i++) {
+                        const barHeight = (dataArray[i] / 255) * canvas.height;
+
+                        // 创建渐变色
+                        const hue = (i / bufferLength) * 360;
+                        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                        ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
+                        x += barWidth;
+                    }
+                } else {
+                    // 显示"无音频数据"提示
+                    ctx.fillStyle = '#999';
+                    ctx.font = '16px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('等待音频数据...', canvas.width / 2, canvas.height / 2);
+
+                    // 如果视频正在播放但没有音频数据，可能有问题
+                    if (!video.paused) {
+                        console.log('视频正在播放但没有音频数据');
+                    }
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 模拟可视化（当Web Audio API不可用时）
+        function startMockVisualization() {
+            console.log('启动模拟可视化');
+
+            function draw() {
+                if (video.paused) {
+                    return;
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                // 生成模拟频谱数据
+                const barCount = 50;
+                const barWidth = canvas.width / barCount;
+
+                for (let i = 0; i < barCount; i++) {
+                    // 根据时间生成动态数据
+                    const time = Date.now() * 0.001;
+                    const frequency = i * 0.2;
+                    const amplitude = Math.sin(time + frequency) * 0.5 + 0.5;
+                    const barHeight = amplitude * canvas.height * 0.8;
+
+                    // 创建渐变色
+                    const hue = (i / barCount) * 360;
+                    ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                    ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth - 1, barHeight);
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 停止可视化
+        function stopVisualization() {
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+                animationId = null;
+            }
+        }
+
+        // 自动加载视频
+        async function loadVideo() {
+            statusText.textContent = '加载中...';
+            statusText.style.color = '#666';
+            playBtn.disabled = true;
+            pauseBtn.disabled = true;
+
+            try {
+                // 使用固定的视频地址，添加CORS支持
+                video.crossOrigin = 'anonymous';
+                video.src = VIDEO_URL;
+
+                console.log('开始加载视频:', VIDEO_URL);
+
+                await new Promise((resolve, reject) => {
+                    video.onloadedmetadata = () => {
+                        console.log('视频元数据加载完成');
+                        console.log('视频时长:', video.duration);
+                        console.log('视频尺寸:', video.videoWidth, 'x', video.videoHeight);
+                        resolve();
+                    };
+                    video.onerror = (e) => {
+                        console.error('视频加载错误:', e);
+                        reject(e);
+                    };
+                    // 添加超时处理
+                    setTimeout(() => reject(new Error('加载超时')), 15000);
+                });
+
+                statusText.textContent = '加载完成，可以开始播放';
+                statusText.style.color = 'green';
+                playBtn.disabled = false;
+            } catch (err) {
+                statusText.textContent = `加载失败：${err.message || '视频地址无效或网络错误'}`;
+                statusText.style.color = 'red';
+                console.error('视频加载错误:', err);
+            }
+        }
+
+        // 视频元数据加载完成后初始化音轨
+        video.addEventListener('loadedmetadata', () => {
+            console.log('视频元数据已加载');
+
+            // 检查并显示可用的音频轨道信息
+            const audioTracks = video.audioTracks;
+            const textTracks = video.textTracks;
+
+            console.log('AudioTracks数量:', audioTracks ? audioTracks.length : 0);
+            console.log('TextTracks数量:', textTracks ? textTracks.length : 0);
+
+            // 清空现有的音轨选项
+            trackRadioGroup.innerHTML = '';
+
+            // 尝试使用audioTracks
+            if (audioTracks && audioTracks.length > 0) {
+                console.log('使用AudioTracks');
+                for (let i = 0; i < audioTracks.length; i++) {
+                    const track = audioTracks[i];
+                    const radioItem = document.createElement('div');
+                    radioItem.className = 'radio-item';
+
+                    const radio = document.createElement('input');
+                    radio.type = 'radio';
+                    radio.name = 'audioTrack';
+                    radio.id = `track${i}`;
+                    radio.value = i;
+                    radio.checked = track.enabled;
+
+                    const label = document.createElement('label');
+                    label.htmlFor = `track${i}`;
+                    label.textContent = track.label || track.language || `音轨 ${i + 1}`;
+
+                    radioItem.appendChild(radio);
+                    radioItem.appendChild(label);
+                    trackRadioGroup.appendChild(radioItem);
+
+                    console.log(`音轨 ${i}:`, track.label, track.language, track.enabled);
+
+                    // 添加音轨切换事件
+                    radio.addEventListener('change', () => {
+                        if (radio.checked) {
+                            console.log('切换到音轨:', i);
+                            // 禁用所有音轨
+                            for (let j = 0; j < audioTracks.length; j++) {
+                                audioTracks[j].enabled = false;
+                            }
+                            // 启用选中的音轨
+                            audioTracks[i].enabled = true;
+                            console.log('已启用音轨:', i);
+                        }
+                    });
+                }
+            }
+            // 如果没有多个音轨，显示默认选项
+            else {
+                const radioItem = document.createElement('div');
+                radioItem.className = 'radio-item';
+
+                const radio = document.createElement('input');
+                radio.type = 'radio';
+                radio.name = 'audioTrack';
+                radio.id = 'track0';
+                radio.value = '0';
+                radio.checked = true;
+
+                const label = document.createElement('label');
+                label.htmlFor = 'track0';
+                label.textContent = '默认音轨';
+
+                radioItem.appendChild(radio);
+                radioItem.appendChild(label);
+                trackRadioGroup.appendChild(radioItem);
+                console.log('只有一个默认音轨');
+            }
+        });
+
+        // 播放控制
+        playBtn.addEventListener('click', async () => {
+            try {
+                console.log('点击播放按钮');
+
+                // 初始化音频上下文（必须在用户交互后创建）
+                if (!isAudioContextInitialized) {
+                    console.log('初始化音频上下文...');
+                    await initAudioContext();
+                }
+
+                // 确保音频上下文在运行状态
+                if (audioContext && audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 播放视频
+                await video.play();
+                console.log('视频开始播放');
+
+                // 更新按钮状态
+                playBtn.disabled = true;
+                pauseBtn.disabled = false;
+
+                statusText.textContent = '正在播放，音频频谱可视化已启动';
+                statusText.style.color = 'green';
+
+            } catch (err) {
+                console.error('播放失败:', err);
+                statusText.textContent = `播放失败：${err.message}`;
+                statusText.style.color = 'red';
+            }
+        });
+
+        pauseBtn.addEventListener('click', () => {
+            video.pause();
+
+            // 更新按钮状态
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+        });
+
+        muteBtn.addEventListener('click', () => {
+            video.muted = !video.muted;
+            muteBtn.textContent = video.muted ? '取消静音' : '静音';
+        });
+
+        // 测试音频按钮
+        testAudioBtn.addEventListener('click', async () => {
+            console.log('=== 音频调试信息 ===');
+            console.log('视频元素状态:');
+            console.log('- 是否暂停:', video.paused);
+            console.log('- 是否静音:', video.muted);
+            console.log('- 音量:', video.volume);
+            console.log('- 当前时间:', video.currentTime);
+            console.log('- 总时长:', video.duration);
+
+            console.log('音频上下文状态:');
+            console.log('- 是否初始化:', isAudioContextInitialized);
+            console.log('- 状态:', audioContext ? audioContext.state : '未创建');
+            console.log('- 采样率:', audioContext ? audioContext.sampleRate : 'N/A');
+
+            console.log('音频节点状态:');
+            console.log('- MediaElementSource:', !!mediaElementSource);
+            console.log('- Analyser:', !!analyser);
+            console.log('- GainNode:', !!gainNode);
+
+            if (analyser) {
+                const testData = new Uint8Array(analyser.frequencyBinCount);
+                analyser.getByteFrequencyData(testData);
+                const hasData = testData.some(v => v > 0);
+                const maxVal = Math.max(...testData);
+                console.log('- 频谱数据:', hasData ? `有数据 (最大值: ${maxVal})` : '无数据');
+            }
+
+            // 尝试播放测试音频
+            if (!video.paused) {
+                console.log('视频正在播放，检查音频输出...');
+                setTimeout(() => {
+                    if (analyser) {
+                        const data = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(data);
+                        console.log('延迟检查频谱数据:', data.slice(0, 10));
+                    }
+                }, 1000);
+            }
+        });
+
+        volumeInput.addEventListener('input', (e) => {
+            const volume = parseFloat(e.target.value);
+            video.volume = volume;
+
+            // 如果有增益节点，也同步更新
+            if (gainNode) {
+                gainNode.gain.value = volume;
+                console.log('音量已更新:', volume);
+            }
+        });
+
+        // 播放速度控制
+        document.querySelectorAll('input[name="playbackRate"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const playbackRate = parseFloat(e.target.value);
+                    video.playbackRate = playbackRate;
+
+                    const rateText = playbackRate === 1 ? '正常速度' : `${playbackRate}x 速度`;
+                    console.log('播放速度已改变为:', rateText);
+
+                    // 如果视频正在播放，显示速度变化提示
+                    if (!video.paused) {
+                        const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+                        const pitchText = currentPitchShift === '0' ? '原调' :
+                            (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+                        statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+                        statusText.style.color = '#4CAF50';
+                    }
+                }
+            });
+        });
+
+        // 音调变换控制
+        document.querySelectorAll('input[name="pitchShift"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const pitchShift = parseInt(e.target.value);
+                    applyPitchShift(pitchShift);
+                }
+            });
+        });
+
+        // 监听视频播放状态变化
+        video.addEventListener('play', async () => {
+            console.log('视频播放事件触发');
+
+            // 更新按钮状态
+            playBtn.disabled = true;
+            pauseBtn.disabled = false;
+
+            // 更新状态显示，包含当前播放速度和音调
+            const currentRate = video.playbackRate;
+            const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+            const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+            const pitchText = currentPitchShift === '0' ? '原调' :
+                (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+            statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            statusText.style.color = '#4CAF50';
+
+            // 检查音频状态
+            console.log('视频音量:', video.volume, '静音状态:', video.muted);
+            console.log('音频上下文状态:', audioContext ? audioContext.state : '未初始化');
+
+            if (audioContext && audioContext.state === 'suspended') {
+                await audioContext.resume();
+                console.log('音频上下文在播放时恢复');
+            }
+
+            if (isAudioContextInitialized && analyser) {
+                console.log('重新启动可视化');
+                startVisualization();
+            }
+        });
+
+        video.addEventListener('pause', () => {
+            console.log('视频暂停');
+            stopVisualization();
+
+            // 更新按钮状态
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+        });
+
+        video.addEventListener('ended', () => {
+            console.log('视频播放结束');
+            stopVisualization();
+
+            // 重置按钮状态
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+
+            statusText.textContent = '播放结束';
+            statusText.style.color = '#666';
+        });
+
+        // 添加音频相关的事件监听
+        video.addEventListener('volumechange', () => {
+            console.log('音量变化:', video.volume, '静音:', video.muted);
+        });
+
+        video.addEventListener('loadstart', () => {
+            console.log('开始加载视频');
+        });
+
+        video.addEventListener('canplay', () => {
+            console.log('视频可以播放');
+            console.log('视频时长:', video.duration);
+            console.log('视频是否有音频:', !video.muted && video.volume > 0);
+        });
+
+        // 画布尺寸适配
+        window.addEventListener('resize', resizeCanvas);
+
+        // 初始化画布尺寸
+        resizeCanvas();
+
+
+        // 如果DOM已经加载完成，立即加载视频
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', loadVideo);
+        } else {
+            loadVideo();
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html.v8 b/index.html.v8
new file mode 100644
index 0000000..912886e
--- /dev/null
+++ b/index.html.v8
@@ -0,0 +1,961 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>自定义视频音频播放器</title>
+    <script>
+        const VIDEO_URL = 'http://localhost:8000/demo01.mp4';
+        // const VIDEO_URL = 'http://localhost:8000/demo02.mp4';
+        // const VIDEO_URL = 'http://localhost:8000/demo03.mp4';
+    </script>
+    <style>
+        .container {
+            max-width: 1000px;
+            margin: 20px auto;
+            padding: 0 20px;
+        }
+
+        .video-box {
+            width: 100%;
+            position: relative;
+        }
+
+        video {
+            width: 100%;
+            border-radius: 8px;
+        }
+
+        .controls {
+            margin: 15px 0;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .control-group {
+            margin: 10px 0;
+            padding: 10px;
+            border: 1px solid #eee;
+            border-radius: 6px;
+            background: #fafafa;
+        }
+
+        .control-group h4 {
+            margin: 0 0 8px 0;
+            font-size: 14px;
+            color: #333;
+        }
+
+        .radio-group {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .radio-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        .radio-item input[type="radio"] {
+            margin: 0;
+        }
+
+        .radio-item label {
+            font-size: 13px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        button {
+            padding: 8px 16px;
+            cursor: pointer;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #f5f5f5;
+        }
+
+        button:hover {
+            background: #eee;
+        }
+
+        input[type="text"] {
+            flex: 1;
+            max-width: 400px;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        input[type="range"] {
+            width: 150px;
+        }
+
+        #visualizer {
+            border: 1px solid #eee;
+            margin-top: 20px;
+            width: 100%;
+            height: 150px;
+            border-radius: 4px;
+        }
+
+        .status {
+            color: #666;
+            margin-top: 5px;
+        }
+
+        .progress-container {
+            margin: 15px 0;
+            position: relative;
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background: #e0e0e0;
+            border-radius: 4px;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #4CAF50, #45a049);
+            border-radius: 4px;
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+
+        .progress-info {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 5px;
+            font-size: 12px;
+            color: #666;
+        }
+
+        .time-display {
+            font-family: monospace;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <h2>自定义视频音频播放器</h2>
+
+        <div class="status" id="statusText">正在自动加载视频...</div>
+
+        <div class="video-box">
+            <video id="video" crossorigin="anonymous"></video>
+        </div>
+
+        <div class="controls">
+            <button id="playBtn" disabled>播放</button>
+            <button id="pauseBtn" disabled>暂停</button>
+            <button id="muteBtn">静音</button>
+            <button id="testAudioBtn">测试音频</button>
+            <span>音量：</span>
+            <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
+        </div>
+
+        <div class="progress-container">
+            <div class="progress-bar" id="progressBar">
+                <div class="progress-fill" id="progressFill"></div>
+            </div>
+            <div class="progress-info">
+                <span class="time-display" id="currentTime">00:00</span>
+                <span class="time-display" id="duration">00:00</span>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>音轨选择</h4>
+            <div class="radio-group" id="trackRadioGroup">
+                <div class="radio-item">
+                    <input type="radio" id="track0" name="audioTrack" value="0" checked>
+                    <label for="track0">默认音轨</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>播放速度</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="rate05" name="playbackRate" value="0.5">
+                    <label for="rate05">0.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate075" name="playbackRate" value="0.75">
+                    <label for="rate075">0.75x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate1" name="playbackRate" value="1" checked>
+                    <label for="rate1">1x (正常)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate125" name="playbackRate" value="1.25">
+                    <label for="rate125">1.25x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate15" name="playbackRate" value="1.5">
+                    <label for="rate15">1.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate2" name="playbackRate" value="2">
+                    <label for="rate2">2x</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>音调变换</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="pitch-12" name="pitchShift" value="-12">
+                    <label for="pitch-12">降一个八度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-7" name="pitchShift" value="-7">
+                    <label for="pitch-7">降五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-5" name="pitchShift" value="-5">
+                    <label for="pitch-5">降四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-3" name="pitchShift" value="-3">
+                    <label for="pitch-3">降小三度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-2" name="pitchShift" value="-2">
+                    <label for="pitch-2">降大二度 (C→B♭)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-1" name="pitchShift" value="-1">
+                    <label for="pitch-1">降小二度 (C→B)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch0" name="pitchShift" value="0" checked>
+                    <label for="pitch0">原调</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch1" name="pitchShift" value="1">
+                    <label for="pitch1">升小二度 (C→C#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch2" name="pitchShift" value="2">
+                    <label for="pitch2">升大二度 (C→D)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch3" name="pitchShift" value="3">
+                    <label for="pitch3">升小三度 (C→D#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch4" name="pitchShift" value="4">
+                    <label for="pitch4">升大三度 (C→E)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch5" name="pitchShift" value="5">
+                    <label for="pitch5">升四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch7" name="pitchShift" value="7">
+                    <label for="pitch7">升五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch12" name="pitchShift" value="12">
+                    <label for="pitch12">升一个八度</label>
+                </div>
+            </div>
+        </div>
+
+        <h3>音频频谱可视化</h3>
+        <canvas id="visualizer"></canvas>
+    </div>
+
+    <script>
+        const video = document.getElementById('video');
+        const playBtn = document.getElementById('playBtn');
+        const pauseBtn = document.getElementById('pauseBtn');
+        const muteBtn = document.getElementById('muteBtn');
+        const testAudioBtn = document.getElementById('testAudioBtn');
+        const volumeInput = document.getElementById('volume');
+        const trackRadioGroup = document.getElementById('trackRadioGroup');
+        const statusText = document.getElementById('statusText');
+        const canvas = document.getElementById('visualizer');
+        const ctx = canvas.getContext('2d');
+        const progressBar = document.getElementById('progressBar');
+        const progressFill = document.getElementById('progressFill');
+        const currentTimeDisplay = document.getElementById('currentTime');
+        const durationDisplay = document.getElementById('duration');
+
+        // 固定视频地址 - 使用支持CORS的视频源
+
+        let audioContext;
+        let analyser;
+        let mediaElementSource;
+        let animationId;
+        let gainNode;
+        let soundTouchNode;
+        let currentPitchShift = 0;
+        let isAudioContextInitialized = false;
+        let isWorkletRegistered = false;
+
+        // 设置画布尺寸
+        function resizeCanvas() {
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+        }
+
+        // 格式化时间显示（秒转换为 mm:ss 格式）
+        function formatTime(seconds) {
+            if (isNaN(seconds) || !isFinite(seconds)) {
+                return '00:00';
+            }
+            const minutes = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+
+        // 更新进度条
+        function updateProgress() {
+            if (video.duration && isFinite(video.duration)) {
+                const progress = (video.currentTime / video.duration) * 100;
+                progressFill.style.width = `${progress}%`;
+                currentTimeDisplay.textContent = formatTime(video.currentTime);
+                durationDisplay.textContent = formatTime(video.duration);
+            }
+        }
+
+        // 处理进度条点击跳转
+        function handleProgressBarClick(event) {
+            const rect = progressBar.getBoundingClientRect();
+            const clickX = event.clientX - rect.left;
+            const progressBarWidth = rect.width;
+            const clickRatio = clickX / progressBarWidth;
+
+            if (video.duration && isFinite(video.duration)) {
+                const newTime = clickRatio * video.duration;
+                video.currentTime = Math.max(0, Math.min(newTime, video.duration));
+                console.log(`跳转到: ${formatTime(newTime)}`);
+            }
+        }
+
+        // 创建 SoundTouch AudioWorkletNode (现代化音调变换)
+        async function createSoundTouchNode(audioContext) {
+            try {
+                // 首先注册 AudioWorklet 处理器
+                if (!isWorkletRegistered) {
+                    console.log('注册 SoundTouch AudioWorklet...');
+                    await audioContext.audioWorklet.addModule('https://cdn.jsdelivr.net/npm/@soundtouchjs/audio-worklet@0.2.1/dist/soundtouch-worklet.js');
+                    isWorkletRegistered = true;
+                    console.log('SoundTouch AudioWorklet 注册成功');
+                }
+
+                // 创建 AudioWorkletNode
+                const workletNode = new AudioWorkletNode(audioContext, 'soundtouch-processor');
+                console.log('SoundTouch AudioWorkletNode 创建成功');
+
+                return workletNode;
+            } catch (error) {
+                console.error('创建 SoundTouch 节点失败:', error);
+                // 如果失败，返回一个直通节点
+                return createPassThroughNode(audioContext);
+            }
+        }
+
+        // 创建直通节点作为后备方案
+        function createPassThroughNode(audioContext) {
+            console.log('创建直通节点作为后备方案');
+            const gainNode = audioContext.createGain();
+            gainNode.gain.value = 1.0;
+            return gainNode;
+        }
+
+        // 应用音调变换
+        function applyPitchShift(semitones) {
+            currentPitchShift = semitones;
+            console.log('音调变换设置为:', semitones, '半音');
+
+            // 如果有 SoundTouch 节点，设置音调参数
+            if (soundTouchNode && soundTouchNode.parameters) {
+                try {
+                    // 使用 pitchSemitones 参数来设置半音变换
+                    const pitchSemitonesParam = soundTouchNode.parameters.get('pitchSemitones');
+                    if (pitchSemitonesParam) {
+                        pitchSemitonesParam.value = semitones;
+                        console.log('SoundTouch 音调半音设置为:', semitones);
+                    } else {
+                        console.warn('pitchSemitones 参数不可用，尝试使用 pitch 参数');
+                        // 备选方案：使用 pitch 参数（比率）
+                        const pitchParam = soundTouchNode.parameters.get('pitch');
+                        if (pitchParam) {
+                            const pitchRatio = Math.pow(2, semitones / 12);
+                            pitchParam.value = pitchRatio;
+                            console.log('SoundTouch 音调比率设置为:', pitchRatio);
+                        }
+                    }
+                } catch (error) {
+                    console.warn('设置 SoundTouch 参数时出错:', error);
+                }
+            }
+
+            // 更新状态显示
+            if (!video.paused) {
+                const pitchText = semitones === 0 ? '原调' :
+                    (semitones > 0 ? `升${semitones}半音` : `降${Math.abs(semitones)}半音`);
+                const currentRate = video.playbackRate;
+                const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+                statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            }
+        }
+
+        // 初始化音频上下文（需用户交互触发）
+        async function initAudioContext() {
+            try {
+                if (isAudioContextInitialized) {
+                    console.log('音频上下文已经初始化，跳过');
+                    return;
+                }
+
+                console.log('开始初始化音频上下文...');
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+                // 如果音频上下文被暂停，恢复它
+                if (audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 创建媒体元素源
+                mediaElementSource = audioContext.createMediaElementSource(video);
+                console.log('媒体元素源已创建');
+
+                // 创建分析器节点
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 1024;  // 增加分辨率
+                analyser.smoothingTimeConstant = 0.8;
+                console.log('分析器节点已创建，fftSize:', analyser.fftSize);                // 创建增益节点（用于音量控制）
+                gainNode = audioContext.createGain();
+                gainNode.gain.value = 1.0;
+                console.log('增益节点已创建');
+
+                // 创建 SoundTouch 音调变换节点
+                soundTouchNode = await createSoundTouchNode(audioContext);
+                console.log('SoundTouch 节点已创建');
+
+                // 连接音频节点链：视频 -> SoundTouch -> 分析器 -> 增益 -> 输出
+                mediaElementSource.connect(soundTouchNode);
+                soundTouchNode.connect(analyser);
+                analyser.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                console.log('音频节点链已连接（使用 SoundTouch AudioWorklet）');
+
+                isAudioContextInitialized = true;
+                console.log('音频上下文初始化成功！');
+
+                // 立即开始可视化
+                startVisualization();
+
+                // 测试音频数据
+                setTimeout(() => {
+                    if (analyser) {
+                        const testArray = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(testArray);
+                        const hasData = testArray.some(value => value > 0);
+                        console.log('测试音频数据 - 有数据:', hasData);
+                        if (hasData) {
+                            console.log('前10个频谱值:', Array.from(testArray.slice(0, 10)));
+                        }
+                    }
+                }, 2000);
+
+            } catch (error) {
+                console.error('音频上下文初始化失败:', error);
+                // 如果音频上下文初始化失败，至少确保视频能播放
+                isAudioContextInitialized = false;
+            }
+        }
+
+        // 启动可视化
+        function startVisualization() {
+            if (!analyser) {
+                console.warn('分析器节点不存在，启动模拟可视化');
+                startMockVisualization();
+                return;
+            }
+
+            // 如果已经在运行动画，先停止
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            console.log('可视化已启动，缓冲区长度:', bufferLength);
+
+            function draw() {
+                if (!analyser) {
+                    console.warn('分析器节点丢失，停止绘制');
+                    return;
+                }
+
+                // 获取频谱数据
+                analyser.getByteFrequencyData(dataArray);
+
+                // 检查是否有音频数据
+                let hasAudioData = false;
+                let maxValue = 0;
+                for (let i = 0; i < dataArray.length; i++) {
+                    if (dataArray[i] > 0) {
+                        hasAudioData = true;
+                        maxValue = Math.max(maxValue, dataArray[i]);
+                    }
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                if (hasAudioData) {
+                    // console.log('检测到音频数据，最大值:', maxValue);
+                    // 绘制频谱柱状图
+                    const barWidth = (canvas.width / bufferLength) * 2.5;
+                    let x = 0;
+
+                    for (let i = 0; i < bufferLength; i++) {
+                        const barHeight = (dataArray[i] / 255) * canvas.height;
+
+                        // 创建渐变色
+                        const hue = (i / bufferLength) * 360;
+                        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                        ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
+                        x += barWidth;
+                    }
+                } else {
+                    // 显示"无音频数据"提示
+                    ctx.fillStyle = '#999';
+                    ctx.font = '16px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('等待音频数据...', canvas.width / 2, canvas.height / 2);
+
+                    // 如果视频正在播放但没有音频数据，可能有问题
+                    if (!video.paused) {
+                        console.log('视频正在播放但没有音频数据');
+                    }
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 模拟可视化（当Web Audio API不可用时）
+        function startMockVisualization() {
+            console.log('启动模拟可视化');
+
+            function draw() {
+                if (video.paused) {
+                    return;
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                // 生成模拟频谱数据
+                const barCount = 50;
+                const barWidth = canvas.width / barCount;
+
+                for (let i = 0; i < barCount; i++) {
+                    // 根据时间生成动态数据
+                    const time = Date.now() * 0.001;
+                    const frequency = i * 0.2;
+                    const amplitude = Math.sin(time + frequency) * 0.5 + 0.5;
+                    const barHeight = amplitude * canvas.height * 0.8;
+
+                    // 创建渐变色
+                    const hue = (i / barCount) * 360;
+                    ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                    ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth - 1, barHeight);
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 停止可视化
+        function stopVisualization() {
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+                animationId = null;
+            }
+        }
+
+        // 自动加载视频
+        async function loadVideo() {
+            statusText.textContent = '加载中...';
+            statusText.style.color = '#666';
+            playBtn.disabled = true;
+            pauseBtn.disabled = true;
+
+            try {
+                // 使用固定的视频地址，添加CORS支持
+                video.crossOrigin = 'anonymous';
+                video.src = VIDEO_URL;
+
+                console.log('开始加载视频:', VIDEO_URL);
+
+                await new Promise((resolve, reject) => {
+                    video.onloadedmetadata = () => {
+                        console.log('视频元数据加载完成');
+                        console.log('视频时长:', video.duration);
+                        console.log('视频尺寸:', video.videoWidth, 'x', video.videoHeight);
+                        resolve();
+                    };
+                    video.onerror = (e) => {
+                        console.error('视频加载错误:', e);
+                        reject(e);
+                    };
+                    // 添加超时处理
+                    setTimeout(() => reject(new Error('加载超时')), 15000);
+                });
+
+                statusText.textContent = '加载完成，可以开始播放';
+                statusText.style.color = 'green';
+                playBtn.disabled = false;
+            } catch (err) {
+                statusText.textContent = `加载失败：${err.message || '视频地址无效或网络错误'}`;
+                statusText.style.color = 'red';
+                console.error('视频加载错误:', err);
+            }
+        }
+
+        // 视频元数据加载完成后初始化音轨
+        video.addEventListener('loadedmetadata', () => {
+            console.log('视频元数据已加载');
+
+            // 初始化进度条
+            updateProgress();
+
+            // 检查并显示可用的音频轨道信息
+            const audioTracks = video.audioTracks;
+            const textTracks = video.textTracks;
+
+            console.log('AudioTracks数量:', audioTracks ? audioTracks.length : 0);
+            console.log('TextTracks数量:', textTracks ? textTracks.length : 0);
+
+            // 清空现有的音轨选项
+            trackRadioGroup.innerHTML = '';
+
+            // 尝试使用audioTracks
+            if (audioTracks && audioTracks.length > 0) {
+                console.log('使用AudioTracks');
+                for (let i = 0; i < audioTracks.length; i++) {
+                    const track = audioTracks[i];
+                    const radioItem = document.createElement('div');
+                    radioItem.className = 'radio-item';
+
+                    const radio = document.createElement('input');
+                    radio.type = 'radio';
+                    radio.name = 'audioTrack';
+                    radio.id = `track${i}`;
+                    radio.value = i;
+                    radio.checked = track.enabled;
+
+                    const label = document.createElement('label');
+                    label.htmlFor = `track${i}`;
+                    label.textContent = track.label || track.language || `音轨 ${i + 1}`;
+
+                    radioItem.appendChild(radio);
+                    radioItem.appendChild(label);
+                    trackRadioGroup.appendChild(radioItem);
+
+                    console.log(`音轨 ${i}:`, track.label, track.language, track.enabled);
+
+                    // 添加音轨切换事件
+                    radio.addEventListener('change', () => {
+                        if (radio.checked) {
+                            console.log('切换到音轨:', i);
+                            // 禁用所有音轨
+                            for (let j = 0; j < audioTracks.length; j++) {
+                                audioTracks[j].enabled = false;
+                            }
+                            // 启用选中的音轨
+                            audioTracks[i].enabled = true;
+                            console.log('已启用音轨:', i);
+                        }
+                    });
+                }
+            }
+            // 如果没有多个音轨，显示默认选项
+            else {
+                const radioItem = document.createElement('div');
+                radioItem.className = 'radio-item';
+
+                const radio = document.createElement('input');
+                radio.type = 'radio';
+                radio.name = 'audioTrack';
+                radio.id = 'track0';
+                radio.value = '0';
+                radio.checked = true;
+
+                const label = document.createElement('label');
+                label.htmlFor = 'track0';
+                label.textContent = '默认音轨';
+
+                radioItem.appendChild(radio);
+                radioItem.appendChild(label);
+                trackRadioGroup.appendChild(radioItem);
+                console.log('只有一个默认音轨');
+            }
+        });
+
+        // 播放控制
+        playBtn.addEventListener('click', async () => {
+            try {
+                console.log('点击播放按钮');
+
+                // 初始化音频上下文（必须在用户交互后创建）
+                if (!isAudioContextInitialized) {
+                    console.log('初始化音频上下文...');
+                    await initAudioContext();
+                }
+
+                // 确保音频上下文在运行状态
+                if (audioContext && audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 播放视频
+                await video.play();
+                console.log('视频开始播放');
+
+                // 更新按钮状态
+                playBtn.disabled = true;
+                pauseBtn.disabled = false;
+
+                statusText.textContent = '正在播放，音频频谱可视化已启动';
+                statusText.style.color = 'green';
+
+            } catch (err) {
+                console.error('播放失败:', err);
+                statusText.textContent = `播放失败：${err.message}`;
+                statusText.style.color = 'red';
+            }
+        });
+
+        pauseBtn.addEventListener('click', () => {
+            video.pause();
+
+            // 更新按钮状态
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+        });
+
+        muteBtn.addEventListener('click', () => {
+            video.muted = !video.muted;
+            muteBtn.textContent = video.muted ? '取消静音' : '静音';
+        });
+
+        // 测试音频按钮
+        testAudioBtn.addEventListener('click', async () => {
+            console.log('=== 音频调试信息 ===');
+            console.log('视频元素状态:');
+            console.log('- 是否暂停:', video.paused);
+            console.log('- 是否静音:', video.muted);
+            console.log('- 音量:', video.volume);
+            console.log('- 当前时间:', video.currentTime);
+            console.log('- 总时长:', video.duration);
+
+            console.log('音频上下文状态:');
+            console.log('- 是否初始化:', isAudioContextInitialized);
+            console.log('- 状态:', audioContext ? audioContext.state : '未创建');
+            console.log('- 采样率:', audioContext ? audioContext.sampleRate : 'N/A');
+
+            console.log('音频节点状态:');
+            console.log('- MediaElementSource:', !!mediaElementSource);
+            console.log('- Analyser:', !!analyser);
+            console.log('- GainNode:', !!gainNode);
+
+            if (analyser) {
+                const testData = new Uint8Array(analyser.frequencyBinCount);
+                analyser.getByteFrequencyData(testData);
+                const hasData = testData.some(v => v > 0);
+                const maxVal = Math.max(...testData);
+                console.log('- 频谱数据:', hasData ? `有数据 (最大值: ${maxVal})` : '无数据');
+            }
+
+            // 尝试播放测试音频
+            if (!video.paused) {
+                console.log('视频正在播放，检查音频输出...');
+                setTimeout(() => {
+                    if (analyser) {
+                        const data = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(data);
+                        console.log('延迟检查频谱数据:', data.slice(0, 10));
+                    }
+                }, 1000);
+            }
+        });
+
+        volumeInput.addEventListener('input', (e) => {
+            const volume = parseFloat(e.target.value);
+            video.volume = volume;
+
+            // 如果有增益节点，也同步更新
+            if (gainNode) {
+                gainNode.gain.value = volume;
+                console.log('音量已更新:', volume);
+            }
+        });
+
+        // 播放速度控制
+        document.querySelectorAll('input[name="playbackRate"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const playbackRate = parseFloat(e.target.value);
+                    video.playbackRate = playbackRate;
+
+                    const rateText = playbackRate === 1 ? '正常速度' : `${playbackRate}x 速度`;
+                    console.log('播放速度已改变为:', rateText);
+
+                    // 如果视频正在播放，显示速度变化提示
+                    if (!video.paused) {
+                        const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+                        const pitchText = currentPitchShift === '0' ? '原调' :
+                            (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+                        statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+                        statusText.style.color = '#4CAF50';
+                    }
+                }
+            });
+        });
+
+        // 音调变换控制
+        document.querySelectorAll('input[name="pitchShift"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const pitchShift = parseInt(e.target.value);
+                    applyPitchShift(pitchShift);
+                }
+            });
+        });
+
+        // 监听视频播放状态变化
+        video.addEventListener('play', async () => {
+            console.log('视频播放事件触发');
+
+            // 更新按钮状态
+            playBtn.disabled = true;
+            pauseBtn.disabled = false;
+
+            // 更新状态显示，包含当前播放速度和音调
+            const currentRate = video.playbackRate;
+            const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+            const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+            const pitchText = currentPitchShift === '0' ? '原调' :
+                (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+            statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            statusText.style.color = '#4CAF50';
+
+            // 检查音频状态
+            console.log('视频音量:', video.volume, '静音状态:', video.muted);
+            console.log('音频上下文状态:', audioContext ? audioContext.state : '未初始化');
+
+            if (audioContext && audioContext.state === 'suspended') {
+                await audioContext.resume();
+                console.log('音频上下文在播放时恢复');
+            }
+
+            if (isAudioContextInitialized && analyser) {
+                console.log('重新启动可视化');
+                startVisualization();
+            }
+        });
+
+        video.addEventListener('pause', () => {
+            console.log('视频暂停');
+            stopVisualization();
+
+            // 更新按钮状态
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+        });
+
+        video.addEventListener('ended', () => {
+            console.log('视频播放结束');
+            stopVisualization();
+
+            // 重置按钮状态
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+
+            statusText.textContent = '播放结束';
+            statusText.style.color = '#666';
+        });
+
+        // 添加音频相关的事件监听
+        video.addEventListener('volumechange', () => {
+            console.log('音量变化:', video.volume, '静音:', video.muted);
+        });
+
+        video.addEventListener('loadstart', () => {
+            console.log('开始加载视频');
+        });
+
+        video.addEventListener('canplay', () => {
+            console.log('视频可以播放');
+            console.log('视频时长:', video.duration);
+            console.log('视频是否有音频:', !video.muted && video.volume > 0);
+
+            // 更新进度条显示
+            updateProgress();
+        });
+
+        // 进度条相关事件监听
+        video.addEventListener('timeupdate', updateProgress);
+        video.addEventListener('durationchange', updateProgress);
+        video.addEventListener('loadeddata', updateProgress);
+
+        // 进度条点击跳转
+        progressBar.addEventListener('click', handleProgressBarClick);
+
+        // 画布尺寸适配
+        window.addEventListener('resize', resizeCanvas);
+
+        // 初始化画布尺寸
+        resizeCanvas();
+
+
+        // 如果DOM已经加载完成，立即加载视频
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', loadVideo);
+        } else {
+            loadVideo();
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html.v9 b/index.html.v9
new file mode 100644
index 0000000..4371299
--- /dev/null
+++ b/index.html.v9
@@ -0,0 +1,1015 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>自定义视频音频播放器</title>
+    <script src="https://cdn.jsdelivr.net/npm/video.js@8.22.0/dist/video.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/video.js@8.22.0/dist/video-js.min.css">
+    <script>
+        // const VIDEO_URL = 'output.mp4';
+        // const VIDEO_URL = 'merged_output.mp4';
+        const VIDEO_URL = 'merged_dual_track.mp4';
+        // const VIDEO_URL = 'demo01.mp4';
+        // const VIDEO_URL = 'demo02.mp4';
+        // const VIDEO_URL = 'demo03.mp4';
+    </script>
+    <style>
+        .container {
+            max-width: 1000px;
+            margin: 20px auto;
+            padding: 0 20px;
+        }
+
+        .video-box {
+            width: 100%;
+            position: relative;
+        }
+
+        .video-js {
+            width: 100%;
+            border-radius: 8px;
+        }
+
+        .video-js .vjs-tech {
+            border-radius: 8px;
+        }
+
+        /* Video.js 自定义样式 */
+        .video-js .vjs-big-play-button {
+            font-size: 3em;
+            line-height: 1.5em;
+            height: 1.5em;
+            width: 3em;
+            border-radius: 0.3em;
+            background-color: rgba(43, 51, 63, 0.7);
+            border: none;
+            margin-top: -0.75em;
+            margin-left: -1.5em;
+        }
+
+        .video-js .vjs-control-bar {
+            background: rgba(43, 51, 63, 0.7);
+            color: #fff;
+        }
+
+        .controls {
+            margin: 15px 0;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .control-group {
+            margin: 10px 0;
+            padding: 10px;
+            border: 1px solid #eee;
+            border-radius: 6px;
+            background: #fafafa;
+        }
+
+        .control-group h4 {
+            margin: 0 0 8px 0;
+            font-size: 14px;
+            color: #333;
+        }
+
+        .radio-group {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .radio-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        .radio-item input[type="radio"] {
+            margin: 0;
+        }
+
+        .radio-item label {
+            font-size: 13px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        button {
+            padding: 8px 16px;
+            cursor: pointer;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #f5f5f5;
+        }
+
+        button:hover {
+            background: #eee;
+        }
+
+        input[type="text"] {
+            flex: 1;
+            max-width: 400px;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        input[type="range"] {
+            width: 150px;
+        }
+
+        #visualizer {
+            border: 1px solid #eee;
+            margin-top: 20px;
+            width: 100%;
+            height: 150px;
+            border-radius: 4px;
+        }
+
+        .status {
+            color: #666;
+            margin-top: 5px;
+        }
+
+        .progress-container {
+            margin: 15px 0;
+            position: relative;
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background: #e0e0e0;
+            border-radius: 4px;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #4CAF50, #45a049);
+            border-radius: 4px;
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+
+        .progress-info {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 5px;
+            font-size: 12px;
+            color: #666;
+        }
+
+        .time-display {
+            font-family: monospace;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <h2>自定义视频音频播放器</h2>
+
+        <div class="status" id="statusText">正在自动加载视频...</div>
+
+        <div class="video-box">
+            <video id="video" class="video-js vjs-default-skin" crossorigin="anonymous" controls preload="auto"
+                data-setup='{}'>
+                <p class="vjs-no-js">
+                    要查看此视频，请启用 JavaScript，并考虑升级到
+                    <a href="https://videojs.com/html5-video-support/" target="_blank">
+                        支持HTML5视频的网络浏览器
+                    </a>。
+                </p>
+            </video>
+        </div>
+
+        <div class="controls">
+            <button id="playBtn" disabled>播放</button>
+            <button id="pauseBtn" disabled>暂停</button>
+            <button id="muteBtn">静音</button>
+            <button id="testAudioBtn">测试音频</button>
+            <span>音量：</span>
+            <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
+        </div>
+
+        <div class="progress-container">
+            <div class="progress-bar" id="progressBar">
+                <div class="progress-fill" id="progressFill"></div>
+            </div>
+            <div class="progress-info">
+                <span class="time-display" id="currentTime">00:00</span>
+                <span class="time-display" id="duration">00:00</span>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>音轨选择</h4>
+            <div class="radio-group" id="trackRadioGroup">
+                <div class="radio-item">
+                    <input type="radio" id="track0" name="audioTrack" value="0" checked>
+                    <label for="track0">默认音轨</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>播放速度</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="rate05" name="playbackRate" value="0.5">
+                    <label for="rate05">0.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate075" name="playbackRate" value="0.75">
+                    <label for="rate075">0.75x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate1" name="playbackRate" value="1" checked>
+                    <label for="rate1">1x (正常)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate125" name="playbackRate" value="1.25">
+                    <label for="rate125">1.25x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate15" name="playbackRate" value="1.5">
+                    <label for="rate15">1.5x</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="rate2" name="playbackRate" value="2">
+                    <label for="rate2">2x</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="control-group">
+            <h4>音调变换</h4>
+            <div class="radio-group">
+                <div class="radio-item">
+                    <input type="radio" id="pitch-12" name="pitchShift" value="-12">
+                    <label for="pitch-12">降一个八度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-7" name="pitchShift" value="-7">
+                    <label for="pitch-7">降五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-5" name="pitchShift" value="-5">
+                    <label for="pitch-5">降四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-3" name="pitchShift" value="-3">
+                    <label for="pitch-3">降小三度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-2" name="pitchShift" value="-2">
+                    <label for="pitch-2">降大二度 (C→B♭)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch-1" name="pitchShift" value="-1">
+                    <label for="pitch-1">降小二度 (C→B)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch0" name="pitchShift" value="0" checked>
+                    <label for="pitch0">原调</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch1" name="pitchShift" value="1">
+                    <label for="pitch1">升小二度 (C→C#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch2" name="pitchShift" value="2">
+                    <label for="pitch2">升大二度 (C→D)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch3" name="pitchShift" value="3">
+                    <label for="pitch3">升小三度 (C→D#)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch4" name="pitchShift" value="4">
+                    <label for="pitch4">升大三度 (C→E)</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch5" name="pitchShift" value="5">
+                    <label for="pitch5">升四度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch7" name="pitchShift" value="7">
+                    <label for="pitch7">升五度</label>
+                </div>
+                <div class="radio-item">
+                    <input type="radio" id="pitch12" name="pitchShift" value="12">
+                    <label for="pitch12">升一个八度</label>
+                </div>
+            </div>
+        </div>
+
+        <h3>音频频谱可视化</h3>
+        <canvas id="visualizer"></canvas>
+    </div>
+
+    <script>
+        // Video.js 播放器实例
+        let player;
+        let video; // 将在 Video.js 初始化后设置
+
+        const playBtn = document.getElementById('playBtn');
+        const pauseBtn = document.getElementById('pauseBtn');
+        const muteBtn = document.getElementById('muteBtn');
+        const testAudioBtn = document.getElementById('testAudioBtn');
+        const volumeInput = document.getElementById('volume');
+        const trackRadioGroup = document.getElementById('trackRadioGroup');
+        const statusText = document.getElementById('statusText');
+        const canvas = document.getElementById('visualizer');
+        const ctx = canvas.getContext('2d');
+        const progressBar = document.getElementById('progressBar');
+        const progressFill = document.getElementById('progressFill');
+        const currentTimeDisplay = document.getElementById('currentTime');
+        const durationDisplay = document.getElementById('duration');
+
+        // 固定视频地址 - 使用支持CORS的视频源
+
+        let audioContext;
+        let analyser;
+        let mediaElementSource;
+        let animationId;
+        let gainNode;
+        let soundTouchNode;
+        let currentPitchShift = 0;
+        let isAudioContextInitialized = false;
+        let isWorkletRegistered = false;
+
+        // 设置画布尺寸
+        function resizeCanvas() {
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+        }
+
+        // 格式化时间显示（秒转换为 mm:ss 格式）
+        function formatTime(seconds) {
+            if (isNaN(seconds) || !isFinite(seconds)) {
+                return '00:00';
+            }
+            const minutes = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+
+        // 更新进度条
+        function updateProgress() {
+            if (player && player.duration() && isFinite(player.duration())) {
+                const progress = (player.currentTime() / player.duration()) * 100;
+                progressFill.style.width = `${progress}%`;
+                currentTimeDisplay.textContent = formatTime(player.currentTime());
+                durationDisplay.textContent = formatTime(player.duration());
+            }
+        }
+
+        // 处理进度条点击跳转
+        function handleProgressBarClick(event) {
+            const rect = progressBar.getBoundingClientRect();
+            const clickX = event.clientX - rect.left;
+            const progressBarWidth = rect.width;
+            const clickRatio = clickX / progressBarWidth;
+
+            if (player && player.duration() && isFinite(player.duration())) {
+                const newTime = clickRatio * player.duration();
+                player.currentTime(Math.max(0, Math.min(newTime, player.duration())));
+                console.log(`跳转到: ${formatTime(newTime)}`);
+            }
+        }
+
+        // 创建 SoundTouch AudioWorkletNode (现代化音调变换)
+        async function createSoundTouchNode(audioContext) {
+            try {
+                // 首先注册 AudioWorklet 处理器
+                if (!isWorkletRegistered) {
+                    console.log('注册 SoundTouch AudioWorklet...');
+                    await audioContext.audioWorklet.addModule('https://cdn.jsdelivr.net/npm/@soundtouchjs/audio-worklet@0.2.1/dist/soundtouch-worklet.js');
+                    isWorkletRegistered = true;
+                    console.log('SoundTouch AudioWorklet 注册成功');
+                }
+
+                // 创建 AudioWorkletNode
+                const workletNode = new AudioWorkletNode(audioContext, 'soundtouch-processor');
+                console.log('SoundTouch AudioWorkletNode 创建成功');
+
+                return workletNode;
+            } catch (error) {
+                console.error('创建 SoundTouch 节点失败:', error);
+                // 如果失败，返回一个直通节点
+                return createPassThroughNode(audioContext);
+            }
+        }
+
+        // 创建直通节点作为后备方案
+        function createPassThroughNode(audioContext) {
+            console.log('创建直通节点作为后备方案');
+            const gainNode = audioContext.createGain();
+            gainNode.gain.value = 1.0;
+            return gainNode;
+        }
+
+        // 应用音调变换
+        function applyPitchShift(semitones) {
+            currentPitchShift = semitones;
+            console.log('音调变换设置为:', semitones, '半音');
+
+            // 如果有 SoundTouch 节点，设置音调参数
+            if (soundTouchNode && soundTouchNode.parameters) {
+                try {
+                    // 使用 pitchSemitones 参数来设置半音变换
+                    const pitchSemitonesParam = soundTouchNode.parameters.get('pitchSemitones');
+                    if (pitchSemitonesParam) {
+                        pitchSemitonesParam.value = semitones;
+                        console.log('SoundTouch 音调半音设置为:', semitones);
+                    } else {
+                        console.warn('pitchSemitones 参数不可用，尝试使用 pitch 参数');
+                        // 备选方案：使用 pitch 参数（比率）
+                        const pitchParam = soundTouchNode.parameters.get('pitch');
+                        if (pitchParam) {
+                            const pitchRatio = Math.pow(2, semitones / 12);
+                            pitchParam.value = pitchRatio;
+                            console.log('SoundTouch 音调比率设置为:', pitchRatio);
+                        }
+                    }
+                } catch (error) {
+                    console.warn('设置 SoundTouch 参数时出错:', error);
+                }
+            }
+
+            // 更新状态显示
+            if (!video.paused) {
+                const pitchText = semitones === 0 ? '原调' :
+                    (semitones > 0 ? `升${semitones}半音` : `降${Math.abs(semitones)}半音`);
+                const currentRate = player ? player.playbackRate() : 1;
+                const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+                statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            }
+        }
+
+        // 初始化音频上下文（需用户交互触发）
+        async function initAudioContext() {
+            try {
+                if (isAudioContextInitialized) {
+                    console.log('音频上下文已经初始化，跳过');
+                    return;
+                }
+
+                console.log('开始初始化音频上下文...');
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+                // 如果音频上下文被暂停，恢复它
+                if (audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 创建媒体元素源
+                mediaElementSource = audioContext.createMediaElementSource(video);
+                console.log('媒体元素源已创建');
+
+                // 创建分析器节点
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 1024;  // 增加分辨率
+                analyser.smoothingTimeConstant = 0.8;
+                console.log('分析器节点已创建，fftSize:', analyser.fftSize);                // 创建增益节点（用于音量控制）
+                gainNode = audioContext.createGain();
+                gainNode.gain.value = 1.0;
+                console.log('增益节点已创建');
+
+                // 创建 SoundTouch 音调变换节点
+                soundTouchNode = await createSoundTouchNode(audioContext);
+                console.log('SoundTouch 节点已创建');
+
+                // 连接音频节点链：视频 -> SoundTouch -> 分析器 -> 增益 -> 输出
+                mediaElementSource.connect(soundTouchNode);
+                soundTouchNode.connect(analyser);
+                analyser.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                console.log('音频节点链已连接（使用 SoundTouch AudioWorklet）');
+
+                isAudioContextInitialized = true;
+                console.log('音频上下文初始化成功！');
+
+                // 立即开始可视化
+                startVisualization();
+
+                // 测试音频数据
+                setTimeout(() => {
+                    if (analyser) {
+                        const testArray = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(testArray);
+                        const hasData = testArray.some(value => value > 0);
+                        console.log('测试音频数据 - 有数据:', hasData);
+                        if (hasData) {
+                            console.log('前10个频谱值:', Array.from(testArray.slice(0, 10)));
+                        }
+                    }
+                }, 2000);
+
+            } catch (error) {
+                console.error('音频上下文初始化失败:', error);
+                // 如果音频上下文初始化失败，至少确保视频能播放
+                isAudioContextInitialized = false;
+            }
+        }
+
+        // 启动可视化
+        function startVisualization() {
+            if (!analyser) {
+                console.warn('分析器节点不存在，启动模拟可视化');
+                startMockVisualization();
+                return;
+            }
+
+            // 如果已经在运行动画，先停止
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            console.log('可视化已启动，缓冲区长度:', bufferLength);
+
+            function draw() {
+                if (!analyser) {
+                    console.warn('分析器节点丢失，停止绘制');
+                    return;
+                }
+
+                // 获取频谱数据
+                analyser.getByteFrequencyData(dataArray);
+
+                // 检查是否有音频数据
+                let hasAudioData = false;
+                let maxValue = 0;
+                for (let i = 0; i < dataArray.length; i++) {
+                    if (dataArray[i] > 0) {
+                        hasAudioData = true;
+                        maxValue = Math.max(maxValue, dataArray[i]);
+                    }
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                if (hasAudioData) {
+                    // console.log('检测到音频数据，最大值:', maxValue);
+                    // 绘制频谱柱状图
+                    const barWidth = (canvas.width / bufferLength) * 2.5;
+                    let x = 0;
+
+                    for (let i = 0; i < bufferLength; i++) {
+                        const barHeight = (dataArray[i] / 255) * canvas.height;
+
+                        // 创建渐变色
+                        const hue = (i / bufferLength) * 360;
+                        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                        ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
+                        x += barWidth;
+                    }
+                } else {
+                    // 显示"无音频数据"提示
+                    ctx.fillStyle = '#999';
+                    ctx.font = '16px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('等待音频数据...', canvas.width / 2, canvas.height / 2);
+
+                    // 如果视频正在播放但没有音频数据，可能有问题
+                    if (player && !player.paused()) {
+                        console.log('视频正在播放但没有音频数据');
+                    }
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 模拟可视化（当Web Audio API不可用时）
+        function startMockVisualization() {
+            console.log('启动模拟可视化');
+
+            function draw() {
+                if (player && player.paused()) {
+                    return;
+                }
+
+                // 清空画布
+                ctx.fillStyle = 'rgb(240, 240, 240)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                // 生成模拟频谱数据
+                const barCount = 50;
+                const barWidth = canvas.width / barCount;
+
+                for (let i = 0; i < barCount; i++) {
+                    // 根据时间生成动态数据
+                    const time = Date.now() * 0.001;
+                    const frequency = i * 0.2;
+                    const amplitude = Math.sin(time + frequency) * 0.5 + 0.5;
+                    const barHeight = amplitude * canvas.height * 0.8;
+
+                    // 创建渐变色
+                    const hue = (i / barCount) * 360;
+                    ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+
+                    ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth - 1, barHeight);
+                }
+
+                animationId = requestAnimationFrame(draw);
+            }
+
+            draw();
+        }
+
+        // 停止可视化
+        function stopVisualization() {
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+                animationId = null;
+            }
+        }
+
+        // 初始化 Video.js 播放器
+        function initVideoPlayer() {
+            console.log('初始化 Video.js 播放器...');
+
+            player = videojs('video', {
+                controls: true,
+                fluid: true,
+                responsive: true,
+                playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
+                plugins: {
+                    // 可以在这里添加插件配置
+                }
+            });
+
+            // 获取底层的 HTML5 video 元素
+            video = player.tech(true).el();
+
+            player.ready(() => {
+                console.log('Video.js 播放器已准备就绪');
+
+                // 设置视频源
+                player.src({
+                    src: VIDEO_URL,
+                    type: 'video/mp4'
+                });
+
+                console.log('视频源已设置:', VIDEO_URL);
+                statusText.textContent = 'Video.js 播放器已初始化，视频源已加载';
+                statusText.style.color = 'green';
+
+                // 启用控制按钮
+                playBtn.disabled = false;
+                pauseBtn.disabled = false;
+            });
+
+            // Video.js 事件监听
+            player.on('loadedmetadata', () => {
+                console.log('Video.js: 视频元数据已加载');
+                console.log('视频时长:', player.duration());
+                console.log('视频尺寸:', player.videoWidth(), 'x', player.videoHeight());
+
+                // 初始化进度条
+                updateProgress();
+
+                // 处理音轨信息
+                handleAudioTracks();
+            });
+
+            player.on('play', () => {
+                console.log('Video.js: 播放开始');
+                handlePlayEvent();
+            });
+
+            player.on('pause', () => {
+                console.log('Video.js: 播放暂停');
+                handlePauseEvent();
+            });
+
+            player.on('ended', () => {
+                console.log('Video.js: 播放结束');
+                handleEndedEvent();
+            });
+
+            player.on('timeupdate', () => {
+                updateProgress();
+            });
+
+            player.on('volumechange', () => {
+                console.log('Video.js: 音量变化:', player.volume(), '静音:', player.muted());
+                // 同步到自定义音量控件
+                volumeInput.value = player.volume();
+                muteBtn.textContent = player.muted() ? '取消静音' : '静音';
+            });
+
+            player.on('error', (error) => {
+                console.error('Video.js 错误:', error);
+                statusText.textContent = `播放器错误: ${error.message || '未知错误'}`;
+                statusText.style.color = 'red';
+            });
+
+            return player;
+        }
+
+        // 处理音轨信息
+        function handleAudioTracks() {
+            console.log('处理音轨信息...');
+
+            // 清空现有的音轨选项
+            trackRadioGroup.innerHTML = '';
+
+            // 获取音轨信息
+            const audioTracks = video.audioTracks;
+
+            if (audioTracks && audioTracks.length > 0) {
+                console.log('发现', audioTracks.length, '个音轨');
+
+                for (let i = 0; i < audioTracks.length; i++) {
+                    const track = audioTracks[i];
+                    const radioItem = document.createElement('div');
+                    radioItem.className = 'radio-item';
+
+                    const radio = document.createElement('input');
+                    radio.type = 'radio';
+                    radio.name = 'audioTrack';
+                    radio.id = `track${i}`;
+                    radio.value = i;
+                    radio.checked = track.enabled;
+
+                    const label = document.createElement('label');
+                    label.htmlFor = `track${i}`;
+                    label.textContent = track.label || track.language || `音轨 ${i + 1}`;
+
+                    radioItem.appendChild(radio);
+                    radioItem.appendChild(label);
+                    trackRadioGroup.appendChild(radioItem);
+
+                    console.log(`音轨 ${i}:`, track.label, track.language, track.enabled);
+
+                    // 添加音轨切换事件
+                    radio.addEventListener('change', () => {
+                        if (radio.checked) {
+                            console.log('切换到音轨:', i);
+                            // 禁用所有音轨
+                            for (let j = 0; j < audioTracks.length; j++) {
+                                audioTracks[j].enabled = false;
+                            }
+                            // 启用选中的音轨
+                            audioTracks[i].enabled = true;
+                        }
+                    });
+                }
+            } else {
+                // 默认音轨
+                const radioItem = document.createElement('div');
+                radioItem.className = 'radio-item';
+
+                const radio = document.createElement('input');
+                radio.type = 'radio';
+                radio.name = 'audioTrack';
+                radio.id = 'track0';
+                radio.value = '0';
+                radio.checked = true;
+
+                const label = document.createElement('label');
+                label.htmlFor = 'track0';
+                label.textContent = '默认音轨';
+
+                radioItem.appendChild(radio);
+                radioItem.appendChild(label);
+                trackRadioGroup.appendChild(radioItem);
+
+                console.log('使用默认音轨配置');
+            }
+        }
+
+        // 处理播放事件
+        function handlePlayEvent() {
+            playBtn.disabled = true;
+            pauseBtn.disabled = false;
+
+            const currentRate = player.playbackRate();
+            const rateText = currentRate === 1 ? '正常速度' : `${currentRate}x 速度`;
+            const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+            const pitchText = currentPitchShift === '0' ? '原调' :
+                (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+            statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+            statusText.style.color = '#4CAF50';
+
+            // 启动音频可视化
+            if (isAudioContextInitialized && analyser) {
+                startVisualization();
+            }
+        }
+
+        // 处理暂停事件
+        function handlePauseEvent() {
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+            statusText.textContent = '视频已暂停';
+            statusText.style.color = '#666';
+            stopVisualization();
+        }
+
+        // 处理结束事件
+        function handleEndedEvent() {
+            playBtn.disabled = false;
+            pauseBtn.disabled = true;
+            statusText.textContent = '播放结束';
+            statusText.style.color = '#666';
+            stopVisualization();
+        }
+
+        // 播放控制
+        playBtn.addEventListener('click', async () => {
+            try {
+                console.log('点击播放按钮');
+
+                // 初始化音频上下文（必须在用户交互后创建）
+                if (!isAudioContextInitialized) {
+                    console.log('初始化音频上下文...');
+                    await initAudioContext();
+                }
+
+                // 确保音频上下文在运行状态
+                if (audioContext && audioContext.state === 'suspended') {
+                    await audioContext.resume();
+                    console.log('音频上下文已恢复');
+                }
+
+                // 使用 Video.js 播放
+                if (player) {
+                    await player.play();
+                    console.log('Video.js 开始播放');
+                } else {
+                    console.error('Video.js 播放器未初始化');
+                }
+
+            } catch (err) {
+                console.error('播放失败:', err);
+                statusText.textContent = `播放失败：${err.message}`;
+                statusText.style.color = 'red';
+            }
+        });
+
+        pauseBtn.addEventListener('click', () => {
+            if (player) {
+                player.pause();
+                console.log('Video.js 暂停播放');
+            }
+        });
+
+        muteBtn.addEventListener('click', () => {
+            if (player) {
+                player.muted(!player.muted());
+                muteBtn.textContent = player.muted() ? '取消静音' : '静音';
+                console.log('Video.js 静音状态:', player.muted());
+            }
+        });
+
+        // 测试音频按钮
+        testAudioBtn.addEventListener('click', async () => {
+            console.log('=== 音频调试信息 ===');
+            console.log('Video.js 播放器状态:');
+            if (player) {
+                console.log('- 是否暂停:', player.paused());
+                console.log('- 是否静音:', player.muted());
+                console.log('- 音量:', player.volume());
+                console.log('- 当前时间:', player.currentTime());
+                console.log('- 总时长:', player.duration());
+                console.log('- 播放速度:', player.playbackRate());
+            } else {
+                console.log('- Video.js 播放器未初始化');
+            }
+
+            console.log('底层视频元素状态:');
+            if (video) {
+                console.log('- 是否暂停:', video.paused);
+                console.log('- 是否静音:', video.muted);
+                console.log('- 音量:', video.volume);
+                console.log('- 当前时间:', video.currentTime);
+                console.log('- 总时长:', video.duration);
+            } else {
+                console.log('- 底层视频元素未获取');
+            }
+
+            console.log('音频上下文状态:');
+            console.log('- 是否初始化:', isAudioContextInitialized);
+            console.log('- 状态:', audioContext ? audioContext.state : '未创建');
+            console.log('- 采样率:', audioContext ? audioContext.sampleRate : 'N/A');
+
+            console.log('音频节点状态:');
+            console.log('- MediaElementSource:', !!mediaElementSource);
+            console.log('- Analyser:', !!analyser);
+            console.log('- GainNode:', !!gainNode);
+
+            if (analyser) {
+                const testData = new Uint8Array(analyser.frequencyBinCount);
+                analyser.getByteFrequencyData(testData);
+                const hasData = testData.some(v => v > 0);
+                const maxVal = Math.max(...testData);
+                console.log('- 频谱数据:', hasData ? `有数据 (最大值: ${maxVal})` : '无数据');
+            }
+
+            // 尝试播放测试音频
+            if (player && !player.paused()) {
+                console.log('视频正在播放，检查音频输出...');
+                setTimeout(() => {
+                    if (analyser) {
+                        const data = new Uint8Array(analyser.frequencyBinCount);
+                        analyser.getByteFrequencyData(data);
+                        console.log('延迟检查频谱数据:', data.slice(0, 10));
+                    }
+                }, 1000);
+            }
+        });
+
+        volumeInput.addEventListener('input', (e) => {
+            const volume = parseFloat(e.target.value);
+
+            // 同步到 Video.js
+            if (player) {
+                player.volume(volume);
+            }
+
+            // 如果有增益节点，也同步更新
+            if (gainNode) {
+                gainNode.gain.value = volume;
+            }
+
+            console.log('音量已更新:', volume);
+        });
+
+        // 播放速度控制
+        document.querySelectorAll('input[name="playbackRate"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const playbackRate = parseFloat(e.target.value);
+
+                    // 使用 Video.js 设置播放速度
+                    if (player) {
+                        player.playbackRate(playbackRate);
+                    }
+
+                    const rateText = playbackRate === 1 ? '正常速度' : `${playbackRate}x 速度`;
+                    console.log('播放速度已改变为:', rateText);
+
+                    // 如果视频正在播放，显示速度变化提示
+                    if (player && !player.paused()) {
+                        const currentPitchShift = document.querySelector('input[name="pitchShift"]:checked')?.value || '0';
+                        const pitchText = currentPitchShift === '0' ? '原调' :
+                            (parseInt(currentPitchShift) > 0 ? `升${currentPitchShift}半音` : `降${Math.abs(parseInt(currentPitchShift))}半音`);
+                        statusText.textContent = `正在播放 (${rateText}, ${pitchText})`;
+                        statusText.style.color = '#4CAF50';
+                    }
+                }
+            });
+        });
+
+        // 音调变换控制
+        document.querySelectorAll('input[name="pitchShift"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    const pitchShift = parseInt(e.target.value);
+                    applyPitchShift(pitchShift);
+                }
+            });
+        });
+
+        // 监听原生视频事件（通过 Video.js 已经处理，这里移除重复的事件监听）
+        // 所有事件现在通过 Video.js 的事件系统处理
+
+        // 进度条点击跳转
+        progressBar.addEventListener('click', handleProgressBarClick);
+
+        // 画布尺寸适配
+        window.addEventListener('resize', resizeCanvas);
+
+        // 初始化画布尺寸
+        resizeCanvas();
+
+        // 初始化 Video.js 播放器
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('DOM 加载完成，初始化 Video.js...');
+            initVideoPlayer();
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/nginx_access.log b/nginx_access.log
new file mode 100644
index 0000000..f9ddfab
--- /dev/null
+++ b/nginx_access.log
@@ -0,0 +1,120 @@
+127.0.0.1 - - [06/Jun/2025:10:56:53 +0800] "GET / HTTP/1.1" 200 47534 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:56:54 +0800] "GET /hls/variant.m3u8 HTTP/1.1" 200 352 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:56:54 +0800] "GET /hls/video/index.m3u8 HTTP/1.1" 200 394 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:56:55 +0800] "GET /hls/video/main.ts HTTP/1.1" 206 2632 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:56:55 +0800] "GET /favicon.ico HTTP/1.1" 404 555 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:56:59 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:56:59 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:56:59 +0800] "GET /demo/video.m3u8 HTTP/1.1" 200 10787 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:00 +0800] "GET /demo/main.ts HTTP/1.1" 206 1210156 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:01 +0800] "GET /demo/main.ts HTTP/1.1" 206 1190040 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:01 +0800] "GET /demo/main.ts HTTP/1.1" 206 1190792 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:02 +0800] "GET /demo/main.ts HTTP/1.1" 206 1213540 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:07 +0800] "GET /demo/main.ts HTTP/1.1" 206 1194176 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:07 +0800] "GET /demo/audio.m3u8 HTTP/1.1" 200 10948 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:12 +0800] "GET /demo/main.aac HTTP/1.1" 206 136770 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:22 +0800] "GET / HTTP/1.1" 200 47534 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:24 +0800] "GET /hls/variant.m3u8 HTTP/1.1" 200 352 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:24 +0800] "GET /hls/video/index.m3u8 HTTP/1.1" 200 394 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:24 +0800] "GET /hls/video/main.ts HTTP/1.1" 206 2632 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:30 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:30 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:30 +0800] "GET /demo/video.m3u8 HTTP/1.1" 200 10787 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:30 +0800] "GET /demo/main.ts HTTP/1.1" 206 1210156 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:37 +0800] "GET /demo/main.ts HTTP/1.1" 206 1190040 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:37 +0800] "GET /demo/main.ts HTTP/1.1" 206 1190792 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:37 +0800] "GET /demo/main.ts HTTP/1.1" 206 1213540 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:42 +0800] "GET /demo/main.ts HTTP/1.1" 206 1194176 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:42 +0800] "GET /demo/audio.m3u8 HTTP/1.1" 200 10948 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:47 +0800] "GET /demo/main.aac HTTP/1.1" 206 136770 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:52 +0800] "GET /demo/main.aac HTTP/1.1" 206 137219 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:57:57 +0800] "GET /demo/main.aac HTTP/1.1" 206 137132 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:58:02 +0800] "GET /demo/main.aac HTTP/1.1" 206 136217 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:58:07 +0800] "GET /demo/main.aac HTTP/1.1" 206 136863 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:17 +0800] "GET / HTTP/1.1" 200 47534 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:20 +0800] "GET /hls/variant.m3u8 HTTP/1.1" 200 352 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:20 +0800] "GET /hls/video/index.m3u8 HTTP/1.1" 200 394 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:20 +0800] "GET /hls/video/main.ts HTTP/1.1" 206 2632 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:22 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:22 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:22 +0800] "GET /demo/video.m3u8 HTTP/1.1" 200 10787 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:22 +0800] "GET /demo/main.ts HTTP/1.1" 206 1210156 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:25 +0800] "GET /demo/main.ts HTTP/1.1" 206 1190040 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:25 +0800] "GET /demo/audio.m3u8 HTTP/1.1" 200 10948 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:25 +0800] "GET /demo/main.aac HTTP/1.1" 206 136567 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:25 +0800] "GET /demo/main.aac HTTP/1.1" 206 136954 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:30 +0800] "GET /demo/main.aac HTTP/1.1" 206 137116 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:35 +0800] "GET /demo/main.aac HTTP/1.1" 206 136770 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:40 +0800] "GET /demo/main.aac HTTP/1.1" 206 137219 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:45 +0800] "GET /demo/main.aac HTTP/1.1" 206 137132 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:48 +0800] "GET /demo/main.aac HTTP/1.1" 206 136567 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:48 +0800] "GET /demo/main.aac HTTP/1.1" 206 136954 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:48 +0800] "GET /demo/main.aac HTTP/1.1" 206 137116 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:48 +0800] "GET /demo/main.aac HTTP/1.1" 206 136770 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:48 +0800] "GET /demo/main.aac HTTP/1.1" 206 137219 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:10:59:48 +0800] "GET /demo/main.aac HTTP/1.1" 206 137132 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:04 +0800] "GET / HTTP/1.1" 200 47534 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:05 +0800] "GET /hls/variant.m3u8 HTTP/1.1" 200 352 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:05 +0800] "GET /hls/video/index.m3u8 HTTP/1.1" 200 394 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:06 +0800] "GET /hls/video/main.ts HTTP/1.1" 206 2632 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:06 +0800] "GET /favicon.ico HTTP/1.1" 404 555 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:10 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:10 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:10 +0800] "GET /demo/video.m3u8 HTTP/1.1" 200 10787 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:10 +0800] "GET /demo/main.ts HTTP/1.1" 206 1210156 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:15 +0800] "GET /demo/main.ts HTTP/1.1" 206 1190040 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:15 +0800] "GET /demo/audio.m3u8 HTTP/1.1" 200 10948 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:15 +0800] "GET /demo/main.aac HTTP/1.1" 206 136567 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:15 +0800] "GET /demo/main.aac HTTP/1.1" 206 136954 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:20 +0800] "GET /demo/main.aac HTTP/1.1" 206 137116 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:25 +0800] "GET /demo/main.aac HTTP/1.1" 206 136770 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:30 +0800] "GET /demo/main.aac HTTP/1.1" 206 137219 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:35 +0800] "GET /demo/main.aac HTTP/1.1" 206 137132 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:38 +0800] "GET /demo/main.aac HTTP/1.1" 206 136567 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:38 +0800] "GET /demo/main.aac HTTP/1.1" 206 136954 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:38 +0800] "GET /demo/main.aac HTTP/1.1" 206 137116 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:38 +0800] "GET /demo/main.aac HTTP/1.1" 206 136770 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:38 +0800] "GET /demo/main.aac HTTP/1.1" 206 137219 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:01:38 +0800] "GET /demo/main.aac HTTP/1.1" 206 137132 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:02:24 +0800] "GET / HTTP/1.1" 200 47534 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:02:26 +0800] "GET /hls/variant.m3u8 HTTP/1.1" 200 352 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:02:26 +0800] "GET /hls/video/index.m3u8 HTTP/1.1" 200 394 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:02:26 +0800] "GET /hls/video/main.ts HTTP/1.1" 206 2632 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:04:54 +0800] "GET /hls/video/main.ts HTTP/1.1" 304 0 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:04:56 +0800] "GET / HTTP/1.1" 200 48475 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:03 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:03 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:03 +0800] "GET /demo/video.m3u8 HTTP/1.1" 200 10787 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:03 +0800] "GET /demo/main.ts HTTP/1.1" 206 1210156 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:05 +0800] "GET /demo/main.ts HTTP/1.1" 206 1190040 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:05 +0800] "GET /demo/main.ts HTTP/1.1" 206 1190792 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:05 +0800] "GET /demo/main.ts HTTP/1.1" 206 1213540 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:24 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:24 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:24 +0800] "GET /demo/video.m3u8 HTTP/1.1" 200 10787 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:24 +0800] "GET /demo/main.ts HTTP/1.1" 206 1210156 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:26 +0800] "GET /demo/main.ts HTTP/1.1" 206 1190040 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:26 +0800] "GET /demo/main.ts HTTP/1.1" 206 1190792 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:26 +0800] "GET /demo/main.ts HTTP/1.1" 206 1213540 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:31 +0800] "GET /demo/main.ts HTTP/1.1" 206 1194176 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:31 +0800] "GET /demo/audio.m3u8 HTTP/1.1" 200 10948 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:33 +0800] "GET / HTTP/1.1" 200 48475 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:36 +0800] "GET /hls/variant.m3u8 HTTP/1.1" 200 352 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:36 +0800] "GET /hls/video/index.m3u8 HTTP/1.1" 200 394 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:36 +0800] "GET /hls/video/main.ts HTTP/1.1" 206 2632 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:42 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:42 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:42 +0800] "GET /demo/video.m3u8 HTTP/1.1" 200 10787 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:42 +0800] "GET /demo/main.ts HTTP/1.1" 206 1210156 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:47 +0800] "GET /demo/main.ts HTTP/1.1" 206 1190040 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:47 +0800] "GET /demo/main.ts HTTP/1.1" 206 1190792 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:05:47 +0800] "GET /demo/main.ts HTTP/1.1" 206 1213540 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:06:04 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:06:04 +0800] "GET /demo/variant.m3u8 HTTP/1.1" 200 320 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:06:04 +0800] "GET /demo/video.m3u8 HTTP/1.1" 200 10787 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:06:04 +0800] "GET /demo/main.ts HTTP/1.1" 206 1210156 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:06:05 +0800] "GET /demo/main.ts HTTP/1.1" 206 1190040 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:06:05 +0800] "GET /demo/main.ts HTTP/1.1" 206 1190792 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:06:05 +0800] "GET /demo/main.ts HTTP/1.1" 206 1213540 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:06:10 +0800] "GET /demo/main.ts HTTP/1.1" 206 1194176 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
+127.0.0.1 - - [06/Jun/2025:11:06:10 +0800] "GET /demo/audio.m3u8 HTTP/1.1" 200 10948 "http://localhost:8888/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0"
diff --git a/nginx_error.log b/nginx_error.log
new file mode 100644
index 0000000..e69de29
diff --git a/serve.go b/serve.go
new file mode 100644
index 0000000..26b30b5
--- /dev/null
+++ b/serve.go
@@ -0,0 +1,23 @@
+package main
+
+import (
+	"log"
+	"net/http"
+)
+
+func loggingMiddleware(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		log.Printf("%s %s %s", r.RemoteAddr, r.Method, r.URL.Path)
+		next.ServeHTTP(w, r)
+	})
+}
+
+func main() {
+	fs := http.FileServer(http.Dir("."))
+	http.Handle("/", loggingMiddleware(fs))
+	log.Println("Serving on http://localhost:8888 ...")
+	err := http.ListenAndServe(":8888", nil)
+	if err != nil {
+		log.Fatal(err)
+	}
+}
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..7a39577
--- /dev/null
+++ b/test.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>多音轨 HLS 测试</title>
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        video {
+            width: 100%;
+            max-width: 800px;
+            height: auto;
+        }
+
+        .controls {
+            margin: 20px 0;
+        }
+
+        .audio-tracks {
+            margin: 10px 0;
+        }
+
+        .audio-tracks label {
+            display: block;
+            margin: 5px 0;
+        }
+
+        .info {
+            background: #f5f5f5;
+            padding: 15px;
+            border-radius: 5px;
+            margin: 20px 0;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>多音轨 HLS 视频播放器测试</h1>
+
+    <video id="video" controls></video>
+
+    <div class="controls">
+        <div class="audio-tracks">
+            <h3>音轨选择：</h3>
+            <div id="audioTracks"></div>
+        </div>
+    </div>
+
+    <div class="info">
+        <h3>说明：</h3>
+        <p>此页面用于测试从 merged_dual_track.mp4 生成的多音轨 HLS 流</p>
+        <p>HLS 主播放列表: <code>hls_output/master.m3u8</code></p>
+        <p>包含两个音轨：Audio Track 1 (默认) 和 Audio Track 2</p>
+    </div>
+
+    <script>
+        const video = document.getElementById('video');
+        const audioTracksDiv = document.getElementById('audioTracks');
+
+        if (Hls.isSupported()) {
+            const hls = new Hls();
+            hls.loadSource('hls_output/master.m3u8');
+            hls.attachMedia(video);
+
+            hls.on(Hls.Events.MANIFEST_PARSED, function () {
+                console.log('HLS manifest parsed');
+                console.log('Audio tracks:', hls.audioTracks);
+                updateAudioTrackControls(hls);
+            });
+
+            hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, function () {
+                console.log('Audio tracks updated');
+                updateAudioTrackControls(hls);
+            });
+
+            function updateAudioTrackControls(hls) {
+                audioTracksDiv.innerHTML = '';
+
+                hls.audioTracks.forEach((track, index) => {
+                    const label = document.createElement('label');
+                    const radio = document.createElement('input');
+                    radio.type = 'radio';
+                    radio.name = 'audioTrack';
+                    radio.value = index;
+                    radio.checked = index === hls.audioTrack;
+
+                    radio.addEventListener('change', function () {
+                        if (this.checked) {
+                            hls.audioTrack = parseInt(this.value);
+                            console.log('Switched to audio track:', track);
+                        }
+                    });
+
+                    label.appendChild(radio);
+                    label.appendChild(document.createTextNode(` ${track.name || `Audio Track ${index + 1}`}`));
+                    audioTracksDiv.appendChild(label);
+                });
+            }
+        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+            // 原生 HLS 支持 (Safari)
+            video.src = 'hls_output/master.m3u8';
+        } else {
+            alert('您的浏览器不支持 HLS 播放');
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/video.conf b/video.conf
new file mode 100644
index 0000000..ff61ff4
--- /dev/null
+++ b/video.conf
@@ -0,0 +1,20 @@
+# Nginx 配置示例，服务于当前目录
+server {
+    listen 8888;
+    server_name localhost;
+    root /Users/rogee/Projects/self/video-player;
+    autoindex on;
+    # 支持 Range 请求（默认支持）
+    location / {
+        try_files $uri $uri/ =404;
+    }
+    # 为 .aac 文件添加 location 匹配，强制返回 Content-Type 为 audio/aac
+    location ~* \.aac$ {
+        default_type "";
+        add_header Content-Type audio/aac;
+        try_files $uri =404;
+    }
+    # 可选：日志配置
+    access_log /Users/rogee/Projects/self/video-player/nginx_access.log;
+    error_log /Users/rogee/Projects/self/video-player/nginx_error.log;
+}