Question

我正在尝试使用midi，react.js和midiConvert来可视化tone.js文件。

我认为导入有问题；我有这个错误：

Uncaught Bad .mid file - header not found

我已经测试过midi文件，没关系。我尝试将midiconvert与node和express一起使用，以查看是否有东西，但对象中什么也没有。

这是我的代码：

import React, { Component } from 'react';
import './App.css';
import Tone from 'tone';
import * as Pixi from 'pixi.js';
import * as MidiConvert from 'midiconvert'

// Pixi.js
var width = 800
var height = 600
var scale = 50
var keyboard = 100
var app = new  Pixi.Application(width, height, {backgroundColor: 0x222222})
document.body.appendChild(app.view)

var graphics = new Pixi.Graphics()
graphics.beginFill(0xffffff)

var line = new Pixi.Graphics()
line.beginFill(0xff0000, .5)
line.drawRect(0, 0, width, keyboard)

app.stage.addChild(graphics)
app.stage.addChild(line)

// Tone.js
var synth = new Tone.PolySynth(8, Tone.Synth, {
    oscillator: {
        type: "sine3"
    },
    envelope: {
        attack: .03,
        decay: .1,
        sustain: .2,
        release: .6
    }
}).toMaster()

function playNote(time, event) {
    synth.triggerAttackRelease(event.name, event.duration, time, event.velocity)
}

MidiConvert.load('./zelda.mid').then(function(midi) {
    console.log(midi)
    Tone.Transport.bpm.value = midi.bpm
    Tone.Transport.timeSignature = midi.timeSignature
    midi.tracks.forEach(function(track) {
        var w = width / 127
        track.notes.forEach(function(note) {
            var x = (note.midi / 127) * width
            var y = keyboard + note.time * scale
            var h = note.duration * scale
            graphics.drawRect(x, y, w, h)
        })
        new Tone.Part(playNote, track.notes).start(0)
    })

    Tone.Transport.start()
})

function update() {
    requestAnimationFrame(update)
    graphics.y = -Tone.Transport.seconds * scale
  }

class App extends Component {
  render() {
    return (
      <div className="App">
      hee
       {update()}
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Answer 1

该文件可能没问题，但是react dev服务器（或其他服务器）可能没有从URL提供正确的文件。服务器可能只是在其位置返回HTML。

在浏览器开发工具中查看“网络”标签。
在列表中找到midi文件
右键单击并尝试使用链接打开文件。

Answer 2

我尝试这个只是为了看看：

class App extends Component {

render（）{ 返回（ {MidiConvert.load（'./ zelda.mid'，function（midi）{

        console.log(midi)

        Tone.Transport.bpm.value = midi.bpm
        Tone.Transport.timeSignature = midi.timeSignature

        midi.tracks.forEach(function(track) {
            var w = width / 127
            track.notes.forEach(function(note) {
                var x = (note.midi / 127) * width
                var y = keyboard + note.time * scale
                var h = note.duration * scale
                graphics.drawRect(x, y, w, h)
            })
            new Tone.Part(playNote, track.notes).start(0)
        })

        Tone.Transport.start()
    })}
   {update()}
    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
  </div>
);

} }

但是有这个错误：

Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
in div (at App.js:58)
in App (at index.js:7)
at invariant (invariant.js:42)
at throwOnInvalidObjectType (react-dom.development.js:11898)
at createChild (react-dom.development.js:12109)
at reconcileChildrenArray (react-dom.development.js:12341)
at reconcileChildFibers (react-dom.development.js:12655)
at reconcileChildrenAtExpirationTime (react-dom.development.js:13015)
at reconcileChildren (react-dom.development.js:13006)
at updateHostComponent (react-dom.development.js:13340)
at beginWork (react-dom.development.js:13828)
at performUnitOfWork (react-dom.development.js:15863)
at workLoop (react-dom.development.js:15902)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at invokeGuardedCallback (react-dom.development.js:187)
at replayUnitOfWork (react-dom.development.js:15310)
at renderRoot (react-dom.development.js:15962)
at performWorkOnRoot (react-dom.development.js:16560)
at performWork (react-dom.development.js:16482)
at performSyncWork (react-dom.development.js:16454)
at requestWork (react-dom.development.js:16354)
at scheduleWork$1 (react-dom.development.js:16218)
at scheduleRootUpdate (react-dom.development.js:16785)
at updateContainerAtExpirationTime (react-dom.development.js:16812)
at updateContainer (react-dom.development.js:16839)
at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17122)
at react-dom.development.js:17262
at unbatchedUpdates (react-dom.development.js:16679)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:17258)
at Object.render (react-dom.development.js:17317)
at Object../src/index.js (index.js:7)
at __webpack_require__ (bootstrap 650f6cadcfbff24b1408:678)
at fn (bootstrap 650f6cadcfbff24b1408:88)
at Object.0 (registerServiceWorker.js:117)
at __webpack_require__ (bootstrap 650f6cadcfbff24b1408:678)
at ./node_modules/ansi-regex/index.js.module.exports (bootstrap 650f6cadcfbff24b1408:724)
at bootstrap 650f6cadcfbff24b1408:724

使用midiConvert和Tonejs可视化midi文件

2 个答案: