【javascript】『require('midi-player-js')』を使いたい。（その為にES2015を使用したい。）

Question

JavaScriptでmidiファイルを再生しようとしています。

そこで**『require('midi-player-js')』**を使おうと考えました。参考

   /*【midiPlayer.js】*/

   const MidiPlayer = require('midi-player-js');
   
   // Initialize player and register event handler
   var Player = new MidiPlayer.Player(function(event) {
   	console.log(event);
   });
   
   // Load a MIDI file
   Player.loadFile('./再生させたいmidi.mid');
   Player.play();

しかし、このままだとrequire()はNodeで動くからブラウザだと使えませんよと怒られてしまうので、

browserify midiPlayer.js -o midiPlayerApp.js

を実行してブラウザで『require('midi-player-js')』を扱えるファイルを作成しようとしました。
ですが、これを実行しようとすると

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1291:0)

というエラーが出てきます。

調べたところ、ここのリンクの先 にあるように、
ES2015というのをインストールする必要があるらしく、

npm install babel-preset-es2015 --save-dev

を実行しました。
「package.json」を確認したところ
"babel-preset-es2015": "^6.24.1",
が出現しているのでおそらくここまでは正しく実行できていると思われます。

そして次に**『インストールしたプリセットを使用するようにbabelifyに指示する必要があります。』**
とあるのですが、この部分のやり方がよくわかりません。

一応、

npm install eslint --save-dev

や

npm install --save-dev babelify @ babel / core

などを実行してみて、
「./node_modules/.bin/」に移動して『eslint --init』というのを実行などしたのですが、
その後に作成されるという「.eslintrc.js」というファイルが作成されていなかったりとなかなか進展しません。
これ以上よくわかっていないことを適当に試すのは怖くなってきたので質問させていただきます。

そもそも、やろうとしている事が的外れという可能性もありますし、ご助言いただけると幸いです。

---

• Node(16.2.0)
• npm(7.13.0)

Answer 1

• html-midi-player - npm

は、どうでしょうか？

• サンプルページ

Comments

[Knomono]

教えて頂いたおかげで、MIDIファイルを再生自体はできるようになりました。ありがとうございます。

ただ欲を言うと、JavaScript上で何かを選択したタイミングだったり、自分で作ったボタンを押したタイミングで再生できるようにしたいと考えています。
なので、教えて頂いた<midi-player>を見えない状態にして(見た目の関係上見えなくさせたい)、別のボタンを押した場合<midi-player>を再生させるということが出来れば解決かな？
と思い、試しに

・class="display-none"を付けて
　.display-none {
display: none;
}

・別のボタンのclick処理内に、
document.getElementById('player').play(); //player=<midi-player>のid

などとしてみたのですが、どれもうまくいきませんでした。
もっと良いやり方があったりするのでしょうか？
特に再生・一時停止ボタンの制御のやり方を知っていましたら教えて頂けると助かります。