Django中HTML5 audio标签无法播放上传音频的问题解决

一、修正模板中的音频路径 #

你当前模板里直接使用{{ file.audio_file }}是错误的，Django的FileField对象需要调用.url属性来获取可访问的文件URL，修改模板代码如下：

{% for file in audio %}
<li>
    <h4>{{ file.title }}</h4>
    <div class="name"><a href="{{ file.audio_file.url }}" target="_blank">{{ file.name }}</a></div>
    <div class="play">
        <audio src="{{ file.audio_file.url }}" controls>
            你的浏览器不支持音频播放元素。
        </audio>
    </div>
</li>
{% endfor %}

注意：把循环内的id改成class，重复id不符合HTML规范，可能引发样式或JS冲突

二、确认模型定义的正确性 #

确保AudioFile模型配置符合规范，示例如下：

from django.db import models

class AudioFile(models.Model):
    title = models.CharField(max_length=255)
    name = models.CharField(max_length=255)  # 可考虑直接用audio_file.name替代，避免字段冗余
    audio_file = models.FileField(upload_to='audio_files/')  # upload_to路径按需调整

    def __str__(self):
        return self.title

三、确保媒体文件的服务配置 #

开发环境 #

在项目主urls.py中添加媒体文件路由，让开发服务器能正确托管媒体资源：

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

urlpatterns = [
    # 你的其他路由配置
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

生产环境 #

生产环境不能依赖Django开发服务器托管媒体文件，需配置Nginx/Apache等Web服务器直接处理MEDIA_URL路径的请求，指向MEDIA_ROOT目录。例如Nginx配置片段：

location /media/ {
    alias /path/to/your/project/media/;
}

四、额外排查点 #

• 检查音频文件格式是否被浏览器支持（主流支持格式：MP3、WAV、OGG）
• 点击模板里的音频链接，确认文件能正常下载/播放，排除文件损坏或权限问题
• 查看浏览器控制台的网络请求，确认audio标签的src请求返回200状态码，若返回404则说明路径配置仍有问题

内容的提问来源于stack exchange，提问作者desboisrob