mm_ai 1.0.0

package/common/tool/media/abcjs/index.js

@@ -0,0 +1,326 @@
+const fs = require('fs');
+const path = require('path');
+
+// ============================================================
+// 音名→频率 映射表
+// ============================================================
+const NOTE_FREQS = {};
+const NOTE_NAMES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
+for (let oct = 0; oct <= 8; oct++) {
+    for (let i = 0; i < 12; i++) {
+        NOTE_FREQS[NOTE_NAMES[i] + oct] = 440 * Math.pow(2, ((oct - 4) * 12 + i) / 12);
+    }
+}
+
+// ============================================================
+// 调性名称映射表
+// ============================================================
+const KEY_SIGNATURE_MAP = {
+    'C': 'C大调', 'Am': 'a小调',
+    'G': 'G大调', 'Em': 'e小调',
+    'D': 'D大调', 'Bm': 'b小调',
+    'A': 'A大调', 'F#m': '升f小调',
+    'E': 'E大调', 'C#m': '升c小调',
+    'B': 'B大调', 'G#m': '升g小调',
+    'F#': '升F大调', 'D#m': '升d小调',
+    'C#': '升C大调', 'A#m': '升a小调',
+    'F': 'F大调', 'Dm': 'd小调',
+    'Bb': '降B大调', 'Gm': 'g小调',
+    'Eb': '降E大调', 'Cm': 'c小调',
+    'Ab': '降A大调', 'Fm': 'f小调',
+    'Db': '降D大调', 'Bbm': '降b小调',
+    'Gb': '降G大调', 'Ebm': '降e小调',
+    'Cb': '降C大调', 'Abm': '降a小调'
+};
+
+// ============================================================
+// ABC曲谱解析函数
+// ============================================================
+
+function parseKey(abc) {
+    const match = abc.match(/^K:\s*(\S+)/m);
+    if (!match) return 'C大调';
+    const keyStr = match[1].trim();
+    const baseKey = keyStr.split(/\s+/)[0];
+    return KEY_SIGNATURE_MAP[baseKey] || baseKey + '调';
+}
+
+function parseMeter(abc) {
+    const match = abc.match(/^M:\s*(\S+)/m);
+    if (!match) return '4/4';
+    return match[1].trim();
+}
+
+function parseBpm(abc) {
+    const match = abc.match(/^Q:\s*1\/4\s*=\s*(\d+)/m);
+    if (!match) return 100;
+    return parseInt(match[1], 10);
+}
+
+function normalizeAbc(abc) {
+    let normalized = abc.replace(/\\n/g, '\n').replace(/\\r\\n/g, '\n').replace(/\\r/g, '\n');
+    return normalized.trim();
+}
+
+/**
+ * 将ABC音符名转换为频率
+ */
+function pitchToFreq(pitch) {
+    let note = pitch[0].toUpperCase();
+    let oct = 4;
+    if (pitch[0] === pitch[0].toLowerCase() && pitch[0] >= 'a' && pitch[0] <= 'g') oct = 5;
+    for (let i = 1; i < pitch.length; i++) {
+        if (pitch[i] === "'") oct++;
+        if (pitch[i] === ",") oct--;
+    }
+    return NOTE_FREQS[note + oct] || 440;
+}
+
+/**
+ * 解析ABC曲谱，返回时间线 [{ startTime, durTime, pitches }]
+ */
+function parseTimeline(abc) {
+    const qMatch = abc.match(/Q:1\/4=(\d+)/);
+    const bpm = qMatch ? parseInt(qMatch[1]) : 100;
+    const lines = abc.split('\n').filter(l => !l.match(/^[A-Z]:/) && !l.match(/^%%/) && l.trim());
+    const musicText = lines.join(' ');
+    const unitDuration = 60 / bpm / 2;
+
+    const timeline = [];
+    let currentBeat = 0;
+    const regex = /\[([^\]]+)\]|([A-Ga-g][',]*)(\d*)|z(\d*)/g;
+    let m;
+
+    while ((m = regex.exec(musicText)) !== null) {
+        let dur = 1;
+        let pitches = [];
+        if (m[1]) {
+            pitches = m[1].match(/[A-Ga-g][',]*/g) || [];
+            dur = 1;
+        } else if (m[2]) {
+            pitches = [m[2]];
+            dur = parseInt(m[3]) || 1;
+        } else if (m[4]) {
+            dur = parseInt(m[4]) || 1;
+            currentBeat += dur;
+            continue;
+        }
+        if (pitches.length > 0) {
+            timeline.push({
+                startTime: currentBeat * unitDuration,
+                durTime: dur * unitDuration,
+                pitches: pitches
+            });
+        }
+        currentBeat += dur;
+    }
+    return {
+        timeline: timeline,
+        totalSeconds: currentBeat * unitDuration
+    };
+}
+
+// ============================================================
+// WAV音频文件生成
+// ============================================================
+
+/**
+ * 根据时间线生成PCM音频数据（16位，单声道，44100Hz）
+ * 使用三角波模拟钢琴音色
+ */
+function generatePCM(timeline, totalSeconds) {
+    const sampleRate = 44100;
+    const totalSamples = Math.ceil(totalSeconds * sampleRate);
+    const samples = new Float32Array(totalSamples);
+
+    timeline.forEach(note => {
+        const startSample = Math.floor(note.startTime * sampleRate);
+        const durSamples = Math.floor(note.durTime * sampleRate);
+        const endSample = Math.min(startSample + durSamples, totalSamples);
+
+        // 每个音的音量
+        const volume = 0.3 / note.pitches.length;
+
+        note.pitches.forEach(pitch => {
+            const freq = pitchToFreq(pitch);
+            if (!freq) return;
+
+            for (let i = startSample; i < endSample; i++) {
+                const t = (i - startSample) / sampleRate;
+                const progress = (i - startSample) / durSamples;
+
+                // 三角波
+                const phase = (t * freq) % 1;
+                let value = phase < 0.5 ? 4 * phase - 1 : 3 - 4 * phase;
+
+                // 音量包络：起音+衰减+释放
+                let envelope;
+                if (progress < 0.02) {
+                    envelope = progress / 0.02; // 快速起音
+                } else if (progress > 0.9) {
+                    envelope = (1 - progress) / 0.1; // 释放
+                } else {
+                    envelope = 1 - (progress - 0.02) * 0.3; // 缓慢衰减
+                }
+
+                samples[i] += value * volume * envelope;
+            }
+        });
+    });
+
+    // 归一化，防止削波
+    let maxVal = 0;
+    for (let i = 0; i < totalSamples; i++) {
+        const abs = Math.abs(samples[i]);
+        if (abs > maxVal) maxVal = abs;
+    }
+    if (maxVal > 1) {
+        for (let i = 0; i < totalSamples; i++) {
+            samples[i] /= maxVal;
+        }
+    }
+
+    return { samples, sampleRate };
+}
+
+/**
+ * 将PCM数据写入WAV文件
+ */
+function writeWav(filePath, samples, sampleRate) {
+    const numSamples = samples.length;
+    const numChannels = 1;
+    const bitsPerSample = 16;
+    const byteRate = sampleRate * numChannels * bitsPerSample / 8;
+    const blockAlign = numChannels * bitsPerSample / 8;
+    const dataSize = numSamples * numChannels * bitsPerSample / 8;
+    const headerSize = 44;
+
+    const buffer = Buffer.alloc(headerSize + dataSize);
+
+    // RIFF header
+    buffer.write('RIFF', 0);
+    buffer.writeUInt32LE(36 + dataSize, 4);
+    buffer.write('WAVE', 8);
+
+    // fmt chunk
+    buffer.write('fmt ', 12);
+    buffer.writeUInt32LE(16, 16); // chunk size
+    buffer.writeUInt16LE(1, 20);  // PCM format
+    buffer.writeUInt16LE(numChannels, 22);
+    buffer.writeUInt32LE(sampleRate, 24);
+    buffer.writeUInt32LE(byteRate, 28);
+    buffer.writeUInt16LE(blockAlign, 32);
+    buffer.writeUInt16LE(bitsPerSample, 34);
+
+    // data chunk
+    buffer.write('data', 36);
+    buffer.writeUInt32LE(dataSize, 40);
+
+    // PCM data
+    let offset = 44;
+    for (let i = 0; i < numSamples; i++) {
+        const sample = Math.max(-1, Math.min(1, samples[i]));
+        const intSample = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
+        buffer.writeInt16LE(Math.round(intSample), offset);
+        offset += 2;
+    }
+
+    fs.writeFileSync(filePath, buffer);
+}
+
+// ============================================================
+// 主模块
+// ============================================================
+
+module.exports = {
+    async main(params) {
+        try {
+            const { abc_notation, name, title, description, output, generate_audio } = params;
+            if (!abc_notation) {
+                return { code: 10000, msg: 'ABC曲谱内容(abc_notation)不能为空' };
+            }
+            if (!name) {
+                return { code: 10000, msg: '曲谱名称(name)不能为空' };
+            }
+            if (!title) {
+                return { code: 10000, msg: '曲谱标题(title)不能为空' };
+            }
+
+            // 确定输出路径
+            let dir = `/project/${name}`.fullname();
+            const baseName = name.replace(/[<>:"\/\\|?*]/g, '_').replace(/\s+/g, '_').substring(0, 100);
+            const outputFileName = `./index.html`;
+            const outputPath = path.join(dir, outputFileName);
+
+            // 确保输出目录存在
+            if (!fs.existsSync(dir)) {
+                dir.addDir();
+            }
+
+            // 规范化ABC曲谱
+            const abcContent = normalizeAbc(abc_notation);
+
+            // 解析ABC元数据
+            const key = parseKey(abcContent);
+            const meter = parseMeter(abcContent);
+            const bpm = parseBpm(abcContent);
+            const desc = description || `${key} · 优美旋律`;
+
+            // 读取模板文件
+            const templatePath = path.join(__dirname, 'template.html');
+            if (!fs.existsSync(templatePath)) {
+                return { code: 10000, msg: '模板文件(template.html)不存在' };
+            }
+            let template = fs.readFileSync(templatePath, 'utf-8');
+
+            // 替换模板占位符
+            template = template.replace(/__TITLE__/g, title);
+            template = template.replace(/__DESCRIPTION__/g, desc);
+            template = template.replace(/__KEY__/g, key);
+            template = template.replace(/__METER__/g, meter);
+            template = template.replace(/__BPM__/g, bpm);
+            template = template.replace(/__ABCNOTATION__/g, abcContent);
+
+            // 写入HTML文件
+            fs.writeFileSync(outputPath, template, 'utf-8');
+
+            // 复制abcjs库到输出目录
+            const abcjsSrc = path.join(__dirname, 'abcjs-basic-min.js');
+            const abcjsDest = path.join(dir, 'abcjs-basic-min.js');
+            if (!fs.existsSync(abcjsDest) && fs.existsSync(abcjsSrc)) {
+                fs.copyFileSync(abcjsSrc, abcjsDest);
+            }
+
+            const result = {
+                code: 0,
+                msg: `曲谱「${title}」生成成功`,
+                file_path: outputPath
+            };
+
+            // ============================================================
+            // 生成WAV音频文件
+            // ============================================================
+            if (generate_audio === true || generate_audio === 'true') {
+                try {
+                    const parsed = parseTimeline(abcContent);
+                    const { samples, sampleRate } = generatePCM(parsed.timeline, parsed.totalSeconds);
+                    const wavPath = path.join(dir, `${baseName}.wav`);
+                    writeWav(wavPath, samples, sampleRate);
+
+                    result.audio_file = wavPath;
+                    result.msg += `，音频文件已生成`;
+                } catch (audioErr) {
+                    result.msg += `，但音频生成失败: ${audioErr.message}`;
+                }
+            }
+
+            return result;
+
+        } catch (error) {
+            return {
+                code: 10000,
+                msg: '曲谱生成失败，原因：' + error.message
+            };
+        }
+    }
+};

package/common/tool/media/abcjs/template.html

@@ -0,0 +1,339 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>__TITLE__</title>
+    <script src="./abcjs-basic-min.js"></script>
+    <style>
+        body {
+            font-family: 'Georgia', serif;
+            background: linear-gradient(135deg, #f5f0e8 0%, #e8dcc8 100%);
+            margin: 0;
+            padding: 40px 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+        .container {
+            max-width: 900px;
+            width: 100%;
+            background: rgba(255, 252, 245, 0.95);
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 5px 20px rgba(0, 0, 0, 0.05);
+            backdrop-filter: blur(10px);
+            box-sizing: border-box;
+        }
+        h1 { text-align: center; color: #2c3e50; font-size: 32px; margin-bottom: 5px; font-weight: 700; letter-spacing: 2px; }
+        .subtitle { text-align: center; color: #7f8c8d; font-size: 16px; margin-bottom: 30px; font-style: italic; }
+        .info-bar { display: flex; justify-content: center; gap: 30px; margin-bottom: 25px; flex-wrap: wrap; }
+        .info-item { background: #f0ebe3; padding: 8px 20px; border-radius: 30px; font-size: 14px; color: #555; font-weight: 500; }
+        .info-item span { color: #8e6b3e; font-weight: 700; }
+        #score { min-height: 280px; padding: 20px 10px; background: #fcfaf7; border-radius: 12px; border: 1px solid #e8ddd0; margin-bottom: 20px; overflow-x: auto; position: relative; }
+        #score svg { width: 100%; height: auto; display: block; }
+        .progress-container { width: 100%; margin: 10px 0 15px; }
+        .progress-track { width: 100%; height: 6px; background: #e8ddd0; border-radius: 3px; overflow: hidden; cursor: pointer; }
+        .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #8e6b3e, #c9a96e); border-radius: 3px; transition: width 0.1s linear; }
+        .progress-time { display: flex; justify-content: space-between; font-size: 12px; color: #999; margin-top: 4px; }
+        .status-bar { text-align: center; font-size: 14px; color: #8e6b3e; min-height: 24px; margin-bottom: 10px; font-style: italic; }
+        .controls { display: flex; justify-content: center; gap: 15px; margin: 15px 0 25px; flex-wrap: wrap; }
+        .controls button { padding: 12px 30px; border: none; border-radius: 40px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; letter-spacing: 1px; }
+        .controls button:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
+        .btn-play { background: #8e6b3e; color: white; box-shadow: 0 4px 15px rgba(142, 107, 62, 0.3); }
+        .btn-play:hover:not(:disabled) { background: #7a5a33; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(142, 107, 62, 0.4); }
+        .btn-play.playing { background: #c0392b; }
+        .btn-stop { background: #bdc3c7; color: #2c3e50; }
+        .btn-stop:hover:not(:disabled) { background: #a0a7ab; transform: translateY(-2px); }
+        .btn-reset { background: #ecf0f1; color: #2c3e50; border: 2px solid #d5dbdb; }
+        .btn-reset:hover:not(:disabled) { background: #d5dbdb; transform: translateY(-2px); }
+        .chord-analysis { margin-top: 10px; padding: 20px; background: #f8f5f0; border-radius: 12px; border: 1px solid #e8ddd0; }
+        .chord-analysis h3 { color: #2c3e50; margin-top: 0; text-align: center; font-size: 18px; }
+        .chord-grid { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
+        .chord-card { background: white; padding: 10px 18px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-align: center; border: 1px solid #eee5d8; }
+        .chord-card .chord-name { font-weight: 700; color: #8e6b3e; font-size: 18px; }
+        .chord-card .chord-desc { font-size: 12px; color: #999; margin-top: 3px; }
+        .footer { text-align: center; margin-top: 25px; color: #aaa; font-size: 13px; }
+        @media (max-width: 600px) { .container { padding: 20px; } h1 { font-size: 24px; } .info-bar { gap: 10px; } .controls button { padding: 10px 20px; font-size: 14px; } }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🎹 __TITLE__</h1>
+        <p class="subtitle">__DESCRIPTION__</p>
+        <div class="info-bar">
+            <div class="info-item">🎵 调性：<span>__KEY__</span></div>
+            <div class="info-item">⏱ 节拍：<span>__METER__</span></div>
+            <div class="info-item">🏃 速度：<span>♩ = __BPM__</span></div>
+            <div class="info-item">🎼 风格：<span>__DESCRIPTION__</span></div>
+        </div>
+        <div id="score"></div>
+        <div class="progress-container">
+            <div class="progress-track" id="progressTrack">
+                <div class="progress-fill" id="progressFill"></div>
+            </div>
+            <div class="progress-time">
+                <span id="currentTime">0:00</span>
+                <span id="totalTime">0:00</span>
+            </div>
+        </div>
+        <div class="status-bar" id="status">就绪，点击「播放」聆听旋律 🎶</div>
+        <div class="controls">
+            <button class="btn-play" id="playBtn">▶ 播放</button>
+            <button class="btn-stop" id="stopBtn" disabled>■ 停止</button>
+            <button class="btn-reset" id="resetBtn">⟲ 重置</button>
+        </div>
+        <div class="chord-analysis">
+            <h3>🎸 和声进行分析</h3>
+            <div class="chord-grid">
+                <div class="chord-card"><div class="chord-name">C</div><div class="chord-desc">主和弦 · I级</div></div>
+                <div class="chord-card"><div class="chord-name">F</div><div class="chord-desc">下属和弦 · IV级</div></div>
+                <div class="chord-card"><div class="chord-name">G</div><div class="chord-desc">属和弦 · V级</div></div>
+                <div class="chord-card"><div class="chord-name">Am</div><div class="chord-desc">关系小调 · vi级</div></div>
+                <div class="chord-card"><div class="chord-name">G7</div><div class="chord-desc">属七和弦 · V7级</div></div>
+            </div>
+            <p style="text-align:center;color:#888;font-size:13px;margin-top:12px;">和声进行：C → F → G → C → Am → F → G7 → C（经典的和声循环）</p>
+        </div>
+        <div class="footer">✦ __TITLE__ · 使用 abcjs 引擎渲染 ✦</div>
+    </div>
+
+    <script>
+        var abcNotation = `__ABCNOTATION__`;
+
+        var noteFreqs = {};
+        var noteNames = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];
+        for (var oct = 0; oct <= 8; oct++) {
+            for (var i = 0; i < 12; i++) {
+                noteFreqs[noteNames[i] + oct] = 440 * Math.pow(2, ((oct - 4) * 12 + i) / 12);
+            }
+        }
+
+        var isPlaying = false;
+        var audioCtx = null;
+        var currentSources = [];
+        var startTimestamp = 0;
+        var totalDurationMs = 0;
+        var playTimer = null;
+
+        var statusEl = document.getElementById('status');
+        var playBtn = document.getElementById('playBtn');
+        var stopBtn = document.getElementById('stopBtn');
+        var resetBtn = document.getElementById('resetBtn');
+        var progressFill = document.getElementById('progressFill');
+        var progressTrack = document.getElementById('progressTrack');
+        var currentTimeEl = document.getElementById('currentTime');
+        var totalTimeEl = document.getElementById('totalTime');
+        var scoreEl = document.getElementById('score');
+
+        function setStatus(msg, isError) {
+            statusEl.textContent = msg;
+            statusEl.style.color = isError ? '#c0392b' : '#8e6b3e';
+        }
+
+        function formatTime(ms) {
+            var sec = Math.floor(ms / 1000);
+            var min = Math.floor(sec / 60);
+            var s = sec % 60;
+            return min + ':' + (s < 10 ? '0' : '') + s;
+        }
+
+        function pitchToFreq(pitch) {
+            var note = pitch[0].toUpperCase();
+            var oct = 4;
+            if (pitch[0] === pitch[0].toLowerCase() && pitch[0] >= 'a' && pitch[0] <= 'g') oct = 5;
+            for (var i = 1; i < pitch.length; i++) {
+                if (pitch[i] === "'") oct++;
+                if (pitch[i] === ",") oct--;
+            }
+            return noteFreqs[note + oct] || 440;
+        }
+
+        function getTotalSeconds(abc) {
+            var qMatch = abc.match(/Q:1\/4=(\d+)/);
+            var bpm = qMatch ? parseInt(qMatch[1]) : 100;
+            var lines = abc.split('\n').filter(function(l) { return !l.match(/^[A-Z]:/) && !l.match(/^%%/) && l.trim(); });
+            var musicText = lines.join(' ');
+            var unitDuration = 60 / bpm / 2;
+            var currentBeat = 0;
+            var regex = /\[([^\]]+)\]|([A-Ga-g][',]*)(\d*)|z(\d*)/g;
+            var m;
+            while ((m = regex.exec(musicText)) !== null) {
+                var dur = 1;
+                if (m[1]) dur = 1;
+                else if (m[2]) dur = parseInt(m[3]) || 1;
+                else if (m[4]) dur = parseInt(m[4]) || 1;
+                currentBeat += dur;
+            }
+            return currentBeat * unitDuration;
+        }
+
+        function playNote(freq, duration, startTime) {
+            if (!audioCtx) return;
+            var osc = audioCtx.createOscillator();
+            var gain = audioCtx.createGain();
+            osc.type = 'triangle';
+            osc.frequency.setValueAtTime(freq, startTime);
+            gain.gain.setValueAtTime(0, startTime);
+            gain.gain.linearRampToValueAtTime(0.3, startTime + 0.01);
+            gain.gain.exponentialRampToValueAtTime(0.1, startTime + 0.05);
+            gain.gain.exponentialRampToValueAtTime(0.001, startTime + duration - 0.01);
+            osc.connect(gain);
+            gain.connect(audioCtx.destination);
+            osc.start(startTime);
+            osc.stop(startTime + duration);
+            currentSources.push({ osc: osc, gain: gain });
+        }
+
+        function playChord(pitches, duration, startTime) {
+            for (var i = 0; i < pitches.length; i++) {
+                var freq = pitchToFreq(pitches[i]);
+                if (freq) playNote(freq, duration, startTime);
+            }
+        }
+
+        function playMusic() {
+            if (isPlaying) return;
+            try {
+                audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+                var qMatch = abcNotation.match(/Q:1\/4=(\d+)/);
+                var bpm = qMatch ? parseInt(qMatch[1]) : 100;
+                var lines = abcNotation.split('\n').filter(function(l) { return !l.match(/^[A-Z]:/) && !l.match(/^%%/) && l.trim(); });
+                var musicText = lines.join(' ');
+                var unitDuration = 60 / bpm / 2;
+
+                totalDurationMs = getTotalSeconds(abcNotation) * 1000;
+                totalTimeEl.textContent = formatTime(totalDurationMs);
+
+                setStatus('🎵 正在播放...');
+                isPlaying = true;
+                playBtn.textContent = '⏸ 播放中';
+                playBtn.classList.add('playing');
+                playBtn.disabled = true;
+                stopBtn.disabled = false;
+                startTimestamp = Date.now();
+
+                var currentBeat = 0;
+                var regex = /\[([^\]]+)\]|([A-Ga-g][',]*)(\d*)|z(\d*)/g;
+                var m;
+                while ((m = regex.exec(musicText)) !== null) {
+                    var dur = 1;
+                    var pitches = [];
+                    if (m[1]) {
+                        pitches = m[1].match(/[A-Ga-g][',]*/g) || [];
+                        dur = 1;
+                    } else if (m[2]) {
+                        pitches = [m[2]];
+                        dur = parseInt(m[3]) || 1;
+                    } else if (m[4]) {
+                        dur = parseInt(m[4]) || 1;
+                        currentBeat += dur;
+                        continue;
+                    }
+                    if (pitches.length > 0) {
+                        var startTime = audioCtx.currentTime + currentBeat * unitDuration;
+                        var durTime = dur * unitDuration;
+                        if (pitches.length === 1) {
+                            var freq = pitchToFreq(pitches[0]);
+                            if (freq) playNote(freq, durTime, startTime);
+                        } else {
+                            playChord(pitches, durTime, startTime);
+                        }
+                    }
+                    currentBeat += dur;
+                }
+
+                var lastFrameTime = 0;
+                function highlightLoop() {
+                    if (!isPlaying) return;
+                    var now = Date.now();
+                    if (now - lastFrameTime >= 33) {
+                        lastFrameTime = now;
+                        var elapsed = now - startTimestamp;
+                        var progress = Math.min(elapsed / totalDurationMs, 1);
+                        progressFill.style.width = (progress * 100) + '%';
+                        currentTimeEl.textContent = formatTime(elapsed);
+                        if (progress >= 1) { stopPlayback(true); return; }
+                    }
+                    requestAnimationFrame(highlightLoop);
+                }
+                requestAnimationFrame(highlightLoop);
+
+                playTimer = setTimeout(function() { stopPlayback(true); }, totalDurationMs + 200);
+
+            } catch (e) {
+                console.error('播放出错:', e);
+                setStatus('❌ 播放出错：' + e.message, true);
+                stopPlayback();
+            }
+        }
+
+        function stopPlayback(finished) {
+            if (playTimer) { clearTimeout(playTimer); playTimer = null; }
+            for (var i = 0; i < currentSources.length; i++) {
+                try { currentSources[i].osc.stop(); currentSources[i].osc.disconnect(); currentSources[i].gain.disconnect(); } catch(e) {}
+            }
+            currentSources = [];
+            if (audioCtx) { try { audioCtx.close(); } catch(e) {} audioCtx = null; }
+            isPlaying = false;
+            playBtn.textContent = '▶ 播放';
+            playBtn.classList.remove('playing');
+            playBtn.disabled = false;
+            stopBtn.disabled = true;
+            if (finished) {
+                progressFill.style.width = '100%';
+                currentTimeEl.textContent = totalTimeEl.textContent;
+                setStatus('✅ 播放完成！点击「播放」再听一遍 🎶');
+            } else {
+                setStatus('⏹ 已停止播放');
+            }
+        }
+
+        function resetAll() {
+            stopPlayback();
+            progressFill.style.width = '0%';
+            currentTimeEl.textContent = '0:00';
+            totalTimeEl.textContent = '0:00';
+            scoreEl.innerHTML = '';
+            try {
+                ABCJS.renderAbc(scoreEl, abcNotation, {
+                    responsive: 'resize', paddingTop: 20, paddingBottom: 20,
+                    paddingLeft: 20, paddingRight: 20, staffwidth: 750, addClasses: true
+                });
+                setStatus('⟲ 已重置');
+            } catch(e) {
+                setStatus('❌ 渲染错误', true);
+            }
+        }
+
+        function handleProgressClick(e) {
+            var rect = progressTrack.getBoundingClientRect();
+            var x = e.clientX - rect.left;
+            var ratio = Math.max(0, Math.min(1, x / rect.width));
+            progressFill.style.width = (ratio * 100) + '%';
+            currentTimeEl.textContent = formatTime(ratio * totalDurationMs);
+            if (isPlaying) {
+                startTimestamp = Date.now() - ratio * totalDurationMs;
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            try {
+                ABCJS.renderAbc(scoreEl, abcNotation, {
+                    responsive: 'resize', paddingTop: 20, paddingBottom: 20,
+                    paddingLeft: 20, paddingRight: 20, staffwidth: 750, addClasses: true
+                });
+                setStatus('✅ 乐谱渲染成功！点击「播放」聆听旋律 🎶');
+            } catch(e) {
+                console.error('初始化渲染错误:', e);
+                setStatus('❌ 渲染错误：' + e.message, true);
+            }
+            playBtn.addEventListener('click', playMusic);
+            stopBtn.addEventListener('click', function() { stopPlayback(false); });
+            resetBtn.addEventListener('click', resetAll);
+            progressTrack.addEventListener('click', handleProgressClick);
+        });
+    </script>
+</body>
+</html>