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>
CodePudding user response:
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>