You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
4.1 KiB
105 lines
4.1 KiB
{% extends "/Bases/StandardWebPage.html.twig" %}
|
|
|
|
{% block content %}
|
|
|
|
<script src="/Static/JS/ThirdParty/abcjs-basic.js"></script>
|
|
<!--<script src="/Static/JS/ThirdParty/abcjs-plugin-min.js"></script>-->
|
|
<link rel="stylesheet" href="/Static/CSS/ThirdParty/abcjs-audio.css">
|
|
|
|
|
|
<div class="InnerContent">
|
|
<div>
|
|
<div class="container">
|
|
<div class="left">
|
|
<div class="DLContainer">
|
|
<h2>{{ "Tune Overview"|translate }}</h2>
|
|
<dl>
|
|
<dt>{{ "Time Signature"|translate }}</dt>
|
|
<dd>{{ TuneDetails.TimeSignature }}</dd>
|
|
|
|
<dt>{{ "Key Signature"|translate }}</dt>
|
|
<dd>{{ TuneDetails.KeySignature }}</dd>
|
|
|
|
<dt>{{ "Copyright"|translate }}</dt>
|
|
<dd>{{ TuneDetails.Copyright }}</dd>
|
|
|
|
<dt>{{ "Number of Parts"|translate }}</dt>
|
|
<dd>{{ TuneDetails.Parts|json_encode }}</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<div class="center">
|
|
<div id="NotationContainer--{{ TuneDetails.ID }}"></div>
|
|
<div>
|
|
<h2>{{ "ABC Notation"|translate }}</h2>
|
|
<pre id="RawABCReadout--{{ TuneDetails.ID }}">
|
|
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<h2>{{ "Audio"|translate }}</h2>
|
|
<div id="MIDI--{{ TuneDetails.ID }}"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
if (!window.ABCJS) {
|
|
console.error("ABCJS library failed to load.");
|
|
}
|
|
</script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const targetTuneID = '{{ TuneDetails.ID }}';
|
|
API_GET("/V1/GetABCFile.php?tune-variant-id=" + targetTuneID)
|
|
.then(payload => {
|
|
// Ensure required DOM elements exist
|
|
const notationContainer = document.getElementById("NotationContainer--" + targetTuneID);
|
|
const rawABCContainer = document.getElementById("RawABCReadout--" + targetTuneID);
|
|
const midiContainer = document.getElementById("MIDI--" + targetTuneID);
|
|
|
|
if (!notationContainer || !rawABCContainer || !midiContainer) {
|
|
console.error(`Missing DOM elements for targetTuneID: ${targetTuneID}`);
|
|
return;
|
|
}
|
|
|
|
console.log(window.ABCJS);
|
|
|
|
// Render the ABC notation
|
|
const tunes = window.ABCJS.renderAbc(
|
|
notationContainer.id,
|
|
payload,
|
|
{
|
|
add_classes: true,
|
|
format: {
|
|
gchordfont: "Atkinson Hyperlegible",
|
|
annotationfont: "Atkinson Hyperlegible",
|
|
headerfont: "Atkinson Hyperlegible",
|
|
infofont: "Atkinson Hyperlegible",
|
|
repeatfont: "Atkinson Hyperlegible",
|
|
tempofont: "Atkinson Hyperlegible",
|
|
titlefont: "Atkinson Hyperlegible",
|
|
voicefont: "Atkinson Hyperlegible",
|
|
wordsfont: "Atkinson Hyperlegible",
|
|
},
|
|
}
|
|
);
|
|
|
|
// Display raw ABC notation
|
|
rawABCContainer.innerHTML = payload;
|
|
|
|
|
|
|
|
window.ABCJS.startAnimation(notationContainer.id, tunes[0], {
|
|
showCursor: true,
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error("Error fetching ABC data:", error);
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|