Create url out of midi file - Javascript

Question

I am sending a midi file from the server via ajax request:

// Create new request add token 
const generateRequest = new XMLHttpRequest();
generateRequest.open('POST', '/generate');
generateRequest.setRequestHeader('X-CSRFToken', csrftoken);

generateRequest.onload = () => {
    // Get response from server
    console.log(generateRequest.response);
    // /tmp/music21/tmp5v_ulgkr.mid
    let objectURL = URL.createObjectURL(generateRequest.response);

    document.getElementById('myVisualizer').src = objectURL;
};

// Add the motif to send with the request
const data = new FormData();
data.append('motif', JSON.stringify(notes));

// Send request
generateRequest.send(data);

Server:

def generate(request):

    if request.method == "POST":

        # Do some stuff
        
        midi = mg.save_melody(melody)

    return HttpResponse(midi, content_type="audio/midi", status=200)

Mi idea is to set the src of mi midi-visualizer to be the midi file:

<midi-visualizer src="" type="staff" id="myVisualizer"></midi-visualizer>
<midi-player sound-font visualizer="#myVisualizer"></midi-player>

But I am getting: Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

I also tried srcObject with no results.

How can I change the src to be my midi file?

Answer 1

I solved it this way:

# Generate the melody based on the seed

@require_http_methods(["POST"])
def generate(request):
    
    # See if method was post
    if request.method == "POST":

        # Do some stuff

        midi = mg.save_melody(melody)

        try:
            with open(midi, 'rb') as f:
                file_data = f.read()

            response = HttpResponse(file_data, content_type="audio/midi", status=200)

        except IOError:
            response = JsonResponse({"succes": False}, status=400)

        return response

And Javascript:

const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;

// Create new request add token 
const generateRequest = new XMLHttpRequest();
generateRequest.open('POST', '/generate');
generateRequest.setRequestHeader('X-CSRFToken', csrftoken);
generateRequest.responseType = 'blob';

generateRequest.onload = () => {
    // Get response from server
    console.log(generateRequest.response);

    let objectURL = URL.createObjectURL(generateRequest.response);
    document.getElementById('myVisualizer').src = objectURL;
    document.getElementById('playerMidi').src = objectURL;
};