grimmdude / MidiWriterJS

♬ A JavaScript library which provides an API for programmatically generating and creating expressive multi-track MIDI files and JSON.
MIT License
547 stars 58 forks source link

Add browser support to save .mid file in browser. #71

Closed yilihjy closed 3 years ago

yilihjy commented 4 years ago

Hello, I have did a little work to support this lib to run in browser. This change only add a browser.js file in build folder. When somebody want to use this lib to create a .mid file in browser, use this new file. For example, I use this lib in a vue project like below:

import MidiWriter from 'midi-writer-js'
\\ ......
var track = new MidiWriter.Track();
var note = new MidiWriter.NoteEvent({pitch: ['C4', 'D4', 'E4'], duration: '4'});
track.addEvent(note);
var write = new MidiWriter.Writer(track);
write.saveMIDI('test');
\\ ......

These code run well!

grimmdude commented 4 years ago

Hi @yilihjy,

Thanks for taking a swing at it. I think we can do this without the extra dependencies and just minor config changes to rollup.config.js. You can see how we handled in MidiPlayerJS:

https://github.com/grimmdude/MidiPlayerJS/blob/0c9c74f8b7eb6daaeca1420c211e045a770cbffb/rollup.config.js#L5-L15

You want to give that a shot?

yilihjy commented 4 years ago

Hi @grimmdude , I have trid your former advice. But when I had reomved the dependence of @rollup/plugin-replace , some bad things happened. In my vue nuxt project (a webpack project), some error occured , like below:

 ERROR  Failed to compile with 1 errors                                                                                       friendly-errors 11:01:43  

This dependency was not found:                                                                                                friendly-errors 11:01:43  
                                                                                                                              friendly-errors 11:01:43  
* fs in ./node_modules/midi-writer-js/browser/midiwriter.js                                                                   friendly-errors 11:01:43  
                                                                                                                              friendly-errors 11:01:43  
To install it, you can run: npm install --save fs                                                                             friendly-errors 11:01:43 

To deal with it, I created a rollup.config.browser.js for browser build. Now, there are three new files in brower folder. brower/index.mjs It is a esm file for webpack project. Just use import MidiWriter from 'midi-writer-js' to use in webpack project.
midiwriter.bundle.js and midiwriter.bundle.min.js for Githubissues.

  • Githubissues is a development platform for aggregating issues.