如何通过Ajax获取MIDI文件并设置midi-visualizer的src？

这个错误其实是两个关键问题导致的：一是前端没有正确配置Ajax请求的响应类型，二是服务器返回的是文件路径字符串而非MIDI文件的二进制数据。咱们一步步来修复：

第一步：修复服务器端Python代码 #

你当前的服务器代码返回的是MIDI文件的路径字符串，但前端需要的是文件的二进制内容。修改代码，读取生成的MIDI文件并返回二进制数据：

def generate(request):
    if request.method == "POST":
        # 生成旋律的原有逻辑不变
        midi_file_path = mg.save_melody(melody)
        
        # 读取MIDI文件的二进制内容
        with open(midi_file_path, 'rb') as midi_file:
            midi_binary = midi_file.read()
        
        # 返回二进制数据，指定正确的内容类型
        return HttpResponse(midi_binary, content_type="audio/midi", status=200)
        
        # 可选：如果临时文件不需要保留，可以在这里删除它
        # import os
        # os.remove(midi_file_path)

第二步：修复前端Ajax代码 #

需要给XMLHttpRequest设置responseType为blob，这样服务器返回的二进制数据会被解析成Blob对象，才能用URL.createObjectURL生成合法的对象URL：

// Create new request add token
const generateRequest = new XMLHttpRequest();
generateRequest.open('POST', '/generate');
generateRequest.setRequestHeader('X-CSRFToken', csrftoken);
// 关键：设置响应类型为blob，确保返回的是二进制Blob对象
generateRequest.responseType = 'blob';

generateRequest.onload = () => {
    if (generateRequest.status === 200) {
        // 现在response是Blob对象，可直接生成对象URL
        let objectURL = URL.createObjectURL(generateRequest.response);
        document.getElementById('myVisualizer').src = objectURL;
        
        // 可选：当组件不再使用该URL时，记得释放资源避免内存泄漏
        // 比如在页面卸载或更换src时调用：
        // URL.revokeObjectURL(objectURL);
    } else {
        console.error('请求失败，状态码：', generateRequest.status);
    }
};

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

// Send request
generateRequest.send(data);

这样修改后，前端就能正确获取MIDI文件的二进制数据，生成合法的对象URL并赋值给midi-visualizer的src，搭配midi-player就能正常工作了。

内容的提问来源于stack exchange，提问作者juancopi81