Аудиофайл Django не воспроизводится

Проблема с Django и тегом HTML5: Невозможно воспроизвести загруженные аудиофайлы

Репо: https://github.com/desboisGIT/TestSite

У меня возникла проблема с воспроизведением аудиофайлов, загруженных через мое Django-приложение с помощью тега HTML5. Вот установка:

Описание проблемы:

У меня есть модель Django (AudioFile) с полем FileField (audio_file) для загрузки аудиофайлов. В моем шаблоне я итерирую набор (audio) объектов AudioFile, чтобы отобразить детали аудио и предоставить возможность воспроизведения с помощью тега. Сниппет кода шаблона:

{% for file in audio %}
<li>
    <h4>{{ file.title }}</h4>
    <div id="name"><a href="{{ file.audio_file }}" target="_blank">{{ file.name }}</a></div>
    <div id="play">
        <audio src="{{ file.audio_file }}" controls="controls">
            Your browser does not support the audio element.
        </audio>
    </div>
</li>
{% endfor %}

Ожидаемое поведение:

Нажатие на кнопку воспроизведения для каждого аудиофайла должно инициировать воспроизведение непосредственно в браузере с использованием аудиовозможностей HTML5. Предпринятые шаги:

Проверили настройки MEDIA_URL и MEDIA_ROOT в settings.py, чтобы убедиться, что медиафайлы обслуживаются правильно. Проверили настройку модели Django (models.py), чтобы подтвердить путь upload_to для поля FileField. Вопрос: Как правильно настроить Django и тег в HTML5 для воспроизведения загруженных аудиофайлов? Какие изменения необходимо внести в шаблоны и определения моделей, чтобы обеспечить правильную функциональность воспроизведения?

Любые соображения или предложения будут высоко оценены! Спасибо.

1. Если вы принимаете загруженные пользователем медиафайлы, вам придется обслуживать их самостоятельно, так как Django не будет делать это за вас.

Обычно вы делаете что-то вроде этого в корневом URLconf вашего проекта, чтобы обслуживать эти загруженные пользователем медиафайлы:

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [•••Rest of code•••]

if settings.DEBUG: #[1]
    urlpatterns += [
        static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    ]

2. audio_file является экземпляром FileField, и когда вы обращаетесь к этому экземпляру FileField, вам предоставляется экземпляр FieldFile в качестве прокси для доступа к базовому файлу. Все это не является родным для HTML. Поэтому HTML не может понять этот код:

<audio src="{{ file.audio_file }}" controls="controls">
    Your browser does not support the audio element.
</audio>

HTML5 audio.src [MDN]

The URL of the audio to embed.

Это означает, что audio.src ожидает URL в качестве аргумента, но вы предоставляете экземпляр FieldFile. У FieldFile есть атрибут url, который позволяет получить URL базового файла, так что исправление будет таким:

<audio src="{{ file.audio_file.url }}" controls="controls">
    Your browser does not support the audio element.
</audio>

[1] Notice the settings.DEBUG? "User uploaded media files" is a very sensitive topic so be careful about this and don’t use this in production.

так что у меня есть: 

<audio controls class="w-100">
     <source src="{{ beat.audio_file.url }}" type="audio/mpeg">
     Your browser does not support the audio element.
</audio>

и: 

#urls.py
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

my media url is:

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

но когда я заряжаю страницу, в логах появляется следующее:

[21/Jun/2024 11:43:08] "GET /media/images/beats/image.png HTTP/1.1" 404 3047
Not Found: /media/audio/beats/audio.mp3
[21/Jun/2024 11:43:08] "GET /media/audio/beats/audio.mp3 HTTP/1.1" 404 3043

даже если мой файл находится в этом extat url: C:\Users\robch\Desktop\TestSite\Soundrise\files\media\audio\beats\audio.mp3 и структура моего файла такова:

C:.
├───accounts
│   ├───migrations
│   │   └───__pycache__
│   └───__pycache__
├───beatmakers
│   ├───migrations
│   │   └───__pycache__
│   └───__pycache__
├───beats
│   ├───migrations
│   │   └───__pycache__
│   └───__pycache__
├───content
│   ├───migrations
│   │   └───__pycache__
│   └───__pycache__
├───files
│   ├───media
│   │   ├───audio
│   │   │   └───beats
│   │   └───images
│   │       └───beats
│   ├───static
│   │   ├───css
│   │   ├───images
│   │   ├───js
│   │   └───svg
│   └───templates
│       ├───blocks
│       ├───layout
│       └───pages
│           └───parametre
└───Soundrise
    └───__pycache__

я схожу с ума ничего не работает, я пробовал на operaGX & FireFox, очистил кэш ect...

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