背景:用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下载