Блог

Я пытаюсь воспроизвести и получить midi — сигналы из midi-файла в quasar. Я использую библиотеку midi-player-js, но не могу заставить ее работать.

вот мой компонент:

 <template>
  <div>
    PLAY
    <q-btn round @click="play" size="10px" />
  </div>
</template>

<script>
import { Player } from "midi-player-js";

export default {
  name: "Playlist",
  methods: {
    play: function () {
      console.log("PLAY");
      let player = new Player((event) => {
        console.log("TEST", event);
      });
      //   var Player = new MidiPlayer.Player(function (event) {
      //     console.log(event);
      //   });
      player.loadFile("./test.mid");
      player.play();
    },
  },
};
</script>
 

При использовании последней версии библиотеки (2.0.14) я получаю сообщение об ошибке:

 Uncaught TypeError: midi_player_js__WEBPACK_IMPORTED_MODULE_0__.Player is not a constructor
    at Proxy.play (VM198 Playlist.vue:23)
    at callWithErrorHandling (runtime-core.esm-bundler.js?9e79:155)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?9e79:164)
    at emit (runtime-core.esm-bundler.js?9e79:993)
    at eval (runtime-core.esm-bundler.js?9e79:7310)
    at onClick (QBtn.js?9c40:152)
    at callWithErrorHandling (runtime-core.esm-bundler.js?9e79:155)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?9e79:164)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?8886:349
 

И когда я использую версию 2.0.3 (ту же, что используется в этом рабочем примере) Я получаю сообщение об ошибке:

 Uncaught Error: Cannot find module 'fs'
    at s (midiplayer.js?5109:1)
    at eval (midiplayer.js?5109:1)
    at Player.loadFile (midiplayer.js?5109:2027)
    at Proxy.play (Playlist.vue?3e9b:31)
    at callWithErrorHandling (runtime-core.esm-bundler.js?9e79:155)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?9e79:164)
    at emit (runtime-core.esm-bundler.js?9e79:993)
    at eval (runtime-core.esm-bundler.js?9e79:7310)
    at onClick (QBtn.js?9c40:152)
    at callWithErrorHandling (runtime-core.esm-bundler.js?9e79:155)
 

Если я использую этот код:

 <template>
  <div>
    PLAY
    <q-btn round @click="play" size="10px" />
  </div>
</template>

<script>
import MidiPlayer from "midi-player-js";

export default {
  name: "Playlist",
  methods: {
    play: function () {
      console.log("PLAY");
      var player = new MidiPlayer.Player(function (event) {
        console.log(event);
      });
      player.loadFile("./test.mid");
      player.play();
    },
  },
};
</script>
 

Я получаю сообщение об ошибке:

 runtime-core.esm-bundler.js?9e79:218 Uncaught loadFile is only supported on Node.js
 

Чего мне не хватает? Может быть, то, как я загружаю промежуточный файл?