Мне удалось выяснить это благодаря документации Django и переполнению стека подобных проблем, но я не могу использовать song.audio в качестве src в моих тегах <source> моего html.
Цель:
Отображение списка песен с воспроизводимым аудиофайлом. Это только загружено с администратора / страницы.
Моя проблема:
Когда я проверяю элемент, <source> src реквизит, кажется, успешно указываетк аудиофайлу, но он не загружает его в браузер как реально воспроизводимую «вещь».
В консоли сервера запуска Django вывод при нажатии кнопки «воспроизведения» аудиопроигрывателя является ничем, но когдастраница загружается "GET /songs/media/song_qW9qTXh.mp3 HTTP/1.1" 404 2715. Перемещая каталог мультимедиа в каталог песни / , вывод остается таким же .
Chrome проверяет вывод следующего кода: 
Мои материалы:
Структура папки:
song-viewer/
| media/
| | song1.mp3
| | song1_w784FH21.mp3
| | song2.mp3
| | song2_r8JJfq0.mp3
|
| song-viewer/
| | __init__.py
| | settings.py
| | urls.py
| | views.py
|
| songs/
| | migrations/
| | templates/
| | | songs/
| | | | song_list.html
| | __init__.pyt
| | admin.py
| | apps.py
| | forms.py
| | models.py
| | urls.py
| | views.py
|
| static/
| | styles.css
|
| templates/
| | base_layout.html
|
| manage.py
| README.md
| requirements.txt
Просмотр песен / settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static'),
]
STATIC_ROOT = ''
"""
The above static works fine (am able to link CSS successfully).
However, the below does not. I have shotgunned several different
methods of doing this, including setting MEDIA_ROOT = os.path.join(BASE_DIR, ''), and hiding MEDIA_ROOT
"""
MEDIA_ROOT = ''
MEDIA_URL='/media/'
song-viewer / urls.py
from django.contrib import admin
from django.urls import path, include
from . import views
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
path('admin/', admin.site.urls),
path('songs/', include('songs.urls')),
path('', views.homepage)
]
urlpatterns += staticfiles_urlpatterns()
song-viewer / views.py
from django.http import HttpResponse
from django.shortcuts import render
def homepage(request):
# return HttpResponse('Hello from Home!')
return render(request, 'homepage.html')
песни / шаблоны / песни / song_list.html
{% extends 'base_layout.html' %}
{% block content %}
<h1>Song List</h1>
<div class="songs-container">
{% for song in songs %}
<div class="song">
<h2><a href="{% url 'songs:detail' slug=song.slug %}">{{ song.title }}</a></h2>
<p>{{ song.snippet }}</p>
<p>{{ song.date }}</p>
<audio controls>
<source src="{{ song.audio }}" type="audio/mpeg" >
<!-- <source src="{{ song.audio }}" type="audio/mpeg" > NOTE: This gives same output-->
</audio>
{{ song.audio }}
</div>
{% endfor %}
</div>
{% endblock %}
песни /forms.py
from django import forms
class DocumentForm(forms.Form):
docfile = forms.FileField(
label='Select an audio file',
help_text='Must be mp3 format'
)
песни / models.py
from django.db import models
class Song(models.Model):
title = models.CharField(max_length=50)
slug = models.SlugField()
desc = models.TextField()
date = models.DateTimeField(auto_now_add=True)
audio = models.FileField(upload_to='media/')
def __str__(self):
return self.title
def snippet(self):
return self.desc[:50] + ' ...'
песни / urls.py
from django.urls import path
from . import views
app_name = 'songs'
urlpatterns = [
path('', views.song_list, name="list"),
path('<slug>/', views.song_detail, name="detail")
]
песни / views.py
from django.shortcuts import render
from django.template import RequestContext
from django.http import HttpResponse, HttpResponseRedirect
from django.urls import reverse
from .models import Song
from .forms import DocumentForm
def song_list(request):
if request.method == 'POST':
form = DocumentForm(request.POST, request.FILES)
if form.is_valid():
newdoc = Song(docfile = request.FILES['docfile'])
newdoc.save()
return HttpResponseRedirect(reverse('song_list'))
else:
form = DocumentForm()
songs_data = Song.objects.all().order_by('date')
return render(request, 'songs/song_list.html', {'songs': songs_data, 'form': form})
def song_detail(request, slug):
return HttpResponse(slug)
Я застрял на этом довольно долгое время, и я был бы признателен за любую помощь!