如何在HTML音频源标记中链接Django模型的属性？

Question

多亏了Django文档和类似问题的堆栈溢出，我才设法解决了这个问题，但我似乎无法使用歌曲.音频作为我的html的<source>标记中的src。你知道吗

目标是：

显示带有可播放音频文件的歌曲列表。这是从admin/页面上传的。你知道吗

我的问题是：

当我检查元素时，<source>的src属性似乎成功地指向音频文件，但它不会将其作为浏览器中实际可播放的“东西”加载。你知道吗

在Django runserver控制台中，当单击音频播放器的“播放”按钮时，输出为nothing，但当页面加载时，输出为"GET /songs/media/song_qW9qTXh.mp3 HTTP/1.1" 404 2715。将媒体目录移动到songs/目录，输出仍然是相同的。你知道吗

检查以下代码的输出：

我的东西：

文件夹结构：

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

歌曲查看器/设置.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/'

歌曲查看器/网址.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()

歌曲查看器/视图.py

from django.http import HttpResponse
from django.shortcuts import render

def homepage(request):
    # return HttpResponse('Hello from Home!')
    return render(request, 'homepage.html')

歌曲/模板/歌曲/歌曲_列表.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 %}

歌曲/表单.py

from django import forms

class DocumentForm(forms.Form):
    docfile = forms.FileField(
        label='Select an audio file',
        help_text='Must be mp3 format'
    )

歌曲/型号.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] + ' ...'

歌曲/网址.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")
]

歌曲/视图.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)

Answer 1

我假设您正在开发服务器上运行。您可以使用django.views.static文件.serve（）视图。你知道吗

歌曲查看器/设置.py

MEDIA_ROOT = os.path.join(BASE_DIR, '')
MEDIA_URL = '/media/'

歌曲查看器/网址.py

from django.contrib import admin
from django.urls import path, include
from . import views
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('songs/', include('songs.urls')),
    path('', views.homepage)
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

urlpatterns += staticfiles_urlpatterns()

引用：https://docs.djangoproject.com/en/2.2/howto/static-files/#serving-files-uploaded-by-a-user-during-development