nuxt.js - 如何在 Vue 或 Nuxt 中设置洋红色音乐框架

Question

我想了解在 Vue 或 Nuxt 模板中设置洋红色音乐框架的正确方法。到目前为止，我找不到一个例子。有人可以帮我完成这个设置吗？

我正在关注来自（https://hello-magenta.glitch.me/）的洋红色音乐的 hello world 示例，并尝试将此示例合并到 VueJS 或 NuxtJS 框架中

这是我尝试使用 VueJS 设置 Magenta 的存储库的链接- https://github.com/Dantonyswamy/magentamusic-vue

Answer 1

Actually got this working on the Vue template. I created a separate JS file and made sure the "model" variable and the newly instantiated class variable "mm" to be different and it was working fine.

Here is the separate JS file: ./plugins/magenta.js

    const mm = require("@magenta/music/node/music_vae");
    const core = require("@magenta/music/node/core");

    const globalAny = global;
    globalAny.performance = Date;
    globalAny.fetch = require("node-fetch");

    const model = new mm.MusicVAE(
      "https://storage.googleapis.com/magentadata/js/checkpoints/music_vae/mel_2bar_small"
    );
    const player = new core.Player();

export { player };
export { model };

Exported the player and model to the vue component /components/music.vue

<template>
  <v-container fluid>
    <v-col cols="12">
      <v-row align="center" justify="center">
        <v-card class="mx-auto" max-width="400">
          <v-card-text>
            <div>Web experiment with</div>
            <p class="display-1 text--primary">
              Ma•gen•ta
            </p>
            <p>
              trying to make it happen on VueJS template. Hopefully it works!
            </p>
            <div class="text--primary">
              click the play button to hear .<br />
              "Twinkle Twinkle little star" music
            </div>
          </v-card-text>
          <v-card-actions>
            <v-btn text color="deep-purple accent-4" @click="play">
              Play
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-row>
    </v-col>
  </v-container>
</template>
<script>
import { player, model } from "@/plugins/magenta";
export default {

  methods: {
    play() {
      model
        .initialize()
        .then(() => model.sample(1))
        .then(samples => {
          player.resumeContext();
          player.start(samples[0]);
        });
    }
  }
};
</script>

Answer 2

1. 在https://www.npmjs.com/package/@magenta/music安装模块

npm i @magenta/music

2. 在 vue 或 nuxt 中使用 main.js 注册模块。

const model = require('@magenta/music/node/music_vae');
const core = require('@magenta/music/node/core');

// These hacks below are needed because the library uses performance and fetch which
// exist in browsers but not in node. We are working on simplifying this!
const globalAny: any = global;
globalAny.performance = Date;
globalAny.fetch = require('node-fetch');

// Your code:
const model = new mode.MusicVAE('/path/to/checkpoint');
const player = new core.Player();
model
  .initialize()
  .then(() => model.sample(1))
  .then(samples => {
    player.resumeContext();
    player.start(samples[0])
  });