Go与Web结合实现ABC乐谱在线播放

要在 Web 中实现这个功能，最优雅、最高效的设计方案是前后端分离架构：

服务器端（Go 语言）：只负责托管静态网页文件（HTML/JS），不参与音频合成。这样可以极大地减轻服务器的 CPU 和带宽压力。
客户端（浏览器）：利用功能强大的开源 JavaScript 库 abcjs。当你在网页上提交 ABC 记谱法文本后，浏览器会在本地直接把文本渲染成五线谱，并通过浏览器的 Web Audio API 实时合成音频并从你的电脑扬声器播放出来。

下面是完整的实现步骤和代码：

第一步：创建项目目录

在你的电脑上创建一个文件夹，结构如下：

my-abc-player/
├── main.go          # Go 后端程序
└── public/
    └── index.html   # 前端页面

第二步：编写 Go 后端 (`main.go`)

Go 在这里扮演 Web 服务器的角色，把前端页面安全地发布出去：

package main

import (
	"fmt"
	"net/http"
)

func main() {
	port := ":8080"
	
	// 托管 public 文件夹下的静态资源
	fs := http.FileServer(http.Dir("./public"))
	http.Handle("/", fs)

	fmt.Printf("【服务已启动】请在浏览器中访问: http://localhost%s
", port)
	
	err := http.ListenAndServe(port, nil)
	if err != nil {
		fmt.Println("启动服务器失败:", err)
	}
}

第三步：编写前端页面 (`public/index.html`)

我们在前端引入了 abcjs 库，它会自动帮我们处理五线谱渲染和音频合成：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ABC 记谱法在线播放器</title>
    
    <!-- 引入 abcjs 的样式表和 JS 库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/abcjs@6.2.2/abcjs-audio.css">
    <script src="https://cdn.jsdelivr.net/npm/abcjs@6.2.2/dist/abcjs-basic-min.js"></script>
    
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            max-width: 800px;
            margin: 40px auto;
            padding: 0 20px;
            background-color: #f9f9f9;
            color: #333;
        }
        textarea {
            width: 100%;
            height: 150px;
            font-family: monospace;
            font-size: 14px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #007acc;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 4px;
            margin-top: 10px;
        }
        button:hover { background-color: #005999; }
        #paper { background: white; border: 1px solid #ddd; border-radius: 4px; padding: 20px; margin-top: 20px; }
        #audio-controls { margin-top: 20px; background: #eee; padding: 10px; border-radius: 4px; }
    </style>
</head>
<body>

    <h1>ABC 记谱法在线播放器</h1>
    <p>在下方输入框中输入或修改 ABC 代码，点击按钮进行渲染和播放：</p>

    <!-- 输入框，默认填入你提供的曲子 -->
    <textarea id="abc-input">X: 1
T: Summer Breeze
M: 4/4
L: 1/4
K: C
C D E C | C D E C | E F G2 | E F G2 | G/A/ G/F/ E C | G/A/ G/F/ E C | C G, C2 | C G, C2 |</textarea>
    
    <br>
    <button id="btn-play">渲染乐谱并加载播放器</button>

    <!-- 五线谱渲染区域 -->
    <div id="paper"></div>
    
    <!-- 播放控制器区域 -->
    <div id="audio-controls"></div>

    <script>
        var synthControl; // 音频控制实例

        document.getElementById('btn-play').addEventListener('click', async function() {
            var abcText = document.getElementById('abc-input').value;

            // 1. 在网页上渲染漂亮的五线谱
            var visualObj = ABCJS.renderAbc("paper", abcText, {
                responsive: "resize"
            })[0];

            // 2. 检查浏览器是否支持 Web Audio
            if (!ABCJS.synth.supportsAudio()) {
                alert("很抱歉，您的浏览器不支持 Web Audio API，无法播放声音。");
                return;
            }

            // 3. 实例化播放控制器
            if (!synthControl) {
                synthControl = new ABCJS.synth.SynthController();
            }
            
            // 渲染控制条（包括播放、暂停、进度条、静音等按钮）
            synthControl.load("#audio-controls", null, {
                displayLoop: true,
                displayRestart: true,
                displayPlay: true,
                displayProgress: true,
                displayWarp: true
            });

            // 4. 合成音频并装载到控制条
            var createSynth = new ABCJS.synth.CreateSynth();
            try {
                await createSynth.init({ visualObj: visualObj });
                await synthControl.setTune(visualObj, false);
                console.log("音频加载成功！点击播放按钮即可聆听。");
            } catch (error) {
                console.error("音频合成出错:", error);
                alert("音频合成失败，请检查 ABC 语法是否正确。");
            }
        });
    </script>
</body>
</html>

第四步：如何运行？

打开你的终端（Terminal 或 CMD），进入 my-abc-player 目录。
运行 Go 服务：
```
go run main.go
```
打开浏览器，访问：http://localhost:8080
你将在网页上看到你之前写的《Summer Breeze》ABC 文本。点击“渲染乐谱并加载播放器”按钮，网页上会立刻画出标准五线谱，并出现一个播放控制条。点击播放，你的电脑就会响起这段旋律！

这个方案的优势：

零服务器负担：Go 只是把网页传给浏览器。所有的乐谱画图、音频合成计算，全部在你自己的电脑（浏览器）上本地完成。
完美的交互性：你可以直接在网页的输入框里改动音符（比如把 C D E C 改成 E F G E），再次点击按钮，五线谱和声音会立刻同步更新。

Go与Web结合实现ABC乐谱在线播放

第一步：创建项目目录

第二步：编写 Go 后端 (main.go)

第三步：编写前端页面 (public/index.html)

第四步：如何运行？

这个方案的优势：

第二步：编写 Go 后端 (`main.go`)

第三步：编写前端页面 (`public/index.html`)