Question 393879 in Html Question posted in
Some basic documentation can be found here.

Html – Django audio file not playing

Issue with Django and HTML5 Tag: Unable to Play Uploaded Audio Files

Repo: https://github.com/desboisGIT/TestSite

I’m encountering an issue with playing audio files uploaded through my Django application using HTML5’s tag. Here’s the setup:

Problem Description:

I have a Django model (AudioFile) with a FileField (audio_file) to upload audio files.
In my template, I’m iterating over a queryset (audio) of AudioFile objects to display audio details and provide a playback option using the tag.
Template Code Snippet:

{% 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 %}

Expected Behavior:

Clicking the play button for each audio file should initiate playback directly within the browser using HTML5 audio capabilities.
Steps Taken:

Verified MEDIA_URL and MEDIA_ROOT settings in settings.py to ensure media files are correctly served.
Checked Django model setup (models.py) to confirm upload_to path for FileField.
Question:
How can I correctly configure Django and the tag in HTML5 to play uploaded audio files? What adjustments are needed in the template and model definitions to ensure proper playback functionality?

Any insights or suggestions would be greatly appreciated! Thank you.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    so i have:

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

    and:

    #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')

    but when i am charging up the page it get this in the logs:

    [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

    even tho my file is in this extat url: C:UsersrobchDesktopTestSiteSoundrisefilesmediaaudiobeatsaudio.mp3 and my file structure is:

    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__

    im getting crazy nothing is working, i tryed on operaGX & FireFox, cleaned cache ect...


  2. 0

    1. When you accept user uploaded media files, you have to serve these yourself since Django will not do that for you.

    You would typically do something like this in the root URLconf of your project to serve these user uploaded media files:

    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 is an instance of FileField and when you access this FileField instance, you are given an instance of FieldFile as a proxy for accessing the underlying file. All these are not native to HTML. So HTML can’t understand this code:

    <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.

    This means that audio.src expects a URL as argument but you are supplying a FieldFile instance. FieldFile has a url attribute that can enable you get the URL of the underlying file so the fix would be:

    <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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search