利用abcjs和@tonejs/midi 将mid文件转换为乐谱

❤️砥砺前行，不负余光，永远在路上❤️
❤️Github主页：https://github.com/codernmx
❤️公众号：水印相机打卡

前言

这是vue实现的一个效果 upload组件可以自己处理，拿到可以访问的mid文件地址即可，我这里getImg 处理了一些文件路径问题，没有的话可做相关修改，

谱子可能不是很精准，自测

一、效果

二、思路

1.将文件上传到服务端

2.@tonejs/midi解析midi文件

3.abcjs 绘制乐谱

三、安装导入abcjs和@tonejs/midi

cnpm i @tonejs/midi
cnpm i abcjs

import {
   Midi} from '@tonejs/midi';
import abcjs from 'abcjs';

三、相关代码

<template>
	<div>
		<UploadImg :showTip="showTip" :imgList="imgList" @getImg="getImg"
			@delImg="(val)=>{formData.sourceUrl = ''}"/>
		<h1>MIDI File Player</h1>
		<div style="width: 100%" id="abcjs-score"></div>
	</div>
</template>

<script>
import {
    ElMessage } from "element-plus";
import {
    Midi } from '@tonejs/midi';
import abcjs from 'abcjs';
import UploadImg from