|
|
@@ -0,0 +1,167 @@
|
|
|
+<!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,
|
|
|
+ drawTitle: false,
|
|
|
+ drawPartNames: false,
|
|
|
+ drawLyricist: false,
|
|
|
+ followCursor: false,
|
|
|
+ autoResize: true,
|
|
|
+ drawSubtitle: false,
|
|
|
+ drawTitle: false,
|
|
|
+ autoBeam: true,
|
|
|
+ drawMetronomeMarks: false,
|
|
|
+ drawMeasureNumbers: false,
|
|
|
+ drawComposer: false,
|
|
|
+ autoGenerateMutipleRestMeasuresFromRestMeasures: true,
|
|
|
+ autoGenerateMultipleRestMeasuresFromRestMeasures: true,
|
|
|
+ });
|
|
|
+ osmd.EngravingRules.RenderMultipleRestMeasures = true;
|
|
|
+ osmd.EngravingRules.CompactMode = true;
|
|
|
+ osmd.EngravingRules.PageTopMarginNarrow = 6.0; // for compact mode
|
|
|
+ osmd.EngravingRules.PageBottomMargin = 15.0;
|
|
|
+ osmd.EngravingRules.PageLeftMargin = 1.0
|
|
|
+ osmd.EngravingRules.PageRightMargin = 1.0
|
|
|
+
|
|
|
+ // console.log('osmd.EngravingRules', 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, isComberRender) {
|
|
|
+ osmd
|
|
|
+ .load(xmlUrl)
|
|
|
+ .then(
|
|
|
+ function () {
|
|
|
+ // 是否合并显示
|
|
|
+ if (!isComberRender) {
|
|
|
+ for (let i = 0; i < osmd.Sheet.Instruments.length; i++) {
|
|
|
+ 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>
|
黄琪勇