如何用PHP加载原本通过JavaScript展示的MusicXML乐谱文件？

问题背景 #

原本使用Open Sheet Music Display（OSMD）加载本地MusicXML文件的代码可正常运行：

<script src="../scripts/opensheetmusicdisplay.min.js"></script>
<div id="osmdCanvas"></div>
<script>
var osmd = new opensheetmusicdisplay.OpenSheetMusicDisplay('osmdCanvas');
osmd.setOptions({
    backend: 'svg',
    drawTitle: true,
});

osmd.load('../xml/Band_Of_Brothers.musicxml').then(function () {
    osmd.render();
});
</script>

但改成从数据库读取XML内容并直接传入osmd.load()后无法运行，修改后的代码如下：

<script src="../scripts/opensheetmusicdisplay.min.js"></script>
<div id="osmdCanvas"></div>
<script>
    <?php
    $query = 'SELECT `sheets_xml` FROM `imslp_sheets` WHERE 1';
    $result = $conn->query($query);
    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            $thisXmlSheet = $row['sheets_xml'];
        }
    }
    echo "
var osmd = new opensheetmusicdisplay.OpenSheetMusicDisplay('osmdCanvas');
osmd.setOptions({
    backend: 'svg',
    drawTitle: true,
});

osmd.load('$thisXmlSheet').then(function () {
    osmd.render();
});";
    ?>
</script>

问题原因 #

1. 方法使用错误：osmd.load()核心作用是加载文件路径/URL，直接传入XML字符串会触发解析逻辑错误
2. 特殊字符未转义：数据库中的XML包含引号、换行、</>等特殊字符，直接嵌入JS字符串会破坏语法，引发JS运行错误
3. 数据读取逻辑冗余：while循环会持续覆盖$thisXmlSheet变量，最终仅保留最后一条数据，若仅需单条乐谱则完全没必要使用循环

解决方案 #

关键修改点 #

• 改用OSMD专门的loadXML()方法加载XML字符串
• 用PHP的json_encode()转义XML中的特殊字符，确保输出到JS时是合法字符串
• 修正数据读取逻辑，直接读取单条记录（若需多条则另行处理）

修改后的完整代码 #

<script src="../scripts/opensheetmusicdisplay.min.js"></script>
<div id="osmdCanvas"></div>
<script>
    <?php
    // 读取单条乐谱数据，避免循环覆盖
    $query = 'SELECT `sheets_xml` FROM `imslp_sheets` WHERE 1 LIMIT 1';
    $result = $conn->query($query);
    $thisXmlSheet = '';
    if ($result && $result->num_rows > 0) {
        $row = $result->fetch_assoc();
        $thisXmlSheet = $row['sheets_xml'];
    }
    // 转义特殊字符，生成合法的JS字符串
    $escapedXml = json_encode($thisXmlSheet);
    echo "
var osmd = new opensheetmusicdisplay.OpenSheetMusicDisplay('osmdCanvas');
osmd.setOptions({
    backend: 'svg',
    drawTitle: true,
});

// 使用loadXML加载XML字符串
osmd.loadXML($escapedXml).then(function () {
    osmd.render();
}).catch(function(error) {
    // 新增错误捕获，便于排查问题
    console.error('乐谱加载失败:', error);
});";
    ?>
</script>

额外注意事项 #

• 确保数据库sheets_xml字段存储的是完整且语法合法的MusicXML内容，无缺失标签或格式错误
• 检查PHP数据库连接$conn是否正确初始化，避免因连接失败导致无数据输出
• 新增的catch()方法可在浏览器控制台打印错误信息，帮助快速定位问题（如XML格式错误、数据为空等）

内容的提问来源于stack exchange，提问作者user19201448