Tips for transforming a magenta.js note sequence into a MIDI file

I need to convert a note sequence using Magenta.js into a midi file and generate a url for users to download. The goal is to use this url in a midi-player/visualizer.

// Creating a Magenta note sequence
generateMelody(sendedNotes, 0.7, document.getElementById('bpm').value).then((magentaSequence) => {

    // Converting the Magenta sequence into midi
    const magentaMidi = core.sequenceProtoToMidi(magentaSequence);

    // Converting byte array into a file
    const magentaFile = new Blob([magentaMidi], { type: 'audio/midi' })

    // Generating the URL of the file
    const magentaURL = URL.createObjectURL(magentaFile);

    // Building midi elements and filling out the template
    const magentaContent = melodyTemplate({'id': 2, 'src': magentaURL});

    // Adding a new item to the results
    document.querySelector('#results').innerHTML += magentaContent;

However, I am encountering the following error:

Uncaught (in promise) Error: The sequence you are using with the visualizer does not have a totalTime field set, so the visualizer can't be horizontally sized correctly.

Answer №1

After some tinkering, I managed to get it working by including the following line:

magentaSequence.notes.forEach(note => note.velocity = tempo);

It appears that specifying a velocity for the notes is crucial in making this code function as intended. Additional insights can be found at this GitHub link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to assign an argument to a function in commander.js

Having some trouble passing an option to a custom command in commander.js... program .command('init [options]') .description('scaffold the project') .option('-b, --build', 'add "build" folder with subfolders') . ...

Having difficulty importing a .glb file in Three.js with the import.meta.url method when using the parcel bundler

Greetings! I recently embarked on creating a fun little game using Three.js for me and my friends. After watching numerous tutorials on how to import .gltf and .glb files, I decided to use the parcel bundler with the command: npx parcel ./src/index.html to ...

Unable to close expanded grid item using close button

Currently, I am working on a simple 3 column grid where each grid item consists of an image and a close button. The functionality I want to achieve is that when a grid item is clicked, the image should expand and the close button should become visible. Th ...

Hide the search popup when the user clicks on the "find" button within the jqgrid

What is the solution to closing the search popup when clicking on the Find button? When I search for data in jqgrid and click on the Find button, the Search popup remains open even though the data has been filtered. How can I close the popup after searchin ...

Having trouble with my Javascript code - my HTML page is refusing to load and the innerHTML

Below is my code in the HTML file. I have implemented a flatpickr date picker to allow users to select a date. On closing the calendar, I intend to update the current document by adding some HTML content. However, this functionality does not seem to be wor ...

Creating Beautiful Math Equations with LaTeX in EaselJS

Can MathJAX or a similar tool be integrated into an EaselJS DisplayObject? I am looking for alternative options. I want to render text like $$ 5 + 3 - 3 = 5 $$ on a canvas that serves as an EaselJS stage. Ideally, I hope to achieve this using the Text Cl ...

The function of window.location is a mixed bag of success and failure

I am encountering an issue with a JavaScript function that is supposed to navigate to the next page when clicking a button. The function works correctly for step 1, but it fails for step 2. Upon executing the function using nextstep = 'form', _b ...

Intersecting Rays and Positioning Spheres with three.js

I have a scenario where ray intersection is functioning properly with tube geometry. Upon ray intersection, a small red sphere and a tooltip appear next to the cursor. The image below shows the scene without a header: When I include a header using a div e ...

The issue with using useState on arrays is that it is not functioning properly with React Hooks

const [LatestNews, setLatestNews] = useState([]); useEffect(() => { async function fetchLatestData() { const result = await database.collection('latestnews').get(); result.docs.forEach(doc => ...

Jest came across a surprising token that it wasn't expecting while working with React and TypeScript in conjunction with Jest and React-testing-L

An unexpected token was encountered by Jest while using React and TypeScript along with Jest and React-testing-Library. Error occurred at: E:\Git\node_modules@mui\x-date-pickers\internals\demo\index.js:1 ({"Object." ...

The dynamic pages specified by the graphql query in the gatsby-node.js file are not being generated by Gatsby.js as expected

Even after running gatsby clean followed by npm run develop, the issue persists... Several individuals familiar with the Gatsby framework have reviewed my gatsby-node.js file, but the problem remains puzzling... Below is a snippet of my gatsby-node.js fi ...

What is the best way to define coordinates or set margins for the autoTable component in jsPdf when using React js?

While working with the jsPdf library to create a PDF in React, I am encountering an issue where I am unable to set margins for the autoTable when there are multiple tables on a single page. Below is the code snippet: import React from "react"; ...

Refresh the nested state without affecting the parent state using a URL parameter in ui-router

Within my app.js file, I am experiencing an issue with a parent state and a nested state. The parent state contains a button that is responsible for controlling what is displayed in the nested state. This is achieved by setting a url parameter, and the con ...

Developing a custom Jquery UI modal with inactive buttons

Is there a way to open the dialog box with the buttons disabled and grayed out? $("#battleWindow").dialog({//open battling window title: "Battle!", closeOnEscape: false, modal: true, width: 500, buttons:[{ text: "Cast", ...

TypeScript will show an error message if it attempts to return a value and instead throws an

Here is the function in question: public getObject(obj:IObjectsCommonJSON): ObjectsCommon { const id = obj.id; this.objectCollector.forEach( object => { if(object.getID() === id){ return object; } }); throw new Erro ...

Tips for preventing the need to convert dates to strings when receiving an object from a web API

I am facing an issue with a class: export class TestClass { paymentDate: Date; } Whenever I retrieve an object of this class from a server API, the paymentDate field comes as a string instead of a Date object. This prevents me from calling the ...

What is the best way to save a JavaScript array in HTML5 local storage?

I am looking for a way to store an array of inputs using the local storage feature of HTML5. Currently, I am able to add weight inputs to the array, but they disappear once I refresh the page. Can anyone assist me with this? <!DOCTYPE html> <html ...

Issue: The text.replace function is not working in an AngularJS filter. What steps can be taken to resolve this?

While working in Angular, I attempted to utilize a filter to replace certain strings with different words. Despite trying numerous examples, it seems like my code is missing something crucial that I can't seem to pinpoint. Here's the snippet of m ...

Form submission is not functioning as expected

I am having trouble with my form submission. When I try to submit the form, nothing happens. I have tried various solutions but have not been able to resolve the issue. I have reviewed all available resources but still cannot figure out why my code is not ...

Utilizing JSON data from Google Maps Matrix with JavaScript

I am trying to fetch the real-time duration of a particular route on Google Maps through my JavaScript code. However, I seem to be stuck. Here's what I have written so far: $(document).ready(function Duration() { var d = new Date(); $.ajax({ ...