How to load a file that's normally shown with Javascript with PHP?

November 13, 2022

I have to show a music sheets and I use Open Sheet Music Display for that. There is JavaScript code used to display the sheet. Now I want to load an MXML file from my database.
Normally this was the code that it needed to display it:

      <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>

But now I try to do it with my database item I replaced the normal location to that database element in the way shown below. But it doesn’t work anymore. How can I solve it?

        <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>

>Solution :

I think it is the path problem.

So, please change using the following instead:

<?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'];
  }
}
?>
 <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/<?php echo $thisXmlSheet; ?>').then(function () {
        osmd.render();
        });
        </script>