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

Question

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

我正在遵循 (https://hello-magenta.glitch.me/( 中洋红色音乐的 hello world 示例，并尝试将此示例合并到 VueJS 或 NuxtJS 框架中

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

Answer 1

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

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>