Django - how to access local audio files in different URL paths? - django

Question

Thanks in advance for reading. I'm working on my final project for CS50W which involves working with a series of local audio files (user cannot upload additional files at this time). The issue occurs when I try to populate an src attribute with the file. I have two URL paths which deal with accessing these files: new/ and edit/int:id. When I access the audio files in new/, it works as intended and I can play the file from the tag. However, when I try to access the files in the edit/int:id path, I get this error:
GET http://localhost/edit/8/media/Aminor_Ipi3udk.mp3 net::ERR_ABORTED 404 (Not Found)
I am relatively new to coding (just did CS50x and then started CS50w) and I don't understand why I'm getting this error or how I can fix it - I'm doing the same thing for both paths and yet it only works in one of them. I would be grateful if someone could help me to remedy this or at least point me in the direction of understanding why this is happening.
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
{% extends "songbud/layout.html" %}
{% load static %}
{% block body %}
<div id="songcreate" style="margin: 30px; font-family: 'Courier New';">
<h1 id="song-title">{{ song.title }}</h1>
<button class="btn btn-outline-warning" id="addsection" onclick="return add_section()">+ add section</button>
</div>
{% for section in sections %}
<div style="display: block; margin: 20px;" id='sectiontemplate'>
<label for='sectiontype'>Choose a section:</label>
<br>
<select class="form-select" aria-label="Default select example" name='sectiontype' id='sectiontype' style="display: inline-block;">
{% if section.sectiontype == 'Intro' %}
<option selected>Intro</option>
{% else %}
<option >Intro</option>
{% endif %}
{% if section.sectiontype == 'Verse' %}
<option selected>Verse</option>
{% else %}
<option>Verse</option>
{% endif %}
{% if section.sectiontype == 'Chorus' %}
<option selected>Chorus</option>
{% else %}
<option>Chorus</option>
{% endif %}
{% if section.sectiontype == 'Bridge' %}
<option selected>Bridge</option>
{% else %}
<option>Bridge</option>
{% endif %}
{% if section.sectiontype == 'Interlude' %}
<option selected>Interlude</option>
{% else %}
<option>Interlude</option>
{% endif %}
{% if section.sectiontype == 'Breakdown' %}
<option selected>Breakdown</option>
{% else %}
<option>Breakdown</option>
{% endif %}
{% if section.sectiontype == 'Solo' %}
<option selected>Solo</option>
{% else %}
<option>Solo</option>
{% endif %}
{% if section.sectiontype == 'Outro' %}
<option selected>Outro</option>
{% else %}
<option>Outro</option>
{% endif %}
</select>
<button class="btn btn-outline-warning" id="addchord" onclick='add_chord(this)' style="display: inline-block;">+ add chord</button>
<br>
{% for chord in section.chords %}
<div id='chordtemp'>
<p style='display: none;'>{{ chord }}</p>
<select name="chordselect" id="chordselect" class="form-select" aria-label="Default select example" style="display: inline-block; vertical-align: center;" onchange="return select_audio_edit(this)">
{% for chrd in chords %}
<option data-file="media/{{ chrd.file }}">{{ chrd }}</option>
{% endfor %}
</select>
<audio controls id='audiofile' style="display: inline-block; position: relative; top: 23px;">
<source src="" type="audio/mp3">
</audio>
</div>
{% endfor %}
</div>
{% endfor %}
<!-- These are the templates for sections and chords -->
<div style='display:none;' data-type='sectiontemplate' id='sectiontemplate'>
<label for='sectiontype'>Choose a section:</label>
<br>
<select class="form-select" aria-label="Default select example" name='sectiontype' id='sectiontype' style="display: inline-block;">
<option>Intro</option>
<option>Verse</option>
<option>Chorus</option>
<option>Bridge</option>
<option>Interlude</option>
<option>Breakdown</option>
<option>Solo</option>
<option>Outro</option>
</select>
<button class="btn btn-outline-warning" id="addchord" onclick='add_chord(this)' style="display: inline-block;">+ add chord</button>
<br>
<br>
</div>
<div style='display:none;' data-type='chordtemplate' id='chordtemplate'>
<select name="chordselect" id="chordselect" class="form-select" aria-label="Default select example" style="display: inline-block; vertical-align: center;" onchange="return select_audio(this)">
{% for chord in chords %}
<option data-file="media/{{ chord.file }}">{{ chord }}</option>
{% endfor %}
</select>
<audio controls style="display: inline-block; position: relative; top: 23px;">
<source src="" type="audio/mp3">
</audio>
</div>
<button class="btn btn-outline-warning" id="savesong" onclick="return save_song()">save</button>
<button class="btn btn-outline-warning" id="exportsong" onclick="return export_song_edit()">export</button>
{% endblock %}
{% block script %}
<script src="{% static 'songbud/songbud.js' %}"></script>
{% endblock %}

Answer 1

The quick fix here is to change media/{{ chord.file }} to /media/{{ chord.file }}. However, you shouldn't be manually creating this path in the first place. I think you can do {{ chord.file.url }} instead. Here I'm assuming that chord is a model object with a FileField named file. I suggest you check the documentation for FileField to verify this and understand it better.