score:0

i try this just to get a look :

class app extends component {

render() { return ( {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>
);

} }

but there is this error :

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

score:1

the file might be okay but it is possible that the react dev server (or another server) is not serving the correct file from the url. it is possible that the server is just returning an html in its place.

  • look into the network tab in the browser dev tools.
  • locate the midi file in the list
  • right-click and try to open the file using the link.

Related Query

More Query from same tag