xml或者musicxml文件转五线谱

To-strive

于 2022-08-04 15:36:25 发布

阅读量966

点赞数

分类专栏：前端开发 vue3.0 文章标签： xml 前端 musicxml vue.js webpack

本文链接：https://blog.csdn.net/qq_33848658/article/details/126160268

版权

前端开发同时被 2 个专栏收录

15 篇文章 1 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

背景：用xml或者musicxml文件转五线谱

技术：vue、opensheetmusicdisplay插件

项目目录结构：

使用方式：

1、官网下载架包opensheetmusicdisplay.min.js

地址：https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/releases

2、index.html中引入包文件

script src="opensheetmusicdisplay.min.js"></script>

3、App.vue

mounted() {
    const self = this;
    self.osmd = new opensheetmusicdisplay.OpenSheetMusicDisplay("osmdCanvas", {
      autoResize: true, // just an example for an option, no option is necessary.
      backend: "svg",
      drawTitle: false,
    });
    //const loadPromise = self.osmd.load("/resource/Saltarello_sample.musicxml");
    const loadPromise = self.osmd.load("/resource/test.xml");
    loadPromise.then(function () {
      self.osmd.render();
    });
  },
  destroyed() {},
  methods: {},
};

4、项目源代码：

vue项目+opensheetmusicdisplay插件+xml或者musicxml文件转五线谱-Webpack文档类资源-CSDN下载