huangqiyong
/
classroom


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
							<!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; */
    }
    body::-webkit-scrollbar {
          width: 0;
          display: none;
      }

    /* .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, isComberRender, canSelectTracks) {
      osmd
        .load(xmlUrl)
        .then(
          function () {
            // 是否合并显示
            // console.log(osmd.Sheet.Instruments, isComberRender, canSelectTracks, 'osmd.Sheet.Instruments')
            // if (isComberRender) {
            //   for (let i = 0; i < osmd.Sheet.Instruments.length; i++) {
            //     const trackName = osmd.Sheet.Instruments[i].Name || '';
            //     console.log(trackName, 'trackName', canSelectTracks.includes(trackName))
            //     osmd.Sheet.Instruments[i].Visible = canSelectTracks.includes(trackName)
            //   }
            // }
            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>