Django - как получить доступ к локальным аудиофайлам по разным URL путям?

Заранее спасибо за прочтение. Я работаю над своим финальным проектом для CS50W, который включает в себя работу с серией локальных аудио файлов (пользователь не может загрузить дополнительные файлы в данный момент). Проблема возникает, когда я пытаюсь заполнить атрибут src файлом. У меня есть два пути URL, которые связаны с доступом к этим файлам: new/ и edit/int:id. Когда я получаю доступ к аудиофайлам в new/, все работает как надо, и я могу воспроизвести файл из тега. Однако, когда я пытаюсь получить доступ к файлам по пути edit/int:id, я получаю следующую ошибку:

GET http://localhost/edit/8/media/Aminor_Ipi3udk.mp3 net::ERR_ABORTED 404 (Not Found)

Я относительно новичок в кодировании (только что прошел CS50x, а затем начал CS50w) и не понимаю, почему я получаю эту ошибку или как я могу ее исправить - я делаю одно и то же для обоих путей, но работает только в одном из них. Я буду благодарен, если кто-нибудь поможет мне исправить это или хотя бы направит меня в сторону понимания того, почему это происходит.

views.py

def edit(request, id):
    song = Song.objects.get(id=id)
    sections = Section.objects.filter(song=song).order_by('order')
    chords = Chord.objects.all()
    if request.method == "GET":
        return render(request, "songbud/edit.html", {
            'song':song,
            'sections':sections,
            'chords':chords
            })

songbud.js

function select_audio_edit(elem) {
    var parent_Node = elem.parentNode;
    console.log(parent_Node.childNodes);
    var file = parent_Node.childNodes[3].options[parent_Node.childNodes[3].selectedIndex].getAttribute('data-file');
    //console.log(file);
    //console.log(parent_Node.childNodes);
    parent_Node.childNodes[5].setAttribute("src", file);

    return false;
};

function fill_audio() {
    let elements = document.querySelectorAll("#chordtemp");
    elements.forEach(div => {
        let chord = div.childNodes[1].innerHTML;
        Array.from(div.childNodes[3].options).forEach(function(option_element) {
            if (option_element.text == chord) {
                option_element.selected = true;
                let file = option_element.dataset.file;
                console.log(file);
                div.childNodes[5].setAttribute("src", file);
            }
        });
    });
};

edit.html

Быстрое решение здесь - изменить media/{{ chord.file }} на /media/{{ chord.file }}. Однако вам не следует вручную создавать этот путь в первую очередь. Я думаю, что вместо этого можно сделать {{ chord.file.url }}. Здесь я предполагаю, что chord - это объект модели с FileField именем file. Я предлагаю вам ознакомиться с документацией по FileField, чтобы проверить это и понять лучше.

Вернуться на верх