feat(score tag): support RenderAbc options

Modified the score tag to pass custom options to the abcjs RenderAbc interface.
This enhancement enables proper rendering of guitar tablature with custom
settings such as instrument tuning, labels, and formatting options.
This commit is contained in:
Yuchen Mu
2025-02-24 19:03:46 +08:00
Unverified
parent 13720bd94d
commit 2de7d34b2b
2 changed files with 80 additions and 18 deletions

View File

@@ -1,17 +1,51 @@
script.
(() => {
const abcjsInit = () => {
const abcjsFn = () => setTimeout(() => {
document.querySelectorAll(".abc-music-sheet").forEach(ele => {
if (ele.children.length > 0) return
ABCJS.renderAbc(ele, ele.innerHTML, {responsive: 'resize'})
})
}, 100)
typeof ABCJS === 'object' ? abcjsFn()
: btf.getScript('!{url_for(theme.asset.abcjs_basic_js)}').then(abcjsFn)
}
(function() {
var abcjsInit = function() {
var abcjsFn = function() {
setTimeout(function() {
var sheets = document.querySelectorAll(".abc-music-sheet");
for (var i = 0; i < sheets.length; i++) {
var ele = sheets[i];
if (ele.children.length > 0) continue;
// 从 data-params 属性中解析参数
var params = {};
var dp = ele.getAttribute("data-params");
if (dp) {
try {
params = JSON.parse(dp);
} catch (e) {
console.error("解析 data-params 失败:", e);
}
}
// 将解析出的参数与 responsive 参数合并,
// 保证 params 中的内容在 responsive 之前
var options = {};
for (var key in params) {
if (params.hasOwnProperty(key)) {
options[key] = params[key];
}
}
options.responsive = "resize";
// 使用 ABCJS.renderAbc 渲染乐谱
ABCJS.renderAbc(ele, ele.innerHTML, options);
}
}, 100);
};
window.pjax ? abcjsInit() : window.addEventListener('load', abcjsInit)
btf.addGlobalFn('encrypt', abcjsInit, 'abcjs')
})()
if (typeof ABCJS === "object") {
abcjsFn();
} else {
btf.getScript("!{url_for(theme.asset.abcjs_basic_js)}").then(abcjsFn);
}
};
if (window.pjax) {
abcjsInit();
} else {
window.addEventListener("load", abcjsInit);
}
btf.addGlobalFn("encrypt", abcjsInit, "abcjs");
})();