Как связать свойство модели Django с тегами источника звука HTML? - PullRequest
0 голосов
/ 28 октября 2019

Мне удалось выяснить это благодаря документации Django и переполнению стека подобных проблем, но я не могу использовать song.audio в качестве src в моих тегах <source> моего html.

Цель:

Отображение списка песен с воспроизводимым аудиофайлом. Это только загружено с администратора / страницы.

Моя проблема:

Когда я проверяю элемент, <source> src реквизит, кажется, успешно указываетк аудиофайлу, но он не загружает его в браузер как реально воспроизводимую «вещь».

В консоли сервера запуска Django вывод при нажатии кнопки «воспроизведения» аудиопроигрывателя является ничем, но когдастраница загружается "GET /songs/media/song_qW9qTXh.mp3 HTTP/1.1" 404 2715. Перемещая каталог мультимедиа в каталог песни / , вывод остается таким же .

Chrome проверяет вывод следующего кода: Image showing the chrome output of the code

Мои материалы:

Структура папки:

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)

Я застрял на этом довольно долгое время, и я был бы признателен за любую помощь!

1 Ответ

1 голос
/ 28 октября 2019

Я предполагаю, что вы работаете на сервере разработки. Медиа-файлы из MEDIA_ROOT можно передавать с помощью представления django.views.static.serve ().

song-viewer / settings.py

MEDIA_ROOT = os.path.join(BASE_DIR, '')
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
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

...