Question

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

我正在沿用（https://hello-magenta.glitch.me/）中洋红色音乐的hello世界示例，并尝试将此示例整合到VueJS或NuxtJS框架中

这是我尝试使用VueJS- https://github.com/Dantonyswamy/magentamusic-vue

设置Magenta的仓库的链接。

Answer 1

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

npm i @magenta/music

在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])
  });

Answer 2

实际上是在Vue模板上完成此工作的。我创建了一个单独的JS文件，并确保“模型”变量和新实例化的类变量“ mm”不同，并且工作正常。

这是单独的JS文件： ./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 };

将播放器和模型导出到vue组件 /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>

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

2 个答案: