<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./opensheetmusicdisplay.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
/* padding-bottom: 60px; */
/* height: 600px; */
/* overflow: hidden; */
}
/* .vf-text {
display: none;
} */
#cursorImg-0 {
display: none;
}
</style>
</head>
<body>
<div id="osmdContainer" />
<script>
var osmd = new opensheetmusicdisplay.OpenSheetMusicDisplay("osmdContainer");
osmd.setOptions({
backend: "svg",
drawTitle: false,
drawPartNames: false,
drawLyricist: false,
});
// osmd.EngravingRules.RenderMultipleRestMeasures = true;
// osmd.EngravingRules.CompactMode = true;
// osmd.EngravingRules.PageTopMarginNarrow = 5.0; // for compact mode
// osmd.EngravingRules.PageBottomMargin = 15.0;
// osmd.EngravingRules.DYMusicScoreType =
// state.musicRenderType === EnumMusicRenderType.staff ? "staff" : "jianpu";
// // 如果为固定调,需要加入全局
// if (state.musicRenderType === EnumMusicRenderType.fixedTone) {
// window.sett = {
// keySignature: true,
// };
// }
// debugger
// console.log('osmd.EngravingRules')
// osmd.EngravingRules.StaffDistance = 1.0;
// osmd.EngravingRules.BetweenStaffDistance = 1.0;
// osmd.EngravingRules.MinimumStaffLineDistance = 1.0;
//osmd.EngravingRules.MinSkyBottomDistBetweenStaves = 1.0; // default 1.0. this can cause collisions with slurs and dynamics sometimes
osmd.EngravingRules.MinSkyBottomDistBetweenSystems = 3.0; // default 5.0
// note that osmd.EngravingRules === osmd.rules, since it's passed as a reference
osmd.EngravingRules.MinimumDistanceBetweenSystems = 1;
// osmd.setPageFormat('794x1123')
osmd.setPageFormat('650x884')
function getSvgPngToSize(osmd) {
if (osmd) {
if (osmd.Drawer.Backends.length > 0) {
var imgList = []
for (var idx = 0, len = osmd.Drawer.Backends.length; idx < len; idx++) {
var backend = osmd.Drawer.Backends[idx]
var state = backend.ctx.state;
var width = backend.ctx.width / state.scale.x;
var height = backend.ctx.height / state.scale.y;
var cont = new XMLSerializer().serializeToString(
backend.ctx.svg
)
imgList.push({
img: cont,
width: width,
height: height,
})
}
return imgList
}
} else {
console.log('没有OSMD')
}
}
function render() {
osmd.render();
// console.log(getSvgPngToSize(osmd), 'getSvgPngToSize(osmd)')
window.parent.postMessage({
api: 'musicStaffRender',
loading: false,
osmdImg: getSvgPngToSize(osmd)
}, '*');
}
function renderXml(xmlUrl, partIndex, type) {
if(type) {
let str = 'staff'
if (type === 'first') {
str = 'jianpu'
window.sett = {
keySignature: false,
};
} else if (type === 'fixed') {
str = 'jianpu'
window.sett = {
keySignature: true,
};
}
osmd.EngravingRules.DYMusicScoreType = str
}
osmd
.load(xmlUrl)
.then(
function () {
// for (let i = 0; i < osmd.Sheet.Instruments.length; i++) {
// // console.log(osmd.Sheet.Instruments[i].Name);
// osmd.Sheet.Instruments[i].Visible = i === partIndex;
// }
osmd.zoom = .5
render();
}
);
}
function resetRender(partIndex) {
for (let i = 0; i < osmd.Sheet.Instruments.length; i++) {
osmd.Sheet.Instruments[i].Visible = i === partIndex;
}
render();
}
function resetRenderPage(type, xmlUrl) {
let str = 'staff'
if (type === 'first') {
str = 'jianpu'
window.sett = {
keySignature: false,
};
} else if (type === 'fixed') {
str = 'jianpu'
window.sett = {
keySignature: true,
};
}
osmd.EngravingRules.DYMusicScoreType = str
// console.log(type, xmlUrl)
osmd
.load(xmlUrl)
.then(
function () {
// for (let i = 0; i < osmd.Sheet.Instruments.length; i++) {
// // console.log(osmd.Sheet.Instruments[i].Name);
// osmd.Sheet.Instruments[i].Visible = i === partIndex;
// }
osmd.zoom = .5
render();
}
);
}
</script>
</body>
</html>