1

I'm fairly new to Django and React but have a good grasp of Python and JavaScript.

What I'm trying to do is use the Web MIDI API to monitor some MIDI data, extrapolate some information from it and store that in a database. It's basically for a DAW, Software synth monitoring system, information can be transmitted as MIDI to the browser (via IAC) and then various pieces of information stored in the database. This needs to be done per user, with user data separation. I'm guessing I would need to implement a CRUD API. I currently have a Python project that does this and holds the data in memory formatted as JSON - the plan is to take this and turn it in to a Web App.

I've watched and followed a bunch of tutorials on integrating Django & React and also found this boilerplate for a basic login system.

https://github.com/justdjango/django-react-boilerplate

If possible I'd like to use this and just add in the functionality I need, can anyone point me in the right direction of where to start and where I would add the additional code for the MIDI stuff to this boilerplate.

There is another stage to this project but my aim is to tackle this step first and hopefully I'll gain a better understanding from there.

I've looked at this question:

django: keep each users data separate

jbflow
  • 578
  • 2
  • 16

1 Answers1

1

I found the best way of integrating it after a bit of trial and error, so I'll answer it here for anyone else looking to do this kind of thing.

I've used a midi.js script with all the Web MIDI logic contained.

At the moment it just looks like this:

export default function () {
  navigator.requestMIDIAccess().then(onMIDISuccess);

  function onMIDISuccess(midiAccess) {
    for (var input of midiAccess.inputs.values())
      input.onmidimessage = getMIDIMessage;
  }
}

function getMIDIMessage(msg) {
  console.log(msg.data);
}

Then I've used a react component that renders nothing but imports and calls this midi logic from within the hook componentDidMount(). THIS was the key part that was missing and what makes it work. I've read a bit about it and it's to do with the lifecycle of the App.

That looks like this:

import { Component } from "react";
import midi from "./midi";

class ReceiveMIDI extends Component {
  componentDidMount() {
    midi();
  }

  render() {
    return null;
  }
}

export default ReceiveMIDI;

So far this is working for just logging the data to the console, I've already got a scaffold App set up and I'm now just writing a function to turn the MIDI into a post request to store the data in the database.

jbflow
  • 578
  • 2
  • 16